CodePen LA lightning preso Sept 2016

the pen: http://codepen.io/rachsmith/pen/yayOVQ

color scheme resources:
https://coolors.co
http://www.colourlovers.com

Transcript

1. HI!
3. PEOPLE TELL ME… I WANT TO MAKE STUFF LIKE THAT…
4. BUT I DON’T KNOW WHAT TO MAKE!
5. HERE’S THE THING… MOST OF THE TIME NEITHER DO I!
6. I START WITH A SMALL PIECE OF CODE (LIKE AN SVG SHAPE)
7. PARAMETERIZE
8. RANDOMIZE
9. TWEEN
10. ITERATE THROUGH
11. <path d="M100,250 c0,-150 300,-150 300,0" /> Twitter: @rachsmithtweets for the slides
12. <path d="M100,250 c0,-150 300,-150 300,0" /> START POINT FIRST CURVE POINT SECOND CURVE POINT END POINT
13. const path = document.createElementNS('http://www.w3.org/ 2000/svg', ‘path'); 
 let d = `M${x0},${y0} c${x1},${y1} ${x2},${y2} ${x3},${y3}`; 
 path.setAttribute('d', d);
 PARAMETERIZING CREATING VARIABLES TO CONTROL THE SHAPE WITH
14. class Blob {
 constructor(x, y, maxHeight) {
 this.x0 = x;
 this.x1 = Math.random()*40;
 this.x2 = this.x1 + Math.random()*40;
 this.x3 = this.x2 + Math.random()*40;
 this.y0 = y;
 this.y1 = -20 + -maxHeight*Math.random();
 } } RANDOMIZE WHAT VARIABLES CAN WE RANDOMIZE TO CREATE VISUAL INTEREST? WIDTH HEIGHT
15. const createBlobRow = () => {
 var y = window.innerHeight;
 for (var x = 0; x < window.innerWidth;) {
 var blob = new Blob(x, y, window.innerHeight*0.5);
 blobs.push(blob);
 svg.appendChild(blob.pathEl);
 // increase x by last blob width
 x += blob.x3;
 blob.updatePath();
 }
 } GENERATE SEVERAL SHAPES
17. animate() {
 var _this = this;
 var time = 0.3 + Math.random()*1.2;
 TweenLite.to(_this, time, {
 y1: _this.yTarget,
 ease: Power2.easeInOut,
 onUpdate: () => _this.updatePath(),
 onComplete: () => TweenLite.to(_this, time, {
 y1: 0,
 onUpdate: () => _this.updatePath(),
 onComplete: () => _this.animate()
 })
 });
 } TWEEN STILL RANDOMIZING! THE PARAMETERS
19. ITERATING THROUGH COLORS (RAINBOW COLORS)
20. AIN’T NOBODY GOT TIME FOR DESIGNING COLOR SCHEMES
24. const colors = ['#C501E1', '#9A26F8', '#6564FE', '#2B97FA', '#02C4E7', '#16E6CC', '#2EF9A0', '#C6E501', '#E7C501', '#FF6A63', '#F82D98', '#E830CE'];
25. const createBlobRow = (maxHeight, colorOffset) => {
 var y = window.innerHeight;
 var c = colorOffset;
 for (var x = 0; x < window.innerWidth;) {
 var color = colors[c]
 var blob = new Blob(x, y, maxHeight, color);
 blobs.push(blob);
 svg.appendChild(blob.pathEl);
 x += blob.x3;
 c++;
 if (c === colors.length) c = 0;
 
 blob.animate();
 }
 } ITERATE THROUGH THE COLORS ASSIGN A COLOR
27. EXPERIMENT WITH: TIMING COLOR SHAPE LAYERING
28. THE END RESULT LESS ABOUT…
29. THE JOURNEY AND THE THINGS YOU LEARN ON THE WAY MORE ABOUT…
30. SO RELAX, EXPLORE AND MOST IMPORTANTLY HAVE FUN!