Category: Project-03-Dynamic-Drawing

Project 03 – Dynamic Drawing

sketch
/* eliana fleischer
    efleisch
    section e */ 

var d = 10
var x = 20
var y = 20 // sets up variables for x, y and the size of the heart
    
function setup() {
    createCanvas(600, 450);
    background(220);
}

function draw() {

    background(255 - mouseX); //makes background go from lighter to darker as the mouse moves in the positive x direction

    x = mouseX; // makes x mouse x and y mouse y + 10 
    y = mouseY + 10;
    noStroke();
    push(); // push so only small heart is filled blues
    fill(0,0,mouseX); // fills in shades of blue relativeto the x position of the mouse
    beginShape();
    vertex(30, 40); // starting point for the small heart right side
    bezierVertex(40, 10 , 55 , 50, 30 , 70); // anchor points for the small heart right side
    vertex(30,40); // starting point for the small heart left side
    bezierVertex(20, 10 , 5, 50, 30, 70); // anchor points for the small heart left side 
    endShape();
    pop();

    d = mouseX; // makes the size of the heart relative to the mouse position
    d = constrain(d, 0, 300); // keeps the size fo the big heart from getting bigger than the canvas

    if (mouseX >= mouseY){ // filling the heart in a gradient relative to x and y
        fill(mouseX,0,0);

    } else {
        fill(mouseY, 0, 0);
    }

    beginShape(); 
    vertex(x, y); // makes starting coordinates for the big heart x and y 
    bezierVertex(x + d, y - (d) , x + (d) , y , x , y + (d)); // anchor points scaled by d 
    vertex(x, y);
    bezierVertex(x - d, y - (d) , x - (d), y, x, y + (d));
    endShape();

}

I think the hardest part of this project for me was figuring out different ways to create the dynamic aspect of this project.

Project 03 dynamic drawing

I wanted to play with the translate and rotation tools so I made this fun little spinning ellipse.

sketchDownload
//felix cooper fcooper d

var r=constrain(mouseX,-180,180);
var height=constrain(50,-255,255);

function setup() {
    createCanvas(600, 450);
}

function draw() {
    background(0);
    noStroke();
    translate(300,225);
    rotate(radians(r)); //spins circle according to mousex
    ellipse(80,0,50, height);
    r=mouseX;

    if(mouseY<225){ //changes ellipse length based on mousey
        height=height+5;
    }
    else{
        height=height-5;
    }
    fill(height); //changes gradient based on how small it is - will dissapear
}

Project 3: Dynamic Drawing

sketch
//Ilyas Khan
//Section D
//this program focuses on the y axis with minimal to no change in the x

