Category: Project-03-Dynamic-Drawing

//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

}

//Jenny Wang
//Section B

function setup() {
    createCanvas(600,450);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    smooth();
    noStroke();
}

var s = 30 //space in between
var x = 0
var y = 0
var heart
var angle = 0
function draw() {
    background("lightblue");

    //set color variation
    var R = (dist(x,y,mouseX,mouseY)/100)*30;
    var G = (dist(x,y,mouseX,mouseY)/100)*20;
    var B = (dist(x,y,mouseX,mouseY)/100)*30;

    
     
    //draw hearts with for loops
    var maxD = 50;
    var maxS = 3;

    for (x = 0; x < width; x += s) {
      for (y = 0; y < height; y += s) {
      fill (R,G,B);
      var size = (dist(x,y,mouseX,mouseY)/maxD)*maxS;
      //set size variation
      heart(x+s/2, y+s/2, size);
      }
    }

    //draw heart
    var r = mouseX/2
    
    push()//square1
    fill("lightyellow");
    translate(width/2,height/2);
    rotate(radians(angle)+10);
    ellipse(mouseX/2,mouseY/2,r*2+mouseX/2);
    pop();
    angle += 2;

    push()//square2
    fill("lightgreen");
    translate(width/2,height/2);
    rotate(radians(angle)+20);
    ellipse(mouseX/2,mouseY/2,r*2+mouseX/2);
    pop();
    angle += 2;
    

    push();
    fill("pink");//circle 3
    translate(width/2,height/2);
    rotate(radians(angle)+30);
    ellipse(mouseX/2,mouseY/2,r*2+mouseX/2);
    pop()
    angle += 2;


function heart (x,y,size){
    // fill(R,G,B);
    beginShape();
    vertex(x, y);
    bezierVertex(x - size / 2, y - size / 2, x - size, y + size / 3, x, y + size);
    bezierVertex(x + size, y + size / 3, x + size / 2, y - size / 2, x, y);
    endShape(CLOSE);
}
//draw a heart


}

// Zoe Lin (ID: youlin)
// Section B

var x, y, r, g, b, rad;

function setup() {
  createCanvas(500, 500);
  noStroke();
  rectMode(CENTER);
}

