There is also canvas

Bruno Imbrizi @ WebExpo 2016

Invitation

For Czechs is typical that we always try do things our way (...) we are a nation of handymen and inventors.

Invitation

Czechs don’t like people who want to look clever, but love people who achieved something, because they were able to look at things differently.

< canvas >

Hi, I'm Bruno

From Brazil

Based in London

UNIT9

Films / Digital / Games / VR / Innovation

Web

Installations

Let there be Canvas

Jul 2004 / So Apple decided to make up some new tags

Jan 2008 / W3C First Public Draft

Aug 2009 / 9elements canvas experiment

Flash

Processing

openFrameworks

Similarities

Big bitmap

Graphics API

Refresh event / method

Jul 2012 / sketch.js

Aug 2012 / my first canvas

Create a canvas


const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

requestAnimationFrame(draw);

Draw a rectangle


ctx.fillRect(0, 0, 10, 10);

Draw more rectangles


for (let i = 0; i < 30; i++) {
	ctx.beginPath();
	ctx.rect(0, i * 50, 10, 10);
	ctx.closePath();
	ctx.fill();
}

Draw circles


for (let i = 0; i < 30; i++) {
	ctx.beginPath();
	ctx.arc(0, i * 50, 5, 0, Math.PI * 2);
	ctx.closePath();
	ctx.fill();
}

Store points as objects


// points: array containing 30 points

for (let i = 0; i < points.length; i++) {
	const p = points[i];

	ctx.beginPath();
	ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
	ctx.closePath();
	ctx.fill();
}

Draw lines


ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);

for (let i = 0; i < points.length - 1; i++) {
	const np = points[i + 1];
	ctx.lineTo(np.x, np.y);
}

ctx.stroke();

Move points


for (let i = 0; i < points.length; i++) {
	const p = points[i];
	p.x = Math.random() * 100 - 50;
}

Follow mouse


const p = points[0];
p.x = mouse.x;
p.y = mouse.y;

Max distance


const distance = 50;

const p0 = points[0];
const p1 = points[1];

const dx = p1.x - p0.x;
const dy = p1.y - p0.y;
const dd = Math.sqrt(dx * dx + dy * dy);
const angle = atan2(dy, dx);

if (dd > distance) {
	p1.x = p0.x + distance * cos(angle);
	p1.y = p0.y + distance * sin(angle);
}

Apply to all


for (let i = 1; i < points.length; i++) {
	const pp = points[i - 1];
	const p = points[i];

	const dx = p.x - pp.x;
	const dy = p.y - pp.y;
	const dd = Math.sqrt(dx * dx + dy * dy);
	const angle = atan2(dy, dx);

	if (dd > distance) {
		p.x = pp.x + distance * cos(angle);
		p.y = pp.y + distance * sin(angle);
	}
}

Make it elastic I


for (let i = points.length - 1; i > 0; i--) {
	// define pp, p, dx, dy, dd, angle as before
	
	p.vx *= 0.9;
	p.vy *= 0.9;

	p.x += p.vx;
	p.y += p.vy;

Make it elastic II


const ox = p.x;
const oy = p.y;	

if (dd > distance) {
	p.x = pp.x + distance * cos(angle);
	p.y = pp.y + distance * sin(angle);

	p.vx += (p.x - ox) * 0.1;
	p.vy += (p.y - oy) * 0.1;
}

Draw curves


ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, p.x, p.y);

Stop clearing


// ctx.clearRect(0, 0, canvas.width, canvas.height);

Adjust colors


ctx.globalCompositeOperation = 'lighter';
ctx.strokeStyle = 'rgba(255, 170, 0, 0.1)';

Canvas + Web Audio

Canvas in projects

Kingsman

2014 / kingsmanmovie.com

Main menu

Background: map with moving cars

Fight scene

Gestures to trigger movement

An Deiner Seite

2016 / andeinerseite.video

Interactive video

Past / Present

Timeline

First mockup: lines and circles

Timeline

Design: curves following the waveform of the song

More

Context 3D

Thank you

brunoimbrizi.com / @brunoimbrizi

← →