Beyond Boxes - Creative coding with JavaScript

its another preso with a bunch of video - sorry for the peeps playing at home. Links to all the stuff shown in slides:

Slide 7 video:
http://visualizer.halowaypoint.com
http://www.dilladimension.com
http://spacecraftforall.com
http://a-way-to-go.com
http://worldbakingday.com
http://codepen.io/Yakudoo/pen/YXxmYR
https://chrome.com/supersyncsports
http://24hoursofhappy.com
http://leapsecond2015.com
http://1000.chromeexperiments.com
http://urwhatupost.com
http://codepen.io/ARS/pen/pjypwd
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: Lightwave party video
https://vimeo.com/91690892

Slide 91-92
http://webvr.info/
https://vr.chromeexperiments.com/
http://mozvr.com/

Codevember!!!
http://codevember2015.tumblr.com

Check us out at
http://activetheory.net

Transcript

1. BEYOND BOXES @rachsmithtweets
2. I’m Rachel. I make websites. I’m from Australia.
3. Usually I talk about using animation “sensibly” Today we’re going to have some fun
4. “Why have todays designers stopped dreaming?” Noah Stokes “Boxes and Grids, Oh My” - 2014
5. “Designers are less willing to take risks… Andrew Clarke “Creativity over predictability” - 2014 …Our work for the web has lost its creative soul”
6. I can see where they’re coming from. But I kind of have to disagree…
7. Music: hunniez by popcorn_10 Links to sites & their creators will be in the slide deck notes :)
8. I work 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. Now I’m part of 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 changing 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. Projection Mapping
91. Virtual Reality
93. Get creative. Get JavaScripting!
94. join us…
95. join us…
96. http://activetheory.net
97. @rachsmithtweets THANK YOU!!!