Creativity in Programming

@sarah_edo

For fun and $profit$

 

Sarah Drasner

What does it mean to be creative?

Programming is Creative

function fizzBuzz() {
  for (var i = 1; i <= 100; i++) {
    if (i%5 === 0 && i%3 === 0) {
      print('FizzBuzz');
    } else if (i % 3 === 0) {
      print ('Fizz');
    } else if (i % 5 === 0) {
      print ('Buzz');
    } else {
      print (i);
    }
  }
}

vs

for(i=0;i<50;)console.log(++i,i%3?'':'fizz',i%5?'':'buzz')

Important for your business

why?

  1. Hewlett-Packard: invested over $2 billion in R&D in 1999, and generated more than 1,300 patent applications. Net revenue: $42.37 billion. 
  2. Frito-Lay: cost savings over a four-year period of almost $600 million due to creativity training programs
  3. CEOs look creativity over any other quality -survey of more than 1,500 CEOs across 33 industries and 60 countries

Sources: 1. HP 2000 Annual report 2. VanGundy, 2004, 3. IBM Survey

Important for you

Flow

  • Complete immersion in tasks
  • Shares traits with hyperfocus
  • Loss of self-reflective conciousness
  • Subjective experience of time is altered

Happiest points in life

Photos by #WOCinTech

Fighting Burnout

Not just about resting?

Experiencing flow can give a lift to other activities

Using your brain in different ways strengthens it

  • Our neural pathways become set
  • Thinking about varied and new subjects increases plasticity
  • Flow plus varied thinking can cause reduced stress and happiness while programming for other tasks

Push yourself a little each time

*though too much at a time won't work

This demo.

How?

  • Questioning the base premises

  • Impose artificial bounds

  • Repurposing

  • Combining

  • Freedom

  • Use open source as a tool

Questioning the Base Premises

1

  • “Let’s spend more money.”
  • “Why don’t we spend more money, but on fewer vendors? We’ll reduce the number of vendors. We’ll place larger orders to some vendors, and we’ll get better price breaks.”
  • += $1 million dollars a year savings, based upon a one-hour creativity session.

 

Linear Thinking

Lateral Thinking

“We reduce costs by spending less money.”

source: Tanner, Igniting Innovation

Ethernet

Token Ring Networks

Ethernet

React

Questioned:

  • What if we write inline JavaScript?
  • What if we don't use the DOM?
  • What if we create a syntax that replaces our use for HTML?

You don't have x in CSS

  • What if we have variables?
  • What if we have for loops?
  • What if we can use mixins to pass in parameters like functions for DRYer code?

This shaped our specs. 

Impose artificial bounds

2

HSLA

Generative color is easier with HSLA because it's a little more human-readable

background: hsl(($i - 1)*($color / $color-frequency), 80%, 60%);

This demo.

This demo.

function combination() {
  var combo2 = "hsl(+=5%, +=2%, -=10%)";

  tl.to(body, 1, {
      backgroundColor: combo2
    }, "sated");
  tl.to(mult, 2, {
      fill: combo2
    }, "sated");
  ...

  return tl;
}

Artificial Physics

update: function (dt) {
    // friction opposes the direction of velocity
    var acceleration = -Math.sign(this.vx) * friction;
    // distance = velocity * time + 0.5 * acceleration * (time ^ 2)
    this.x += this.vx * dt + 0.5 * acceleration * (dt ^ 2);
   ...
}

Hack Physics and JavaScript by Rachel Smith

The Nature of Code, JS Stroll

This demo.

Recursion

...
if (length < 6) return;
cx.save();
cx.translate(0, length);
cx.rotate(-angle);
branch({length: length*scale, angle: angle, scale:scale});
...

Check a boundary

Or call itself again

This demo.

This demo.

Repurposing

3

This pen.

SVG

React

Request Animation Frame

GreenSock

CSS

Web technologies

const HeartMeter = React.createClass({
  render() {
    return (
      <div>
        <svg className="heartmeter" xmlns="http://www.w3.org/2000/svg" width="250" height="50" viewBox="0 0 1741.8 395.6">
          <path d="M1741.8 197.7c0 109.3-89 197.8-198.8 197.8a198.6 198.6 0 0 1-158.5-78.4H11.2A11.2 11.2 0 0 1 0 305.9V89.5a11.2 11.2 0 0 1 11.2-11.1h1373.4A198.8 198.8 0 0 1 1543 0c109.8 0 198.8 88.5 198.8 197.7z" fill="#000"/>
          <path d="M1591.8 127c-18.3 0-34.1 14.8-41.4 30.3-7.3-15.5-23.1-30.3-41.4-30.3a45.7 45.7 0 0 0-45.7 45.5c0 51.1 51.8 64.5 87.1 115.1 33.4-50.2 87.1-65.6 87.1-115.1a45.7 45.7 0 0 0-45.7-45.5z" fill="#b29968"/>
          <rect x="68.2" y="140.8" width={this.props.score} height="101.55" fill="#9391aa"/>
        </svg>
      </div>
    )
  }
});