let yChange = 0; //the rate of change for most of the shape dimensions in this program.
function setup() {
    createCanvas(600, 450);
    background(0);
}
function draw() {
    yChange = mouseY/50 //the rate of change for most of the shape dimensions in this program.
    background(0);

    fill(255, 231, 179);
    stroke(240, 203, 158);
    quad(300,175/yChange,220,150,300,130,380,150); //top
    //dome (made of ellipses to appear dome-like from a distance)
    fill(119, 199, 195); 
    stroke(240, 176, 0)
    strokeWeight(0.1);
    ellipse(300,150,100,25);
    ellipse(300,148,100,25);
    ellipse(300,146,100,25);
    ellipse(300,144,96,24);
    ellipse(300,142,96,24);
    ellipse(300,140,92,23);
    ellipse(300,138,92,23);
    ellipse(300,136,84,22);
    ellipse(300,134,84,22);
    ellipse(300,132,74,21);
    ellipse(300,130,74,21);
    ellipse(300,128,62,18);
    ellipse(300,126,62,16);
    ellipse(300,124,46,14);
    ellipse(300,122,36,12);
    ellipse(300,120,26,10);
    ellipse(300,118,16,8);
    fill(255, 231, 179);
    stroke(240, 203, 158);
    quad(220,150,300,175/yChange,300,300/yChange,220,275/yChange); //left side
    quad(300,300/yChange,300,175/yChange,380,150,380,275/yChange); //right side
    
    if (mouseY < 50) { //the top view of the cube
        scaleY = (20-mouseY)/5; //"zoom factor" for zooming in on the cube
        if (scaleY < 1) {
            scaleY = 1;
        }
        background(0);
        translate(300,175); //translation to the center of the cube for "zooming"
        newY = 175;
        scale(scaleY);
        quad(0,0,-80,-25,0,-45,80,-25); //top
        quad(-80,-25,0,0,0,125,-80,100); //left side 
        quad(0,125,0,0,80,-25,80,100); //right side
        //dome (composed of ellipses to appear dome-like from a distance)
        fill(119+(mouseY),199+(mouseY),195+(mouseY)); 
        stroke(240, 176, 0)
        strokeWeight(0.1);
        ellipse(0,150-newY,100,25);
        ellipse(0,148-newY,100,25);
        ellipse(0,146-newY,100,25);
        ellipse(0,144-newY,96,24);
        ellipse(0,142-newY,96,24);
        ellipse(0,140-newY,92,23);
        ellipse(0,138-newY,92,23);
        ellipse(0,136-newY,84,22);
        ellipse(0,134-newY,84,22);
        ellipse(0,132-newY,74,21);
        ellipse(0,130-newY,74,21);
        ellipse(0,128-newY,62,18);
        ellipse(0,126-newY,62,16);
        ellipse(0,124-newY,46,14);
        ellipse(0,122-newY,36,12);
        ellipse(0,120-newY,26,10);
        ellipse(0,118-newY,16,8);
    }
    if(mouseY >= 91){  //the beginning of the interior cube view
        background(mouseY-91*(mouseY/91)+(mouseX/10),mouseY-27*(mouseY/91)+(mouseX/10),mouseY-38*(mouseY/91)+(mouseX/10)); //a background that changes color
        quad(300,175/(91/50),220,150,300,300/(91/50)+(mouseY-91),380,150); //bottom
        quad(220,150-(mouseY-91),300,175/(91/50)-(mouseY-91),300,300/yChange-(yChange*10),220,275/(91/50)); //left side
        quad(300,300/yChange-(yChange*10),300,175/(91/50)-(mouseY-91),380,150-(mouseY-91),380,275/(91/50)); //right side
        //pillar
        fill(mouseY-100);
        stroke(240, 176, 0)
        beginShape();
        vertex(270,140-(yChange*10));
        vertex(285,150-(yChange*10));
        vertex(315,150-(yChange*10));
        vertex(330,140-(yChange*10));
        vertex(315,130-(yChange*10));
        vertex(285,130-(yChange*10));
        endShape(CLOSE);
        quad(270,140,285,150,285,150-(yChange*10),270,140-(yChange*10));
        quad(315,150,330,140,330,140-(yChange*10),315,150-(yChange*10));
        noStroke();
        quad(285,150-(yChange*10),315,150-(yChange*10),315,150,285,150);
        if(mouseY >= 124){ //the filling out of the interior cube view
            background(mouseY-91*(mouseY/91)+(mouseX/10),mouseY-27*(mouseY/91)+(mouseX/10),mouseY-38*(mouseY/91)+(mouseX/10));
            fill(255, 231, 179);
            stroke(240, 203, 158);
            quad(220,150-(mouseY-91),300,175/(91/50)-(mouseY-91),300,300/(91/50),220,275/(91/50)); //left side
            quad(300,300/(91/50),300,175/(91/50)-(mouseY-91),380,150-(mouseY-91),380,275/(91/50)); //right side
            quad(300,175/(91/50),220,150,300,300/(91/50)+(mouseY-91),380,150); //bottom
            //pillar
            fill(mouseY-100);
            stroke(240, 176, 0)
            beginShape();
            vertex(270,140-(mouseY-91));
            vertex(285,150-(mouseY-91));
            vertex(315,150-(mouseY-91));
            vertex(330,140-(mouseY-91));
            vertex(315,130-(mouseY-91));
            vertex(285,130-(mouseY-91));
            endShape(CLOSE);
            quad(270,140,285,150,285,150-(mouseY-91),270,140-(mouseY-91));
            quad(315,150,330,140,330,140-(mouseY-91),315,150-(mouseY-91));
            noStroke();
            quad(285,150-(mouseY-91),315,150-(mouseY-91),315,150,285,150);
            if (mouseY >= 185){ //the zooming part of the inner cube view
                background(mouseY-91*(mouseY/91)+(mouseX/10),mouseY-27*(mouseY/91)+(mouseX/10),mouseY-38*(mouseY/91)+(mouseX/10));
                scaleY = -1*(185-mouseY)/8; //the "zoom" factor for the zoom in on the cube
                if (scaleY < 1) {
                    scaleY = 1;
                }
                fill(255, 231, 179);
                stroke(240, 203, 158);
                translate(300,175/(91/50)); //translates to the center of the cube for "zooming"
                scale(scaleY); 
                quad(-80,150-(185-91)-175/(91/50),0,175/(91/50)-(185-91)-175/(91/50),0,300/(91/50)-175/(91/50),-80,275/(91/50)-175/(91/50)); //left side
                quad(0,300/(91/50)-175/(91/50),0,175/(91/50)-(185-91)-175/(91/50),80,150-(185-91)-175/(91/50),80,275/(91/50)-175/(91/50)); //right side
                quad(0,175/(91/50)-175/(91/50),-80,150-175/(91/50),0,300/(91/50)+(185-91)-175/(91/50),80,150-175/(91/50)); //bottom
                //pillar
                fill(mouseY-100);
                stroke(240, 176, 0)
                beginShape();
                vertex(-30,140-(mouseY-91)-175/(91/50));
                vertex(-15,150-(mouseY-91)-175/(91/50));
                vertex(15,150-(mouseY-91)-175/(91/50));
                vertex(30,140-(mouseY-91)-175/(91/50));
                vertex(15,130-(mouseY-91)-175/(91/50));
                vertex(-15,130-(mouseY-91)-175/(91/50));
                endShape(CLOSE);
                quad(-30,140-175/(91/50),-15,150-175/(91/50),-15,150-(mouseY-91)-175/(91/50),-30,140-(mouseY-91)-175/(91/50));
                quad(15,150-175/(91/50),30,140-175/(91/50),30,140-(mouseY-91)-175/(91/50),15,150-(mouseY-91)-175/(91/50));
                noStroke();
                quad(-15,150-(mouseY-91)-175/(91/50),15,150-(mouseY-91)-175/(91/50),15,150-175/(91/50),-15,150-175/(91/50));
            }
            
        }
    }
    print(mouseY);

}

