Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CodePen LA lightning preso Sept 2016

Rachel Smith
September 14, 2016

CodePen LA lightning preso Sept 2016

Rachel Smith

September 14, 2016
Tweet

More Decks by Rachel Smith

Other Decks in Technology

Transcript

  1. HI!

  2. 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
  3. 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
  4. 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
  5. 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
  6. 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