Tweet
Tweet

Slide 1

Slide 1 text

BEYOND BOXES @rachsmithtweets

Slide 2

Slide 2 text

I’m Rachel. I like websites.

Slide 3

Slide 3 text

Usually I talk about using animation “sensibly” Today we’re going to have some fun

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

mate, that’s bullshit. #thingsAustraliansSay

Slide 7

Slide 7 text

Music: hunniez by popcorn_10 Links to sites & their creators will be in the slide deck notes :)

Slide 8

Slide 8 text

I’ve worked in the weird web

Slide 9

Slide 9 text

Advertising Radvertising Sadvertising :(

Slide 10

Slide 10 text

Working in advertising… Expectation

Slide 11

Slide 11 text

Working in advertising… Reality 10pm before launch day and shit is broken :(

Slide 12

Slide 12 text

WHY?

Slide 13

Slide 13 text

A long, long, time ago (in 2012)

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

So I joined the fight The fight to create the ultimate campaign site!

Slide 16

Slide 16 text

Clients are chasing interactive experiences that consumers haven’t seen before.

Slide 17

Slide 17 text

I’m constantly on the look out for fresh examples of: Media integration animation graphics (Canvas & WebGL)

Slide 18

Slide 18 text

I fell in love with “demo culture”. Code as not just a means to an end. Code as art.

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Let’s make something with JavaScript and Canvas!

Slide 23

Slide 23 text

Some myths about this kind of coding… But first

Slide 24

Slide 24 text

You need to be good at math NOPE

Slide 25

Slide 25 text

What people think I do…

Slide 26

Slide 26 text

What I really do

Slide 27

Slide 27 text

You need to be an amazing designer. NOPE

Slide 28

Slide 28 text

You can make very pretty things by playing around with a few variables

Slide 29

Slide 29 text

Slide 30

Slide 30 text

// select canvas
 var canvas = document.getElementById('canvas');
 var context = canvas.getContext('2d');
 
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 
 // draw a rectangle
 context.rect(10, 10, 100, 100);
 context.stroke();

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Animating with the Canvas

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

Let’s break it down It all starts with a loop…

Slide 35

Slide 35 text


 
 function loop() { // things to happen in the frame go here requestAnimationFrame(loop);
 }
 
 loop();

Slide 36

Slide 36 text

context.rect(50, 50, 100, 100); context.stroke();

Slide 37

Slide 37 text

context.clearRect(0, 0, width, height);

Slide 38

Slide 38 text

context.rect(52, 50, 100, 100); context.stroke();

Slide 39

Slide 39 text

context.clearRect(0, 0, width,height); context.rect(54, 50, 100, 100); context.stroke();

Slide 40

Slide 40 text

context.clearRect(0, 0, width,height); context.rect(56, 50, 100, 100); context.stroke();

Slide 41

Slide 41 text

context.clearRect(0, 0, width,height); context.rect(58, 50, 100, 100); context.stroke();

Slide 42

Slide 42 text

context.clearRect(0, 0, width,height); context.rect(60, 50, 100, 100); context.stroke();

Slide 43

Slide 43 text

Introduce some hack physics (velocity)

Slide 44

Slide 44 text

Use some vector math vector y x

Slide 45

Slide 45 text


 
 
 function drawSquare(x, y) {
 context.beginPath();
 context.rect(x, y, 100, 100);
 context.stroke();
 context.closePath();
 }

Slide 46

Slide 46 text

// position
 var x = 10;
 var y = 10;
 // velocity
 var vx = 1;
 var vy = 1;

Slide 47

Slide 47 text

function loop() {
 // clear the canvas
 context.clearRect(0, 0, width, height);
 // update the position using velocity
 x = x + vx;
 y = y + vy;
 // draw the square
 drawSquare(x, y);
 requestAnimationFrame(loop);
 }

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Let’s add… more squares scaling rotation rainbow colors!

Slide 50

Slide 50 text

function Square(position, velocity, size, color) {
 this.position = position;
 this.velocity = velocity;
 this.size = size;
 this.color = color;
 }

Slide 51

Slide 51 text

Square.prototype.update = function() {
 // update position
 this.position.x += this.velocity.x;
 this.position.y += this.velocity.y;
 // update size
 this.size += 0.05;
 }

Slide 52

Slide 52 text

Square.prototype.draw = function() {
 // draw the square
 context.beginPath();
 context.rect(this.position.x, this.position.y, this.size, this.size);
 context.strokeStyle = this.color;
 context.stroke();
 context.closePath();
 }

Slide 53

Slide 53 text

// create the squares
 for (var i = 0; i < 200; i++) {
 var square = new Square({
 x: -100,
 y: -100
 }, {
 x: 0,
 y: 0
 }, 30, 'white');
 squares.push(square);
 }

Slide 54

Slide 54 text

// create the squares
 for (var i = 0; i < 200; i++) {
 var square = new Square({
 x: -100,
 y: -100
 }, {
 x: 0,
 y: 0
 }, 30, 'white');
 squares.push(square); startSquare(square, i * 200); }

Slide 55

Slide 55 text

function startSquare(square, delay) {
 setTimeout(function() {
 square.size = 30;
 square.velocity.x = 0.5 + Math.random() * 1;
 square.velocity.y = 0.5 + Math.random() * 1;
 }, delay);
 }

Slide 56

Slide 56 text

function loop() {
 context.clearRect(0, 0, width, height);
 var l = squares.length;
 for (var i = 0; i < l; i++) {
 squares[i].update();
 squares[i].draw();
 } 
 requestAnimationFrame(loop);
 }

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

The HSL trick!

Slide 59

Slide 59 text

Choose a saturation (%), lightness (%), and use JavaScript to cycle through the hue

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

for (var i = 0; i < 200; i++) {
 var hue = Math.round(360 / 30 * i);
 var color = 'hsl(' + hue + ', 50%, 50%)';
 var square = new Square({
 x: -100,
 y: -100
 }, {
 x: 0,
 y: 0
 }, 30, color);
 squares.push(square);
 startSquare(square, i * 200);
 }

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

function Square(position, velocity, size, color, vRotation) {
 this.position = position;
 this.velocity = velocity;
 this.size = size;
 this.color = color; this.rotation = 0; this.vRotation = vRotation;
 }

Slide 66

Slide 66 text

Square.prototype.update = function() {
 // update position
 this.position.x += this.velocity.x;
 this.position.y += this.velocity.y;
 // update size
 this.size += 0.05;
 // update rotation
 this.rotation += this.vRotation;
 }

Slide 67

Slide 67 text

Square.prototype.draw = function() {
 // save canvas coordinate system
 context.save();
 // translate to center of square
 context.translate(this.position.x + this.size * 0.5, this.position.y + this.size * 0.5);
 // rotate the canvas
 context.rotate(this.rotation * Math.PI / 180);
 // translate back
 context.translate(-(this.position.x + this.size * 0.5), - (this.position.y + this.size * 0.5));
 
 // draw the square
 ...
 
 // restore the coordinate system
 context.restore();
 }

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

DIY with the Canvas API can get a little tedious. Fabric.js Easel.js Paper.js many more…

Slide 70

Slide 70 text

var canvas = new fabric.Canvas('c');
 
 // create a rectangle with angle=45
 var rect = new fabric.Rect({
 left: 10,
 top: 10,
 stroke: 'white',
 width: 100,
 height: 100,
 angle: 45
 });
 
 canvas.add(rect);

Slide 71

Slide 71 text

get creative! Canvas WebGL (not just for 3D!) SVG CSS & the DOM

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

MAYBE NOT

Slide 75

Slide 75 text

What can appear as a very abstract exercise… will create transferable, practical skills

Slide 76

Slide 76 text

Physics & Vector math

Slide 77

Slide 77 text

Physics & Vector math

Slide 78

Slide 78 text

JavaScript skillzz

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

While coding “art” I learnt… Namespacing and “this” Object Management Prototypal Inheritance The memory heap…

Slide 81

Slide 81 text

Browser performance

Slide 82

Slide 82 text

“What do you mean I can’t jam 2000 SVG elements in to a document with a blur filter??”

Slide 83

Slide 83 text

The simple question of “why are my fans on?” requestAnimationFrame JavaScript memory management layout, composition, paint in the DOM

Slide 84

Slide 84 text

The web is no longer just a browser on your computer!

Slide 85

Slide 85 text

It’s not even just a browser on your phone! (Or on your fridge, or on your Apple Watch).

Slide 86

Slide 86 text

EVERYWHERE EVERYWHERE EVERYWHERE learning JavaScript will come in handy cause JavaScript is EVERYWHERE

Slide 87

Slide 87 text

web displays using hardware other than screens Projection Mapping &

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

Group/public interfaces

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

#webVR Virtual Reality

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

blob:https%3A//twitter.com/c9f0d2a6-5fa7-4632-837f-10279fbe2049

Slide 97

Slide 97 text

Get creative. Get JavaScripting!

Slide 98

Slide 98 text

join us…

Slide 99

Slide 99 text

THANK YOU!!! @rachsmithtweets come and chat to me any time over the conference (I’m shy lol)