Project 3

this is my project:

sketch
var d = 40;
var d2 = 30;
var rotateV = 1;
var rotateR = 2;
var rotateR2 = -1;
var rotateB = 0;
var rotateL = 1; 
var r = 100;
var g = 100;
var b = 100;
 
 
function setup() {
    createCanvas(600, 450);
    text("Xinran Yu, Seciton A");
}
 
function draw() {
    background(0);
    fill(255, 255, 0)

    //background rotating green circles 
    fill(188, 225, 40, 220);
    push();
    translate(500, 350);
    rotate(radians(rotateB));     //1
    ellipse(60, 60, d2+20, d2+20);
    rotateB += 0.6;
    rotate(radians(rotateB));     //2
    ellipse(60, 60, d2+15, d2+15);
    rotateB += 0.5;
    rotate(radians(rotateB));      //3
    ellipse(60, 60, d2+10, d2+10);
    rotateB += 0.3;
    rotate(radians(rotateB));      //4
    ellipse(60, 60, d2+5, d2+5);
    rotateB += 0.2;
    rotate(radians(rotateB));      //5
    ellipse(60, 60, d2, d2);
    rotateB += 0.1; 
    pop()

    //background lines
    push();
    translate(100, 100);
    stroke(43, 255, 248, 50);
    strokeWeight(1);
    for (var rotateL = 30; rotateL<360; rotateL++) {
        rotate(radians(rotateL));
        line(0, 0, 90, 90); 
    }
    pop();


    //rotating squares
    fill(221, 4, 137, 200);
    noStroke();
    push();
    translate(mouseX, mouseY);
    rotate(radians(rotateR));
    rotateR = rotateR - 3;
    rect(-10, 0, 100, 100);

    rotate(radians(rotateR2));
    rotateR2 = rotateR2 + 2;
    rect(0, 10, 60, 60);
    pop();

    // rotating circles,changing color due to mouseX & mouseY
    fill(126, 198, 231);
    ellipse(mouseX, mouseY, 50, 50);  // center circle
    push();
    translate(mouseX, mouseY);

    if (mouseX <= width/2 & mouseY <= height/2) {
        r = 218; //yellow
        g = 177;
        b = 79;
    } else if (mouseX < width/2 & mouseY > height/2) {
        r = 205; //orange
        g = 110;
        b = 74;
    } else if (mouseX > width/2 & mouseY < height/2) {
        r = 224; //pink
        g = 128;
        b = 231;
    } else if (mouseX > width/2 & mouseY > height/2) {
        r = 135; //red
        g = 30;
        b = 12;
    }
    fill(r, g, b);
    rotate(radians(rotateV));
    rotateV = rotateV + 2;

    //change circle's raduis
    //distance to canvas center increases, rotating radius & d increases
    var x1 = dist(mouseX, mouseY, width/2, height/2);
    d = dist(mouseX, mouseY, width/2, height/2)/3;
    d = constrain(d, 10, 100);
    ellipse(x1, x1, d, d);
    ellipse(-x1, -x1, d, d);
    ellipse(-x1, x1, d, d);
    ellipse(x1, -x1, d, d);
    ellipse(0, x1*1.5, d, d);
    ellipse(0, -x1*1.5, d, d); 
    ellipse(x1*1.5, 0, d, d);
    ellipse(-x1*1.5, 0, d, d);
    pop();   

}

Dynamic Drawing – Meditating Stick Figure

For my project I drew a stick figure that is mediating. There are shapes that come off from the hand. The color, opacity, number of sides, and size of the shape are all dependent on the position of the mouse. The face of the stick figure is also dependent on the mouse.

sketch
//Nakshatra Menon
//Section C 


function setup() {
    createCanvas(450, 600);
    background("white");

}

var size = 30;
var sides1 = 3;
var leftHandX = 84
var leftHandY = 300 
var rightHandX = 401
var rightHandY = 320
var color1 = 255
var color2 = 255
var color3 = 255
var color4 = 255 
var face = 1



