P5.js – Changes Over Time (Sketch #2)

Screen Shot 2018-09-20 at 4.38.39 AM.png

Screen Shot 2018-09-20 at 4.42.05 AM.png

Last week in ICM we went over variables and mouse inputs and outputs For our sketch this week we were to include:

One element controlled by the mouse.
One element that changes over time, independently of the mouse.
One element that is different every time you run the sketch.

I was thinking about summer showers back in Tennessee the other day + the animation movements we looked at last class reminded me of a flashlight : ) So I thought it would be fun to create a sketch that would tie the two together, as well as a sort of painting program too. I really love the idea of using randomness in programming, and thought it would be fun to try and include it.

Things to think on:

The flashlight beam is having an opposite gradient – would be nice for the strong white to be coming from the light source, and then diffusing / becoming transparent.
Incorporating mouse pressed / events
how to distill code into more variables / less hard numbers
how to control the speed of different animated actions
- ex: how to isolate and individually control the speed of multiple randomness functions happening simultaneously

//Becca Moore
// ICM – HW
// Title: Yellow Flashlight
// Prompt:Create a sketch that includes –
// One element that is different every time you run the sketch = Rain Shower’s random function
// One element that changes over time, independently of the mouse = Rain Shower’s random function and the flashlightBeam
// One element controlled by the mouse = Create’s denser rain patches when cursor is moved
// variables ‘spot’ & ‘col’ directly affect the random function of ‘RainShower’
// Inspired by Daniel Shiffman’s Coding Train!
// Episode 2.5: The random() Function – p5.js Tutorial
let spot = {
x: 100,
y: 50
}

let col = {
r: 0,
g: 100,
b: 220
}

function setup() {
createCanvas(600, 400);
// black for a night sky
background(0);

}
function draw() {

// Rainshower
col.r = random(100, 20);
col.g = random(0, 255);
col.b = random(10, 255);
spot.x = random(0, width);
spot.y = random(0, height);
noStroke();
fill(col.r, col.g, col.b, 40);
rect(spot.x, spot.y, 2, 20);

// Increased Rain Patches
col.r = random(10, 20);
col.g = random(0, 255);
col.b = random(10, 255);
spot.x = mouseX;
spot.y = mouseY;
noStroke();
fill(col.r, col.g, col.b, 20);
rect(spot.x, spot.y, 4, 50);

//Flashlight beam
fill(255, 255, 255, 40);
stroke(frameCount, frameCount + 1, frameCount + 25);
strokeWeight(20);
ellipse(150 + frameCount, 190, 20, 50 + (frameCount / 2));

//Flashlight
strokeWeight(4);
stroke(255,220,0);
fill(255, 255, 0);
rect(20, 170, 150, 55);
rect(120, 140, 70, 100);
console.log(mouseX, mouseY);

//Flashlight button
strokeWeight(1);
stroke(255,220,0);
fill(255, 255, 0);
rect(50, 185, 30, 10);

}

Screen Shot 2018-09-20 at 4.14.24 AM (Before adding rect for button )