Here is my interactive picture! As you move your mouse left to right, it gets dark outside and the moon comes up, and as you move your mouse up and down, the plant grows and its leaves open up.
sketch
//Sam Rauch / srauch / section B
//This code creates an interactive picture of a plant with a window behind it. As you move
//the mouse up and down, it gets darker and lighter outside. As you move the mouse side to
//side, the plant grows bigger and smaller.
var windowTransparent //alpha for transparency of blue window, ie how light outside
var moonY = 300; //y position of moon
var moonview = 0; //alpha for transparency of moon
var potCenterX; //x center of pot
var potCenterY; //y center of pot
var bluefade = 0; //amount of blue added to colors as it gets darker outside
var colorfade = 0; //amount of color subtracted to colors as it gets darker outside
var plantTipY; //y tip of plant
var stemweight = 10;
var leafSizeX = 50; //width of leaf
var leafSizeY = 25; //height of leaf
var leftRotate; //rotates left-side leaves
var rightRotate; //rotates right-side leaves
var width;
var height;
function setup() {
createCanvas(450, 600);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
width = 450;
height = 600;
windowTransparent = 255;
potCenterX = 200;
potCenterY = 500;
plantTipY = potCenterY; //start the tip of the plant in the center of the pot
leftRotate = 270;
rightRotate = 90;
}
//draws an ellipse where the first two parameters are the ellipse's left tip
function lefttipellipse(tipX, tipY, wide, tall) {
ellipseMode(CORNER);
ellipse(tipX, tipY-tall/2, wide, tall);
ellipseMode(CENTER);
}
//draws an ellipse where the first two parameters are the ellipse's right tip
function righttipellipse(tipX, tipY, wide, tall) {
ellipseMode(CORNER);
ellipse(tipX-wide, tipY-tall/2, wide, tall);
ellipseMode(CENTER);
}
function draw() {
background(230-colorfade*1.5, 230-colorfade*1.5, 120+bluefade);
//window
fill(240-colorfade, 240-colorfade, 230+bluefade);
noStroke();
rect(100, 0, 350, 450);
//dark blue rect
fill(26, 32, 128);
rect(125, 0, 325, 425);
//moon
noStroke();
fill(250, 250, 240, moonview); //moon white
ellipse(300, moonY, 80);
fill(26, 32, 128); //dark blue circle to make it a crescent
ellipse(290, moonY-10, 70);
//light blue sky color
fill(185, 240, 250, windowTransparent);
rect(125, 0, 325, 425);
//table
fill(110-colorfade, 60-colorfade, 37+bluefade); //brown
rect(0, height-50, width, 50);
//fill(100, 50, 27); //darker brown
//plant stem
stroke(74-colorfade, 150-colorfade, 74+bluefade); //green
strokeWeight(stemweight);
strokeCap(ROUND);
line(potCenterX, potCenterY, potCenterX, plantTipY);
noStroke();
// the y coordinate of a point half the distance up the stem
var yspot1 = potCenterY-(dist(potCenterX, potCenterY, potCenterX, plantTipY)/2);
// y coordinate of a point 3/4 the distance up the stem
var yspot2 = potCenterY-(dist(potCenterX, potCenterY, potCenterX, plantTipY)*(3/4));
// y coordinate of a point at the top of the stem
var yspot3 = potCenterY-(dist(potCenterX, potCenterY, potCenterX, plantTipY));
//drawing them leaves at set points up the stem
fill(90-colorfade*2, 180-colorfade*2, 90+bluefade); //leaf green
//bottom right
push();
translate(potCenterX, yspot1);
rotate(leftRotate);
lefttipellipse(0, 0, leafSizeX, leafSizeY);
pop();
//bottom left
push();
translate(potCenterX, yspot1);
rotate(rightRotate);
righttipellipse(0, 0, leafSizeX, leafSizeY);
pop();
//middle right
push();
translate(potCenterX, yspot2);
rotate(leftRotate);
lefttipellipse(0, 0, leafSizeX*(7/8), leafSizeY*(7/8));
pop();
//middle left
push();
translate(potCenterX, yspot2);
rotate(rightRotate);
righttipellipse(0, 0, leafSizeX*(7/8), leafSizeY*(7/8));
pop();
//top right
push();
translate(potCenterX, yspot3);
rotate(leftRotate);
lefttipellipse(0, 0, leafSizeX*(2/3), leafSizeY*(2/3));
pop();
//top left
push();
translate(potCenterX, yspot3);
rotate(rightRotate);
righttipellipse(0, 0, leafSizeX*(2/3), leafSizeY*(2/3));
pop();
//pot
fill(230-colorfade, 140-colorfade, 83+bluefade); //salmon
rectMode(CENTER);
rect(potCenterX, potCenterY, 120, 150);
triangle(potCenterX-60, potCenterY-75, potCenterX-60,
potCenterY+75, potCenterX-80, potCenterY-75);
triangle(potCenterX+60, potCenterY-75, potCenterX+60,
potCenterY+75, potCenterX+80, potCenterY-75);
fill(240-colorfade, 150-colorfade, 93+bluefade);
rect(potCenterX, potCenterY-90, 170, 60);
rectMode(CORNER);
//as move mouse left to right, the sky gets darker and colors fade to bluer shade
windowTransparent = map(mouseX, width, 0, 0, 255);
bluefade = map(mouseX, width, 0, 0, 40, true);
colorfade = map(mouseX, 0, width, 0, 40, true);
//as move mouse left to right, moon comes up
moonY = map(mouseX, 0, width, 375, 100, true);
moonview = map(mouseX, 0, 450, 0, 255);
//as move mouse up and down, plant grows
plantTipY = map (mouseY, height, 0, potCenterY, 230); //gets taller
stemweight = map (mouseY, height, 0, 5, 25); //stem gets thicker
leafSizeX = map (mouseY, height, 0, 50, 150); //leaves get longer
leafSizeY = map (mouseY, height, 0, 30, leafSizeX/3); //leaves get taller
leftRotate = radians(map(mouseY, height, 0, 270, 340)); //right leaves open up
rightRotate = radians(map(mouseY, height, 0, 90, 20)); //left leaves open up
//plant pot
}