Bruno Imbrizi @ WebExpo 2016
For Czechs is typical that we always try do things our way (...) we are a nation of handymen and inventors.
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.
Films / Digital / Games / VR / Innovation
Jul 2004 / So Apple decided to make up some new tags
Jan 2008 / W3C First Public Draft
Aug 2009 / 9elements canvas experiment
Big bitmap
Graphics API
Refresh event / method
Jul 2012 / sketch.js
Aug 2012 / my first canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
requestAnimationFrame(draw);
ctx.fillRect(0, 0, 10, 10);
for (let i = 0; i < 30; i++) {
ctx.beginPath();
ctx.rect(0, i * 50, 10, 10);
ctx.closePath();
ctx.fill();
}
for (let i = 0; i < 30; i++) {
ctx.beginPath();
ctx.arc(0, i * 50, 5, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
}
// 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();
}
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();
for (let i = 0; i < points.length; i++) {
const p = points[i];
p.x = Math.random() * 100 - 50;
}
const p = points[0];
p.x = mouse.x;
p.y = mouse.y;
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);
}
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);
}
}
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;
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;
}
ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, p.x, p.y);
// ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = 'lighter';
ctx.strokeStyle = 'rgba(255, 170, 0, 0.1)';
2014 / kingsmanmovie.com
Background: map with moving cars
Gestures to trigger movement
2016 / andeinerseite.video
Past / Present
First mockup: lines and circles
Design: curves following the waveform of the song
Context 3D