function draw() {
  background(random(0, 15));
  
  //party lights!!!
  push();
  blendMode(SCREEN);
  r = random(255); //randomizes color
  g = random(50);
  b = random(255);
  x = random(width); //randomizes where lights spawn
  y = random(height);
  rad = random(2, 50); //randomizes size of circle
  noStroke();
  fill(r, g, b, random(75, 125)); //sets a random transparency
  circle(x, y, rad); //spawns a circle anywhere on canvas
  circle(mouseX, mouseY, rad*2); //spawns lights where the cursor is
  pop();
  
  let r1 = map(mouseX, 0, height/2, 0, width/2); //tracks horizontal location of mouse
  let r2 = width - r1;
  
  let up = map(mouseY, 0, height, 0, width); // tracks vertical location of mouse
  let down = height - up; //the other way

  //circle1
  let circle1X = width / 3 + r2 * 0.75 //x position of circle 1
  let circle1Y = height / 3 - r2 / 3.5 //y position of circle 1
  let circle1Mouth = up/4 //mouth location of circle 1
  
  //body
  noStroke();
  fill(up/3,r1/3,down/3,r2/3);
  ellipse(circle1X, circle1Y, down, r2); //fluid body
  
  //eye
  fill(0, r2);
  circle(circle1X - up/4, circle1Y - r2/10 , down/20);
  
  //eye
  fill(0, r2);
  circle(circle1X + up/4, circle1Y - r2/10 , up/12);
  
  //mouth
  noFill();
  stroke(0, r2);
  strokeWeight(4);
  arc(circle1X, circle1Y + r2/12, circle1Mouth, circle1Mouth, TWO_PI, PI);

  //circle2
  let circle2X = width / 2
  let circle2Y = height / 2 + down / 2
  let circle2Mouth = down/4
  
  noStroke();
  fill(r2/3,up/3,r1/3,down/3);
  ellipse(circle2X, circle2Y,  down*1.25, up*1.5);
  
  fill(0, r2)
  circle(circle2X - r2/4, circle2Y - down/10 , up/8);
  
  fill(0, r2)
  circle(circle2X + r2/4, circle2Y - down/10 , down/8);
  
  noFill();
  stroke(0, r2);
  strokeWeight(4);
  arc(circle2X, circle2Y + r2/20, circle2Mouth, circle2Mouth, TWO_PI, PI);
  
  //circle3
  let circle3X = width / 1.5 + r2 / 2
  let circle3Y = height / 2
  let circle3Mouth = down/10
  
  noStroke();
  fill(down/3,r2/3,up/3,r1/3);
  ellipse(circle3X, circle3Y, r2*1.5, r2*1.5);
  
  fill(0, r2)
  circle(circle3X - r2/4, circle3Y - r2/10 , r2/8);
  
  fill(0, r2)
  circle(circle3X + r2/4, circle3Y - up/10 , r2/8);
  
  noFill();
  stroke(0,r2 );
  strokeWeight(4);
  arc(circle3X, circle3Y + r2/12, circle3Mouth, circle3Mouth, TWO_PI, PI);
  
  //circle4
  let circle4X = width / 1.5 - r1/1.7
  let circle4Y = height / 4 + r2/4
  let circle4Mouth = down/10
  
  noStroke();
  fill(r1/3,down/3,r2/3,up/2.5);
  ellipse(circle4X, circle4Y, r1*1.25, down);
  
  fill(0, r2)
  circle(circle4X - r1/4, circle4Y - r2/15 , r1/8);
  
  fill(0, r2)
  circle(circle4X + r1/4, circle4Y - r1/10 , r1/8);
  
  noFill();
  stroke(0,r2);
  strokeWeight(4);
  arc(circle4X, circle4Y + r1/10, circle4Mouth, circle4Mouth, TWO_PI, PI);
  
  //circle5
  let circle5X = width / 3 - r2 / 1.5
  let circle5Y = height / 2.5
  let circle5Mouth = r2/4
  
  noStroke();
  fill(down/3,r2/2,r1/2,r2/3);
  ellipse(circle5X/1.5, circle5Y/2, up, up*1.25);
  
  fill(0, r2)
  circle(circle5X - up/4, circle5Y - up/3 , r1/8);
  
  fill(0, r2)
  circle(circle5X + r1/4, circle5Y - r1/3 , r1/8);
  
  noFill();
  stroke(0,r2);
  strokeWeight(4);
  arc(circle5X, circle5Y + r1/20, circle5Mouth, circle5Mouth, TWO_PI, PI);
  
  //circle6
  let circle6X = width / 5 + r1 / 2.5
  let circle6Y = height - 10
  let circle6Mouth = r1/5
  
  noStroke();
  fill(r2/3,up/4,r2/2,up/3);
  ellipse(circle6X, circle6Y, up*0.6, down*1.2);  
  
  fill(0, r2)
  circle(circle6X - up/5, circle6Y - up/10 , r1/10);
  
  fill(0, r2)
  circle(circle6X + r1/7, circle6Y - r1/10 , r1/10);
  
  noFill();
  stroke(0,r2);
  strokeWeight(4);
  arc(circle6X, circle6Y + r1/10, circle6Mouth, circle6Mouth, TWO_PI, PI);
 
  //circ7
  let circle7X = width - 10
  let circle7Y = height / 2 - up
  let circle7Mouth = up/4
  
  noStroke();
  fill(up/3,r1/4,down/2,r2/3);
  ellipse(circle7X, circle7Y, down*0.5, up);
  
  fill(0, r2)
  circle(circle7X - up/4, circle7Y - up/10, r1/8);
  
  fill(0, r2)
  circle(circle7X + r1/4, circle7Y - r1/10 , r1/8);
  
  noFill();
  stroke(0,r2);
  strokeWeight(4);
  arc(circle7X, circle7Y+r1/20, circle7Mouth, circle7Mouth, TWO_PI, PI);
}