p5.js class in depth

Set expectations - This workshop is going to teach you the basics of JavaScript though creative coding.

What is p5.js? It is a library of JavaScript to draw, making static, animated, interactive or generative visuals. You can include sounds, images, text, you can interact with HTML, you can make graphs, you can interact with sensors, you can use physics. You can do lots and lots of things. You can use other libraries. It is awesome. 
It is an open source library, which means that all of its code is free and available to anyone. It was created by Lauren McCarthy and is supported by the Processing Foundation.

http://www.leslieruckman.com/ITP2016/100DaysOfMaking/Day47/
http://www.leslieruckman.com/ITP2016/100DaysOfMaking/Day72/
http://www.leslieruckman.com/ITP2016/100DaysOfMaking/Day32/
http://www.leslieruckman.com/ITP2016/100DaysOfMaking/Day9/
http://xie-emily.com/generative_art/noise_art.html
https://emojibooth.biz/
http://fun.the816.com/neobrush/
https://ericrosenbaum.github.io/MK-1/
http://samt.xyz/images/scroll/one.html
http://www.michellechandra.com/portfolio/star-trails/

Maybe this is the obvious question on everyone's mind: what is code? It is instructions to a computer. Through a series of steps the instructions are translated to millions and millions of 0's and 1's on silicon transistors which the computer understands and can then do what you want it to. In code, instruction are read sequentially, like lines in a book. 

JavaScript is code that runs in the browser, along with HTML and CSS. The first version was created in a week, but since then, it has gotten a lot of TLC. It has nothing to do with the programming language Java.

Open p5.js web editor and make an account. 

First, delete all of the code except for setup(){}. Don't worry about the parenthesis and the curly braces, this syntax means "the definition of the function called setup". Don't worry about what that means. Everything inside the curly braces will get executed when you hit play. Talk about how to draw simple shapes, coordinate system, stroke, fill, background
    whiteboard function definitions
    ellipse -> parenthesis means calling a function called ellipse, inputs are called parameters
        you'll notice that I put a semicolon at the end of the line. this denotes to javascript that this is the end of an instruction. 
        sometimes it's hard to know when you need a semicolon or don't--you will memorize it and not even think about it
    width and height -> coordinate
    comment
    rect
    triangle
    background
    stroke, noStroke, strokWeight
    layering shapes
    
    exercise - draw three shapes, snowman, or a robot
    
    setup is a special function to p5.js, which when the web page loads, gets called once.
    Now, let's put back in that draw() function. draw is also a special function to p5.js, but it's different from setup(). The contents of draw is actually executed every frame. Are you all familiar with the concept on a frame? Think about how a film works--it a series of images that switched between so quickly that it appears to be continuous. The exact same thing is happening with draw(), the code is getting executed 60 times a second. You can change the frame rate if you want. This is how to make animations. Let's animate a shape based on a the position of the mouse.
    
    Introduce mouseX, mouseY, print. The cool thing about frames is that we can get constantly updating user input at every frame, and update the visual based on that input. 
    So now, how would we draw an ellipse at the mouse position every frame?
    how would you clear the ellipse at every frame?
    random() draw ellipse every frame
        -> frameRate();
    
    You can also change the visuals not every frame, but with events -> mousePressed