function draw() {
    background("black");
    stroke("white");
    strokeWeight(1);
    // carpet 
    color4 = (mouseX)/4
    fill(color4);
    ellipse(232, 430, 438, 176); 

    // stick figure drawings
    noFill(); 
    beginShape();       // left arm
        vertex(233, 244);
        vertex(157, 317);
        vertex(105, 303);
    endShape();
    beginShape();      // right arm 
        vertex(233, 244);
        vertex(315, 324);
        vertex(380, 321);
    endShape(); 
    beginShape();     // body and left leg 
        vertex(235, 214);
        vertex(237, 395);
        vertex(130, 315);
        vertex(194, 374);
        vertex(254, 417);
    endShape(); 
    beginShape();      // right leg 
        vertex(237, 395);
        vertex(354, 326);
        vertex(291, 370);
        vertex(240, 402);
    endShape();     
    beginShape();       
        vertex(232, 408);
        vertex(216, 415);
    endShape();
    ellipse(232, 152, 122, 116); // head
    ellipse(leftHandX, leftHandY, 39, 6) // left hand
    ellipse(rightHandX, rightHandY, 39, 6); //right hand 
    ellipse(201, 415, 24, 6) // left foot
    ellipse(269, 417, 24, 6); //right foot 

    // face if mouse is on left 
    if(face == 1){    
        beginShape();      // right eye 
        curveVertex(177, 140);
        curveVertex(177, 140);
        curveVertex(195, 152);
        curveVertex(214, 145);
        curveVertex(214, 145);
    endShape();
    beginShape();      // right eye 
        curveVertex(243, 147);
        curveVertex(243, 147);
        curveVertex(260, 158);
        curveVertex(279, 152);
        curveVertex(279, 152);
    endShape();
    beginShape();      // smile
        curveVertex(226, 185);
        curveVertex(226, 185);
        curveVertex(246, 188);
        curveVertex(255, 180);
        curveVertex(255, 180);
    endShape();} 

    // face if mouse is on right 
    if(face == 2){   
    fill("white");
    stroke("grey");
    strokeWeight(7);
    ellipse(195, 152, 25, 50);
    ellipse(260, 158, 25, 50);
    strokeWeight(1);
    line(216, 200, 243, 200);
    }

    // face changes w/ mouse 
    if(mouseX <= 240){
        face = 1
    }

    if(mouseX >= 240){
        face = 2
    }


    // sides increase as mouse goes right, size 15-25
    if(mouseX >= 120) {
        sides1 = (mouseX/30)/2
        size = constrain((2*(mouseY/mouseX)*30), 5, 25)
    }

    // if the mouseX is on the left then the shapes are a tri
    if(mouseX < 120) {
        sides1 = 3
        size = 5
    }

    // the color changes based on the position of the mouse 
    color1 = mouseX
    color2=  mouseY
    color3 = (mouseX/mouseY)*2


    //draw shape right   
    fill(color1, color2, color3, mouseY-76);
    polygon(rightHandX-29, rightHandY-71, size , sides1);
    fill(color2, color3, color1, mouseY-113);
    polygon(rightHandX+30, rightHandY-67, size, sides1);
    fill(color3, color1, color2, mouseX-126);
    polygon(rightHandX-51, rightHandY-160, size, sides1);
    fill(color1/2, color2/2, color3/2, mouseY-145);
    polygon(rightHandX+20, rightHandY-201, size, sides1);
    fill(color2/2, color3/2, color1/2, mouseY-187);
    polygon(rightHandX-69, rightHandY-243, size, sides1);
    fill(color3/2, color1/2, color2/2, mouseX-126);
    polygon(leftHandX+54, rightHandY-266, size, sides1);
    line(rightHandX, rightHandY, 320, 214 - (mouseY/3))
    line(rightHandX, rightHandY, 354, 99-(mouseY/3))
    line(rightHandX, rightHandY, 396, 28 -(mouseY/3))
    line(rightHandX, rightHandY, 430, 54-(mouseY-3))
    line(rightHandX, rightHandY, 430, 200-(mouseY-3))

    // draw shape left 
    fill(color1/3, color2/3, color3/3, mouseY-166);
    polygon(leftHandX-3, leftHandY-28, size, sides1);
    fill(color1/3, color2/3, color2/3,mouseY-183);
    polygon(leftHandX-89, leftHandY-97, size, sides1);
    fill(color3/3, color2/2, color1/4, mouseY-114);
    polygon(leftHandX-11, leftHandY-108, size, sides1);
    fill(color3, color1, color2, mouseY-123);
    polygon(leftHandX-63, leftHandY-140, size, sides1);
    fill(color3, color2, color1, mouseX-153);
    polygon(leftHandX-71, leftHandY-223, size, sides1);
    fill(color2, color1, color2, mouseY-123);
    polygon(leftHandX-1, leftHandY-254, size, sides1);
    line(leftHandX, leftHandY, 8, 214 - (mouseY/3))
    line(leftHandX, leftHandY, 8, 99-(mouseY/3))
    line(leftHandX, leftHandY, 68, 28 -(mouseY/3))
    line(leftHandX, leftHandY, 177, 54-(mouseY-3))
    line(leftHandX, leftHandY, 169, 200-(mouseY-3))

// opposite direction  
    // sides increase as mouse goes right 
    if(mouseX <= 400) {
        sides1 = ((width-mouseX)/30)/2
        size = constrain((3*(mouseY)/mouseX), 5, 25)
    }

    // if the mouseX is on the left then the shapes are a tri
    if(mouseX > 400) {
        sides1 = 3
        size = 5
    }
    // draw shape right 
    fill(color3, color3, color1, mouseX-50);
    polygon(rightHandX+3, rightHandY-30, size, sides1);
    fill(color3, color2, color2, mouseY-25);
    polygon(rightHandX+8, rightHandY-79, size, sides1);
    fill(color3, color2, color2, mouseY-46);
    polygon(rightHandX+3, rightHandY-128, size, sides1);
    fill(color1, color1, color2, mouseX-16);
    polygon(rightHandX+12, rightHandY-136, size, sides1);
    fill(color2, color3, color2, mouseY-19);
    polygon(rightHandX-21, rightHandY-201, size, sides1);
    fill(color1, color1, color2, mouseY-32);
    polygon(rightHandX-21, rightHandY-274, size, sides1);

    // draw shape left  
    fill(color1, color2, color3/4, mouseX-240);
    polygon(leftHandX+46, leftHandY-56, size, sides1);
    fill(color3, color1/5, color2, mouseY-32);
    polygon(leftHandX+5, leftHandY-63, size, sides1);
    fill(color3, color2, color1, mouseY-45);
    polygon(leftHandX-40, leftHandY-59, size, sides1);
    fill(color3, color2/3, color2/2, mouseX-98);
    polygon(leftHandX+38, leftHandY-173, size, sides1);
    fill(color3/2, color1, color2/2, mouseY-134);
    polygon(leftHandX-8, leftHandY-170, size, sides1);
    fill(color3, color1/3, color1/2, mouseX-77);
    polygon(leftHandX-63, leftHandY-209, size, sides1);    
}


