Beyond Boxes

This preso with a bunch of video - sorry for the peeps playing at home. You probably wouldn't get much value just from these slides alone tbh - this is here so the audience can grab the links to all the stuff shown in slides!

Slide 7 video:
http://visualizer.halowaypoint.com
http://www.dilladimension.com
http://www.because-recollection.com
http://a-way-to-go.com
http://worldbakingday.com
http://codepen.io/Yakudoo/pen/YXxmYR
https://musiclab.chromeexperiments.com
http://24hoursofhappy.com
http://leapsecond2015.com
http://1000.chromeexperiments.com
http://codepen.io/ARS/pen/pjypwd
http://www.mdcenter.co.jp/
http://resizemyhome.com/
http://40together.razorfishawards.com
http://www.dennis.video
http://findingho.me
http://species-in-pieces.com

Slide 20 video:
http://bigwilly.style

Slide 21 video:
http://corgiorgy.com

CodePens with the Canvas code I showed:
http://codepen.io/rachsmith/pen/gaxOMN/
http://codepen.io/rachsmith/pen/NGwwGo
http://codepen.io/rachsmith/pen/jbaQPR

Slide 61: Ana Tudor's pen
http://codepen.io/thebabydino/pen/avwKGw

Slide 88: https://vimeo.com/83409816
Check out Wentin Guo she is crazy talented

Slide 89: Plinco board created by John Brown & Ben Purdy check John out he's my fave JS artist http://thisisjohnbrown.com/

Slide 90: Google's Open Source Library https://googlecreativelab.github.io/anypixel/

Slide 92: Lightwave party video
https://vimeo.com/91690892
Slide 93: Installation by Active Theory http://twitter.com/active_theory for Google IO

Slide 94-96
http://webvr.info/
https://vr.chromeexperiments.com/
https://webvr.info/get-chrome/
demo shown: https://twitter.com/fernandojsg/status/737682918227742720
http://mozvr.com/
https://aframe.io/

Come have fun coding with me at CodePen!!!
http://codepen.io

Transcript

1. BEYOND BOXES @rachsmithtweets
2. I’m Rachel. I like websites.
3. Usually I talk about using animation “sensibly” Today we’re going to have some fun
6. mate, that’s bullshit. #thingsAustraliansSay
7. Music: hunniez by popcorn_10 Links to sites & their creators will be in the slide deck notes :)
8. I’ve worked in the weird web
9. Advertising Radvertising Sadvertising :(
10. Working in advertising… Expectation
11. Working in advertising… Reality 10pm before launch day and shit is broken :(
12. WHY?
13. A long, long, time ago (in 2012)
15. So I joined the fight The fight to create the ultimate campaign site!
16. Clients are chasing interactive experiences that consumers haven’t seen before.
17. I’m constantly on the look out for fresh examples of: Media integration animation graphics (Canvas & WebGL)
18. I fell in love with “demo culture”. Code as not just a means to an end. Code as art.
22. Let’s make something with JavaScript and Canvas!
23. Some myths about this kind of coding… But first
24. You need to be good at math NOPE
25. What people think I do…
26. What I really do
27. You need to be an amazing designer. NOPE
28. You can make very pretty things by playing around with a few variables
29. <canvas id="canvas"></canvas>
30. // 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();
32. Animating with the Canvas
34. Let’s break it down It all starts with a loop…
35. 
 
 function loop() { // things to happen in the frame go here requestAnimationFrame(loop);
 }
 
 loop();
36. context.rect(50, 50, 100, 100); context.stroke();
37. context.clearRect(0, 0, width, height);
38. context.rect(52, 50, 100, 100); context.stroke();
39. context.clearRect(0, 0, width,height); context.rect(54, 50, 100, 100); context.stroke();
40. context.clearRect(0, 0, width,height); context.rect(56, 50, 100, 100); context.stroke();
41. context.clearRect(0, 0, width,height); context.rect(58, 50, 100, 100); context.stroke();
42. context.clearRect(0, 0, width,height); context.rect(60, 50, 100, 100); context.stroke();
43. Introduce some hack physics (velocity)
44. Use some vector math vector y x
45. 
 
 
 function drawSquare(x, y) {
 context.beginPath();
 context.rect(x, y, 100, 100);
 context.stroke();
 context.closePath();
 }
46. // position
 var x = 10;
 var y = 10;
 // velocity
 var vx = 1;
 var vy = 1;
47. 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);
 }
49. Let’s add… more squares scaling rotation rainbow colors!
50. function Square(position, velocity, size, color) {
 this.position = position;
 this.velocity = velocity;
 this.size = size;
 this.color = color;
 }
51. Square.prototype.update = function() {
 // update position
 this.position.x += this.velocity.x;
 this.position.y += this.velocity.y;
 // update size
 this.size += 0.05;
 }
52. 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();
 }
53. // 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);
 }
54. // 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); }
55. 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);
 }
56. 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);
 }
58. The HSL trick!
59. Choose a saturation (%), lightness (%), and use JavaScript to cycle through the hue
63. 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);
 }
65. 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;
 }
66. 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;
 }
67. 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();
 }
69. DIY with the Canvas API can get a little tedious. Fabric.js Easel.js Paper.js many more…
70. 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);
71. get creative! Canvas WebGL (not just for 3D!) SVG CSS & the DOM
74. MAYBE NOT
75. What can appear as a very abstract exercise… will create transferable, practical skills
76. Physics & Vector math
77. Physics & Vector math
78. JavaScript skillzz
80. While coding “art” I learnt… Namespacing and “this” Object Management Prototypal Inheritance The memory heap…
81. Browser performance
82. “What do you mean I can’t jam 2000 SVG elements in to a document with a blur filter??”
83. The simple question of “why are my fans on?” requestAnimationFrame JavaScript memory management layout, composition, paint in the DOM
84. The web is no longer just a browser on your computer!
85. It’s not even just a browser on your phone! (Or on your fridge, or on your Apple Watch).
86. EVERYWHERE EVERYWHERE EVERYWHERE learning JavaScript will come in handy cause JavaScript is EVERYWHERE
87. web displays using hardware other than screens Projection Mapping &
91. Group/public interfaces
94. #webVR Virtual Reality
96. blob:https%3A//twitter.com/c9f0d2a6-5fa7-4632-837f-10279fbe2049
97. Get creative. Get JavaScripting!
98. join us…
99. THANK YOU!!! @rachsmithtweets come and chat to me any time over the conference (I’m shy lol)