Request Animation Frame

(function getCoords() {    
  let tCoords = tC1.getBoundingClientRect(),
      txCoords = txC1.getBoundingClientRect(),
      mCoords = mC1.getBoundingClientRect(),
      elCoords = ele1.getBoundingClientRect();

  function intersectRect(a, b) {
    return Math.max(a.left, b.left + 40) < Math.min(a.right, b.right - 40) &&
           Math.max(a.top, b.top + 40) < Math.min(a.bottom, b.bottom - 40);
  }

  // can't do if/else because sometimes they both come out at once
  // and one of them will be ignored
  if (intersectRect(tCoords, elCoords)) {
    getHitTestIncrease();
  } 
  if (intersectRect(txCoords, elCoords)) {
    getHitTestDecrease();
  } 
  if (intersectRect(mCoords, elCoords)) {
    getHitTestMargarita();
  }

  requestAnimationFrame(getCoords);
}());

GSAP for Animation

  _flyBy: function(el, amt, name, delay) {
    if (this.props._isGameOver()) return;
    ...

    TweenMax.fromTo(el, amt, {
      rotation:0, 
      y:randY, 
      x:window.innerWidth + 200
    }, {
      x: -200,
      y:randY,
      rotation: 360,
      delay: delay, 
      onComplete:this._flyBy,
      onCompleteParams:[el, amt, name, delay],
      ease: Power1.easeInOut
    });
  },

History of Generative Art/Music

  • Mozart- Musical Dice Game
  • John Cage - Ambient Noises
  • Max Ernst - Automatism
  • Sol Lewitt- Wall Drawings
//balloon
function balloonGrow(){
  var balloon = $("#balloon")[0];
  var radius = balloon.getAttribute("r");
  var cySet = balloon.getAttribute("cy");
  balloon.setAttribute('r', parseInt(radius) + 10);
  balloon.setAttribute('cy', parseInt(cySet) - 10);
  if (parseInt(radius) > 125) {
    ion.sound.play("balloon-pop3");
    var balloonTl = new TimelineMax();
    balloonTl.add("pop");
    balloonTl.to("#balloon", 0.05, {
      scale: 5,
      opacity: 0,
      transformOrigin: "50% 50%",
      ease: Circ.easeOut
    }, "pop");
    ...
    setTimeout(function(){
      balloon.setAttribute("r", "45");
      balloon.setAttribute("cy", "233.5");
    }, 200);
  }
}

Touch on Mobile

Jake Albaugh

This demo.

This demo.

You already know this :)

Combining

4

Flow

Flow for our users too

Mapping- cognitive leaks

You're on a trip exploring a city

You want to build out the day of activities

Lonely Planet

but...

Google Maps

Let's empower the user

This demo.

Make use of open source for tools

5

Freedom

5

Aframe-React

This repo

This demo

Aframe

class App extends React.Component {
  render () {
    ...
    for (let i = 0; i < 30; i++) {
      ...
      items.push(<Entity geometry="primitive: box; depth: 1.5; height: 1.5; width: 6" 
                    material={{color: updateColor}}
                    position={randoPos}
                    pivot="0 0.5 0"
                    key={i}>
                    <Animation attribute="rotation" 
                               dur="12000" 
                               to={updateRot}/>
                    ...
                 </Entity>);
    }
    return (
      <Scene>
        ...

       {items}
      </Scene>
    );
  }
}

This demo.

function flame() {
  var tl = new TimelineMax();

  tl.add("begin");
  tl.fromTo(blurNode, 2.5, {
    attr: {
      stdDeviation: 9
    }
  }, {
    attr: {
      stdDeviation: 3
    }
  }, "begin");
  var num = 9;
  for (var i = 1; i <= num; i++) {
    tl.to(fStable, 1, {
      morphSVG: {
        shape: "#f" + i
      },
      opacity: ((Math.random() * 0.7) + 0.7),
      ease: Linear.easeNone
    }, "begin+=" + i);
  }
 

Social Coding Sites Help You Learn

Fun. Remember fun?

Codepen

JS Fiddle

Dabblet

  • Questioning the base premises

  • Impose artificial bounds

  • Repurposing

  • Combining

  • Use open source as a tool

Creativity!

🌋

🌋

Impact

with Val Head

🎉

O'Reilly Book

SVG Animation

Thank you!

These slides: 

@sarah_edo on twitter

@sdras on codepen

slides.com/sdrasner/creativity-programming

Creativity in Programming

By sdrasner

Creativity in Programming

  • 733
Loading comments...

More from sdrasner