// needed to draw polygon, got code from https://p5js.org/examples/form-regular-polygon.html
function polygon(x, y, radius, npoints) {
    let angle = TWO_PI / npoints;
    beginShape();
    for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * radius;
    let sy = y + sin(a) * radius;
    vertex(sx, sy);
    }
    endShape(CLOSE);
}

project3

sketch
   //Qixin Zhang
   // section E

    var x = 1
    var y = 1
    var angle = 0

function setup() {
    createCanvas(600,600);
        background(0);
  

}


function draw() {
    blendMode(SCREEN);
    translate(width/2,height/2);
  rotate(radians(angle+1))
    //fill(254,32,32);
   // noStroke ();
     // circle (0,0,1);

  
  if (mouseX <width/2 )  {
    
     x = x+0.3;
    y = y+0.3;
    angle = angle +22;
    fill(255,0,0);
    noStroke();
    scale(x/50)
    rotate(radians(angle));
    translate(x,y);
    circle (0,0,20);
    
    
  } else if (mouseX >width/2 ) {
    x = x+0.3;
    y = y+0.3;
    angle = angle -21;
    fill(156,0,0);
    noStroke();
   
    rotate(radians(angle));
    translate(x,y);
    circle (0,0,20);
  }

  
   
  
}

I am fascinated by the spiral, so i used mouseX and mouseY to control the direction of spinning angle

Project 3- Dynamic Drawing

Graham Murtha, Section A

This is a dance routine of some complimentary color orbs.

sketch
// GRAHAM MURTHA
// Section A

let opacity = 100;

var dir = 1
var fill = 50
var angle = 0


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

}



function draw() {
let x = mouseX;
let y = mouseY;
let ix = width - mouseX;  // Inverted X
let iy = height - mouseY; // Inverted Y
background(0,0,50) // dark blue

//ellipse SET 1
    fill(255,0,255, opacity); //purple
    ellipse(x, height/2, y/2, y/2);

    fill(255,255,0, opacity); //yellow
    ellipse(ix, height/2, iy/2, iy/2);
    
    
    translate(width/2,height/2) //moving origin of rotating orbs to center
    push() ;


//ellipse SET 2
    rotate(radians(angle)+45)
    fill(255,0,255, opacity); //purple
    ellipse(x, height/2, y/2, y/2);
    fill(255,255,0, opacity); //yellow
    ellipse(ix, height/2, iy/2, iy/2);
    pop();
    angle -=.2
    

//ellipse SET 3
    rotate(radians(angle)+90)
    fill(255,0,255, -opacity); //purple
   ellipse(x/2, height/4, y/4, y/4);
    fill(255,255,0, opacity); //yellow
    ellipse(ix/2, height/4, iy/4, iy/4);
    pop();
    angle +=.2


//ellipse SET 4
    rotate(radians(angle)+135)
    fill(255,0,255, opacity); //purple
    ellipse(x/2, height/4, y/2, y/2);
    fill(255,255,0, opacity); //yellow
    ellipse(ix/2, height/4, iy/2, iy/2);
    pop();
    angle -=.2

    
//ellipse SET 5
    rotate(radians(angle)+180)
    fill(255,0,255, opacity); //purple
    ellipse(x/2, height/4, y/4, y/4);
    fill(255,255,0, opacity); //yellow
    ellipse(ix/2, height/4, iy/4, iy/4);
    pop();
    angle +=.2

//ellipse SET 6
    rotate(radians(angle)+225)

    fill(255,0,255, opacity); //purple
    ellipse(x/2, height/4, y/2, y/2);

    fill(255,255,0, opacity); //yellow
    ellipse(ix/2, height/4, iy/2, iy/2);

    pop();
    angle -=.2


//ellipse SET 6
    rotate(radians(angle)+225)
    fill(255,0,255, opacity); //purple
    ellipse(x/2, height/4, y/4, y/4);
    fill(255,255,0, opacity); //yellow
    ellipse(ix/2, height/4, iy/4, iy/4);
    pop();
    angle +=.2


    //ellipse SET 7
    rotate(radians(angle)+360)
    fill(255,0,255, opacity); //purple
    ellipse(x/2, height/4, y/2, y/2);
    fill(255,255,0, opacity); //yellow
    ellipse(ix/2, height/4, iy/2, iy/2);
    pop();
    angle -=.2
}



    
//change in the opacity of the circles
function mouseMoved() {
    opacity = map(mouseX, 0, 300, 600, 50, 255, 50) 
    opacity = map(mouseY, 0, 225, 450, 50, 255, 50) 
}

