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

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

Yellow Flashlight Code – Editor View

Yellow Flashlight Code – In Browser 

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 )

 

 

71OmBWr2ijL.jpgScreen Shot 2018-09-20 at 12.42.55 AM.png

Have also been thinking about P5js Color Study Sketches Inspired by Josef Albers ❤ ❤

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s