//As the mouse moves further right and further downwards, the opacity of ALL of the spheres will change

Project 3 – Dynamic Drawing

For this dynamic drawing, drag your mouse across the screen. The more left you drag the mouse, the color diagrams will expand inwards. Dragging your mouse downwards will expand the circles vertically, creating an overlap of both colors and alpha values. This will mean when you drag your mouse to the bottom right corner, there will be a large pink-white shape taking up most of the screen.

csavitzv_03
//Cole Savitz-Vogel
//csavitzv
//Section A


    function setup() {
     createCanvas(600, 600);
     pixelDensity(2);
     rectMode(RADIUS);
     var morph = (dist(mouseX, mouseX, width / 2, 0))
     var span = (dist(mouseY, mouseY, height / 2, 0))
}

    function draw() {
     background(0);
     strokeWeight(3);
     stroke(255, 255, 255, 25);
     strokeJoin(ROUND);
     noSmooth();
     if (mouseIsPressed){
     push();
     blendMode(ADD);
     fill(150, 20, 110, 50);
     ellipse(300 + (morph, span, 100, 300), 75, (5 * mouseX), mouseY);
     ellipse(300 - (morph, span, 100, 300), 100, (5 * mouseX), mouseY);
     fill(150, 20, 30, 50);
     ellipse(300 + (morph, span, 150, 300), 125, (5 * mouseX), mouseY);
     ellipse(300 - (morph, span, 150, 300), 150, (5 * mouseX), mouseY);
     fill(100, 50, 10, 50);
     ellipse(300 + (morph, span, 200, 300), 175, (5 * mouseX), mouseY);
     ellipse(300 - (morph, span, 200, 300), 200, (5 * mouseX), mouseY);
     fill(100, 100, 0, 50);
     ellipse(300 + (morph, span, 250, 300), 225, (5 * mouseX), mouseY);
     ellipse(300 - (morph, span, 250, 300), 250, (5 * mouseX), mouseY);
     fill(50, 150, 50, 50);
     ellipse(300 + (morph, span, 300, 300), 275, (5 * mouseX), mouseY);
     ellipse(300 - (morph, span, 300, 300), 300, (5 * mouseX), mouseY);
     fill(20, 100, 150, 50);
     ellipse(300 + (morph, span, 250, 300), 325, (5 * mouseX), mouseY);
     ellipse(300 - (morph, span, 250, 300), 350, (5 * mouseX), mouseY);
     fill(70, 50, 150, 50);
     ellipse(300 + (morph, span, 200, 300), 375, (5 * mouseX), mouseY);
     ellipse(300 - (morph, span, 200, 300), 400, (5 * mouseX), mouseY);
     fill(110, 20, 150, 50);
     ellipse(300 + (morph, span, 150, 300), 425, (5 * mouseX), mouseY);
     ellipse(300 - (morph, span, 150, 300), 450, (5 * mouseX), mouseY);
     fill(150, 20, 110, 50);
     ellipse(300 + (morph, span, 100, 300), 475, (5 * mouseX), mouseY);
     ellipse(300 - (morph, span, 100, 300), 500, (5 * mouseX), mouseY);
     pop();
  }
}

Project 03

This project shows somebody ducking their head instinctively upon hearing the firing of a spitball. As the mouse is moved from left to right, the spitball fires, and the head goes from facing the viewer to facing and shifting downward. The facial features also move with the mouse’s movement to achieve the illusion of perspective. The hair size increases and the eyes and mouth widen and disappear. The background changes color to provide a sense of impact and display a transition of the person’s emotion from unaware to alarmed, dark to bright.

sketch
// Jerry Xu (jwx)
// Section A
// Project 3: Spitball

let rSky = 153
let gSky = 153
let bSky = 0

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(rSky, gSky, bSky);
  fromSky = color(0, 0, 0);
  toSky = color(252, 242, 197);
  backgroundColor = lerpColor(fromSky, toSky, mouseX/width);
  background(backgroundColor);


  //meteor color constraints
  rMeteor = constrain(123, 169, 220);
  gMeteor = constrain(123, 169, 220);
  bMeteor = constrain(123, 169, 220);
  
  //trail color constraints
  
  rTrail = 255
  gTrail = 255
  bTrail = random(51, 204);

  
  var mConX = constrain(mouseX, 25, 500);
  var mConY = constrain(mouseY, 100, 100);

//projectile
  strokeWeight(0.1);
  fill(rTrail,bTrail,gTrail);
  fromTrail = color(255, 255, 51);
  toTrail = color(255, 255, 204);
  fillTrail = lerpColor(fromTrail, toTrail, mouseX/width);
  fill(fillTrail);
  triangle(mConX-60,mConY-25, mConX-10,mConY-5, mConX-10, mConY-26);
  triangle(mConX-130,mConY-10, mConX-10,mConY-5, mConX-10, mConY-26);
  triangle(mConX-60,mConY+25, mConX+10,mConY+5, mConX+10, mConY+26);
  triangle(mConX-130,mConY+10, mConX+10,mConY+5, mConX+10, mConY+26);
  triangle(mConX-150,mConY, mConX-5,mConY+20, mConX-10, mConY-20);
  stroke(255);
  fill(rMeteor,bMeteor,gMeteor);
  fromMeteor = color(253, 197, 94);
  toMeteor = color(255, 240, 173);
  fillMeteor = lerpColor(fromMeteor, toMeteor, mouseX/width);
  fill(fillMeteor);
  ellipse(mConX,mConY,55,55);
  ellipse(mConX,mConY,45,45);

//straw  
  stroke(0);
  strokeWeight(0.5);
  fill(0, 112, 74);
  circle(65, 99.5, 57.52);
  noStroke();
  rect(0, 71, 70, 57);
  stroke(0);
  strokeWeight(0.5);
  line(0, 71, 72.5, 71);
  line(0, 128, 72.5, 128);
  
//constrain ducking height
var hConX = constrain(mouseX, 180, 300);

//head, neck, body
  fill(fillMeteor);
  quad(250, 300, 180, 330, 500, 330, 400, 300);
  quad(160, 500, 180, 330, 500, 330, 400, 500);
  stroke(255, 216, 194);
  strokeWeight(80);
  line(7/8 * width, 3/4 * height, 7/8 * width, hConX);
  fill(12);
        fill(255, 216, 194);
        stroke(0);
        strokeWeight(0.2);
        circle(7/8 * width, hConX+51, 200);
  
//hair size change to create perspective when head goes down
  fill(0);
  if (mouseX > 200){
    ellipse(7/8*width, hConX+30, 180, 170);
    translate(300,400); 
  } else 
      ellipse(7/8*width, hConX, 180, 100);

//facial features
  if (mouseX > 150 & mouseX < 200){
    fill(255);
    ellipse(7/8*width+40, hConX+100, 40, 20);
    ellipse(7/8*width-30, hConX+100, 40, 20);
    fill(0);
    circle(7/8*width + 40, hConX+100, 20);
    circle(7/8*width - 30, hConX+100, 20);
    fill(255,0,0);
    ellipse(7/8*width+5, hConX+130, 20, 30);
  } else if (mouseX < 150){
    fill(255);
    ellipse(7/8*width+40, hConX+100, 30, 10);
    ellipse(7/8*width-30, hConX+100, 30, 10);
    fill(0);
    circle(7/8*width + 40, hConX+100, 10);
    circle(7/8*width - 30, hConX+100, 10);
    line(340, 300, 370, 300);
  }
}

Project 03

This is my project 03

sketch 

function setup() {
    createCanvas(600, 450);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
//cloud left variables
var x1 = 70
var y1 = 60;
var cwidth = 60;
var cheight = 40;
//cloud right variables
var x2 = 400;
var y2 = 60;
//star left variables
var sx1 = 70;
var sy1 = 130;
var sw1 = 3;
var sh1 = 12;
//star right variables
var sx2 = 400;
var sy2 = 130;
var sw2 = 12
var sh2 = 21
//color for cloud
var rc = 183;
var gc = 186;
var bc = 202;
var angle = 0
//color for rain
var rr = 57;
var rg = 85;
var rb = 96;
//flower 
var anglef = 0
var diam = 45
var rf = 199
var gf = 101
var bf = 93

function draw() {
    background(255)
    //ground
    noStroke();
    push();
    angle = mouseX*0.15   //background rotation
    mouseX = max(min(mouseX,600),0);
    rotate(radians(angle))
    fill(237,186,185);
    rect(0,400,800,50);
    fill(246,219,219);
    rect(0,350,800,50);
    fill(214,211,203);
    rect(0,300,800,50);
    fill(214,207,141);
    rect(0,250,800,50);
    fill(242,126,113);
    rect(0,200,800,50);
    fill(237,186,185);
    rect(0,150,800,50);
    fill(246,219,219);
    rect(0,100,800,50);
    fill(214,211,203);
    rect(0,50,800,50);
    fill(214,207,141);
    rect(0,0,800,50);
    pop();

    //cloud left
    fill(rc,gc,bc);
    ellipse(x1,y1,cwidth,cheight);
    ellipse(x1+30,y1-10,cwidth,cheight);
    ellipse(x1+60,y1,cwidth,cheight);
    ellipse(x1,y1+20,cwidth,cheight);
    ellipse(x1+30,y1+25,cwidth,cheight);
    ellipse(x1+60,y1+20,cwidth,cheight);
    ellipse(x1+30,y1+10,cwidth,cheight);
    ellipse(x1-20,y1+10,cwidth/1.5,cheight/1.5);
    ellipse(x1+80,y1+10,cwidth/1.5,cheight/1.5);
    cwidth = 60 + mouseX*0.03 // size change due to the mouseX position
    cheight = 40 + mouseX*0.03
    x1 = mouseX  // position change according to the mouseX
    bc = 202- mouseX*0.1 // color change of cloud according to the mouseX

    //cloud right
    fill(rc,gc,bc);
    ellipse(x2,y2,cwidth,cheight);
    ellipse(x2+30,y2,cwidth,cheight);
    ellipse(x2+60,y2,cwidth,cheight);
    ellipse(x2,y1+20,cwidth,cheight);
    ellipse(x2+30,y2+25,cwidth,cheight);
    ellipse(x2+60,y2+20,cwidth,cheight);
    ellipse(x2+30,y2+10,cwidth,cheight);
    ellipse(x2-20,y2+10,cwidth/1.5,cheight/1.5);
    ellipse(x2+80,y2+10,cwidth/1.5,cheight/1.5);
    x2 = 600- mouseX // position change according to the mouseX
    rc = 183- mouseX*0.1+20 // color change of cloud according to the mouseX
    
    
    //rain left
    fill(rr,rg,rb);
    ellipse(sx1,sy1,sw1,sh1);
    ellipse(sx1-25,sy1-12,sw1,sh1);
    ellipse(sx1+20,sy1+10,sw1,sh1);
    ellipse(sx1-15,sy1+20,sw1,sh1);
    ellipse(sx1+40,sy1+40,sw1,sh1);
    ellipse(sx1+10,sy1+40,sw1,sh1);
    ellipse(sx1+10,sy1+40,sw1,sh1);
    ellipse(sx1+50,sy1+10,sw1,sh1);
    ellipse(sx1+75,sy1+20,sw1,sh1);
    ellipse(sx1+70,sy1-13,sw1,sh1);
    ellipse(sx1+35,sy1+80,sw1,sh1);
    ellipse(sx1+45,sy1+120,sw1,sh1);
    ellipse(sx1+20,sy1+110,sw1,sh1);
    ellipse(sx1,sy1+80,sw1,sh1);
    ellipse(sx1+50,sy1+60,sw1,sh1);
    ellipse(sx1-10,sy1+50,sw1,sh1);
    sx1 = mouseX; // position change according to the mouseX
    sw1 = 3+mouseX*0.013 // size change due to the mouseX position
    sh1 = 12+mouseX*0.013
    rg = 85-mouseX*0.2 // color change of rain according to the mouseX
    rr = 57- mouseX*0.1+20 // color change of rain according to the mouseX

    //rain right
    fill(rr,rg,rb);
    ellipse(sx2,sy2,sw2,sh2);
    ellipse(sx2-30,sy2-12,sw2,sh2);
    ellipse(sx2+20,sy2+10,sw2,sh2);
    ellipse(sx2-15,sy2+20,sw2,sh2);
    ellipse(sx2+40,sy2+40,sw2,sh2);
    ellipse(sx2+10,sy2+40,sw2,sh2);
    ellipse(sx2+10,sy2+40,sw2,sh2);
    ellipse(sx2+50,sy2+10,sw2,sh2);
    ellipse(sx2+85,sy2+20,sw2,sh2);
    ellipse(sx2+70,sy2-13,sw2,sh2);
    ellipse(sx2+35,sy2+80,sw2,sh2);
    ellipse(sx2+30,sy2+140,sw2,sh2);
    ellipse(sx2+20,sy2+110,sw2,sh2);
    ellipse(sx2,sy2+80,sw2,sh2);
    ellipse(sx2+50,sy2+60,sw2,sh2);
    ellipse(sx2-10,sy2+50,sw2,sh2);
    sx2 = 600- mouseX // position change according to the mouseX
    sw2 = 12-mouseX*0.013 // size change due to the mouseX position
    sh2 = 21-mouseX*0.013
    rb = 96+mouseX*0.05 // color change of rain according to the mouseX

    //flower center
    if(mouseX>width/2){
        fill(110,109,28);
        rect(width/2-5,height/2+28,10,height/2);
        rect(width/4-5,height/4*3+28,10,height/2);
        rect(width/4*3-5,height/4*3+28,10,height/2);
        push();
        translate(width/2,height/2)
        rotate(radians(anglef)); //flower rotate by it self 
        fill(rf,gf,bf);
        circle(-15,-25,diam)
        circle(15,-25,diam)
        circle(-15,25,diam)
        circle(15,25,diam);
        circle(28,0,diam)
        circle(-28,0,diam)
        fill(231,183,diam);
        circle(0,0,diam);
        pop();
        bf = 93+mouseX*0.05

        diam = 45+mouseX/20
        anglef += 3
        //flower left
        push();
        translate(width/4,height/4*3)
        rotate(radians(anglef)); //flower rotate by it self 
        fill(249,213,216);
        circle(-15,-25,diam/2);
        circle(15,-25,diam/2);
        circle(-15,25,diam/2);
        circle(15,25,diam/2);
        circle(28,0,diam/2);
        circle(-28,0,diam/2);
        fill(189,135,136);
        circle(0,0,diam/2);
        pop();
        //flower right
        push();
        translate(width/4*3,height/4*3)
        rotate(radians(anglef)); //flower rotate by it self 
        fill(195,231,254);
        circle(-15,-25,diam/2);
        circle(15,-25,diam/2);
        circle(-15,25,diam/2);
        circle(15,25,diam/2);
        circle(28,0,diam/2);
        circle(-28,0,diam/2);
        fill(238,218,92);
        circle(0,0,diam/2);
        pop();
        //sun
        fill(245,177,86);
        ellipse(width/2,height/6,diam*1.1);


    }



}