Category: Project-03-Dynamic-Drawing

Ammar Hassonjee – Project 03 – Dynamic Drawing

Ammar Hassonjee – Dynamic Drawing

/* Ammar Hassonjee
    Section C
    ahassonj@andrew.cmu.edu
    Project 03 - Dynamic Drawing
*/

// Sky color variables
var sc1 = 255;
var sc2 = 255;
var sc3 = 255;
function setup() {
    createCanvas(480, 640);
}

function draw() {
    // Making sure the sky color changes from day to night as the mouse moves down
    background(mouseY * .5, 6 + mouseY * .18, 60 + mouseY * .12);
    if (mouseY > height) {
        background(242, 117, 134);
  }

  // Changing the color of the stars to make sure they fade at dawn
    noStroke();
    sc2 = 255 - mouseY * .4;
    sc3 = 255 - mouseY * .3;
    if (mouseY > height / 2) {
        sc1 = 242;
        sc2 = 117;
        sc3 = 134;
  }

  // Creating the star pattern using nested for loop
    fill(sc1, sc2, sc3);
    for (let a = 1; a < 7; a++) {
        for (let i = 1; i < 51; i++) {
            if (i % 2 === 0) {
                ellipse(i * 30 - 15, 70 * a, 10, 10);
                }
            else {
                ellipse(i * 30 - 15, 70 * a - 30, 10, 10);
              }
            }
  }

  // Drawing the mountains
    var p = 0;
    fill(96, 90, 114);
    for(let i = 0; i < 23; i++) {
        if (i % 2 === 0) {
            triangle(p - 30, 640, p + 45, 500 + (mouseX * .1), p + 90, 640);
          }
        else {
            triangle(p - 30, 640, p + 45, 460 + (mouseX * .1), p + 90, 640);
          }
          p += 45;
        }

    // Creating the shooting star
    push();
    // Making the star translate back and forth across the image plane
    translate(mouseX, height / 3);
    rotate(radians(170));
    // Streaks for the star
    fill(220);
    triangle(384, 145, 387, 160, 665, 92);
    triangle(665, 86, 384, 127, 383, 138);
    // Shooting star drawing
    fill('yellow');
    beginShape();
    vertex(339, 86);
    vertex(353, 112);
    vertex(379, 116);
    vertex(359, 138);
    vertex(364, 166);
    vertex(339, 153);
    vertex(314, 166);
    vertex(319, 138);
    vertex(299, 116);
    vertex(326, 112);
    endShape();
    pop();

  }

 

My inspiration for this assignment stemmed from my love of nature and landscape. I’ve always liked the scene of a shooting star in a starry sky, so I thought it would be a great dynamic drawing opportunity to have a star move across the screen while the sky color changes.

Jasmine Lee – Project 03 – Dynamic Drawing

jasminedrawing

//Jasmine Lee
//Section C
//jasmine4@andrew.cmu.edu
//Project-03 (Dynamic Drawing)

var r = 10;
var g = 100;
var b = 50;
var angle = 0;
var sizeX = 10; 
var sizeY = 15;
var circlesize = 80;

function setup() {
    createCanvas(640, 480);
}


function draw() {
    //change background color
    background(r + mouseX , g + mouseY, b);

    noStroke();


if (mouseX > width / 2) {
    rectMode(CENTER)
}
    push();
    translate(width / 2, height / 2);
    rotate(radians(angle));

    //rectangle
    fill(r + mouseX - mouseY, g + mouseX, b + mouseY)
    rect(mouseX, mouseY, sizeX, sizeY);
    rect(mouseX + 5, mouseY + 2, sizeX + 2, sizeY + 2);
    rect(mouseY - 100, mouseX - 220, sizeX, sizeY)
    rect (mouseY - 150, mouseX - 130, sizeX - 30, sizeY - 30);

    //rectangleset2
    fill(r - mouseX + mouseY, g - mouseX, b - mouseY)
    rect(mouseX + 50, mouseY - 50, sizeX / 2, sizeY / 2);
    rect(mouseX - 50, mouseY - 60, sizeX / 3, sizeY / 3);
    rect(mouseY - 100, mouseX - 220, sizeX / 4, sizeY / 5);
    rect(mouseX - 150, mouseY - 130, sizeX - 30, sizeY - 30);

    //rectangleset3
    fill(r - mouseX + mouseY, g - mouseX, b - mouseY)
    rect(mouseX / 2, mouseY / 2, sizeX / 2, sizeY / 2);
    rect(mouseY / 5, mouseX /5, sizeX + 100, sizeY - 100);
    rect(mouseX, mouseY, sizeY, sizeX);
    rect(mouseX - 150, mouseY - 130, sizeX - 30, sizeY - 30);



    pop();

    //constraining size of the ellipses
    var m = max(min(mouseX, 640), 0);
    var size = m * 350.0 / 640.0;

    //ellipse 1
    fill(r + mouseX / 2, g + mouseX / 2, b + mouseX / 2);
    ellipse(width / 2, height / 2, size, size);

    //ellipse 2
    fill(r + mouseX / 2, g + mouseX / 2, b + mouseX);
    ellipse(width / 2, height / 2, size * 0.9 , size * 0.9);

    //ellipse 3
    fill(r + mouseX, g + mouseX / 2, b + mouseX / 2);
    ellipse(width / 2, height / 2, size * 0.7 , size * 0.7);

    //ellipse 4
    fill(r + mouseX / 2, g + mouseX, b + mouseX / 2);
    ellipse(width / 2, height / 2, size * 0.5 , size * 0.5);


    angle = angle + 0.5;
    sizeX = width - (0.5 * mouseX);
    sizeY = height - (0.5 * mouseY);
}

I was inspired to create this dynamic drawing by the animations that show music beats. I tried to convey a bright, energetic atmosphere by using different variations of colors and undulating shapes.

Fallon Creech-Project-03-Dynamic-Drawing


sketch

For this project I wanted to experiment with basic dynamic principles that varied based on mouse position including color, position, size, and distance.

let shape;

function setup() {
  createCanvas(640, 480);
  //shape randomly assumes Y position each time page is refreshed
  shape = random(255);
}

function draw() {
  background(shape, mouseX, 0);
  //size of ellipse is dependent on location of mouseX
  var m = max(min(mouseX, 640), 0);
  var size = m * 350.0 / 400.0;
  ellipse(size, shape, 50, mouseX);
}

Sydney Salamy: Project-03-Dynamic-Drawing

My project was pretty tricky to make. Trying to get the ellipses to expand and stop at different points took a while, and I had to settle for them all moving at once, and there was a lot of trial and error. My end result is a Day to Night transition.

My Original Draft For The Project

ssalsketch

var centX = 320;//center x value
var centY = 240;//center y value
var dTopY = 335;//diamond top
var dBottomY = 145;//diamond bottom
var dRightX = 415;//diamond right
var dLeftX = 225;//diamond left
var x = 13;//slows triangles down through division



function setup() {
    createCanvas(640,480);    
}

function draw() {
    background(6, 2, 240);//blue sky
    noStroke();

//sunlight layer variables
var starAngle = mouseX;
var l1 = 190;//layer 1
var l2 = mouseX + 1 * 24;//layer 2
var l3 = mouseX + 1 * 30;//layer 3
var l4 = mouseX + 1 * 18;//layer 4
var l5 = mouseX + 1 * 47;//layer 5
var l6 = mouseX + 1 * 81;//layer 6
var l7 = mouseX + 1 * 106;//layer 7
var l8 = mouseX + 1 * 140;//layer 8

    //blue layers behind sunlight layers
    fill(25, 22, 240);
    ellipse(320,240, 600,480);//outer

    fill(38, 35, 235);
    ellipse(320,240, 440,410);

    fill(45, 71, 237);
    ellipse(320,240, 330,320);

    fill(67, 99, 240);
    ellipse(320,240, 260,260);

    fill(77, 137, 240);
    ellipse(320,240, 245,245);

    fill(103, 164, 245);
    ellipse(320,240, 220,220);

    //rotating stars
    push();
    fill(255);
    translate(20,20);
    rotate(radians(mouseX));
    ellipse(0,0, 10,20);
    rotate(radians(mouseX + 1));
    ellipse(0,0, 20,10);
    pop();

    push();
    fill(255);
    translate(200,360);
    rotate(radians(mouseX));
    ellipse(0,0, 10,20);
    rotate(radians(mouseX + 1));
    ellipse(0,0, 20,10);
    pop();

    push();
    fill(255);
    translate(390,90);
    rotate(radians(mouseX));
    ellipse(0,0, 10,20);
    rotate(radians(mouseX + 1));
    ellipse(0,0, 20,10);
    pop();

    push();
    fill(255);
    translate(420,300);
    rotate(radians(mouseX));
    ellipse(0,0, 10,20);
    rotate(radians(mouseX + 1));
    ellipse(0,0, 20,10);
    pop();

    push();
    fill(255);
    translate(50,80);
    rotate(radians(mouseX));
    ellipse(0,0, 10,20);
    rotate(radians(mouseX + 1));
    ellipse(0,0, 20,10);
    pop();

    push();
    fill(255);
    translate(480,220);
    rotate(radians(mouseX));
    ellipse(0,0, 10,20);
    rotate(radians(mouseX + 1));
    ellipse(0,0, 20,10);
    pop();

    push();
    fill(255);
    translate(400,400);
    rotate(radians(mouseX));
    ellipse(0,0, 10,20);
    rotate(radians(mouseX + 1));
    ellipse(0,0, 20,10);
    pop();

    push();
    fill(255);
    translate(600,470);
    rotate(radians(mouseX));
    ellipse(0,0, 10,20);
    rotate(radians(mouseX + 1));
    ellipse(0,0, 20,10);
    pop();

    push();
    fill(255);
    translate(65,300);
    rotate(radians(mouseX));
    ellipse(0,0, 10,20);
    rotate(radians(mouseX + 1));
    ellipse(0,0, 20,10);
    pop();

    push();
    fill(255);
    translate(600,60);
    rotate(radians(mouseX));
    ellipse(0,0, 10,20);
    rotate(radians(mouseX + 1));
    ellipse(0,0, 20,10);
    pop();

    push();
    fill(255);
    translate(200,30);
    rotate(radians(mouseX));
    ellipse(0,0, 10,20);
    rotate(radians(mouseX + 1));
    ellipse(0,0, 20,10);
    pop();

    //yellow sunlight layers
    fill(254, 255, 209);
    ellipse(centX,centY, l8,l8);//outer//800

    fill(255, 240, 148);
    ellipse(centX,centY, l7,l7);//7//600,480

    fill(255, 235, 110);
    ellipse(centX,centY, l6,l6);//6//440,410

    fill(255, 230, 69);
    ellipse(centX,centY, l5,l5);//5//330,320

    fill(255, 226, 3);
    ellipse(centX,centY, l4,l4);//4//260

    fill(255, 213, 3);
    ellipse(centX,centY, l3,l3);//3//245

    fill(255, 205, 3);
    ellipse(centX,centY, l2,l2);//210
    
    //triangles expand outward to create Sun rays
    fill(252, 132, 33);
    triangle(320 + mouseX / x,dTopY, dRightX + mouseX / x,240,
    320 + mouseX / x,dBottomY);//triangle right
    triangle(320 - mouseX / x,dTopY, dLeftX - mouseX / x,240,
    320 - mouseX / x,dBottomY);//triangle left
    triangle(dLeftX,240 + mouseX / x, 320,dTopY + mouseX / x,
    dRightX,240 + mouseX / x);//triangle top
    triangle(dLeftX,240 - mouseX / x, 320,dBottomY - mouseX / x,
    dRightX,240 - mouseX / x);//triangle bottom

    fill(252, 186, 3);
    ellipse(centX,centY, l1,l1);//Sun

    //causes gradient shift to Moon
    if(mouseX <= 200){
        fill(239, 189, 53);
        ellipse(centX,centY, l1,l1);//darker Sun
    }
    if(mouseX <= 160){
        fill(226, 197, 103);
        ellipse(centX,centY, l1,l1);//darker Sun 2
    }
    if(mouseX <= 120){
        fill(213, 205, 153);
        ellipse(centX,centY, l1,l1);//darker Sun 3
    }
    if(mouseX <= 80){
        fill(200, 213, 203);
        ellipse(centX,centY, l1,l1);//darker Sun 4
    }
    if(mouseX <= 40){
        fill(187, 221, 253);
        ellipse(centX,centY, l1,l1);//darker Sun 5
    }
    if(mouseX <= 5){
        fill(184, 226, 255);
        ellipse(centX,centY, l1,l1);//Moon
    }
}

proj3suntomoon

A video in case the code doesn’t load

Austin Garcia – Project 03 – Section C

I tried many different ways to create mountains and alter them somehow with the mouse. I first attempted to create a gradient on the shapes to give a sense of the sun shining on them from different angles. Eventually, I had to settle for drawing lines along the yellow mountains to give the sense of fog crawling across them. Click the canvas then drag your mouse along it.

sketch

/*		Austin Garcia
		Section C
		aegarcia@andrew.cmu.edu
		Project - 03
*/
var x1 = 0;
var y1 = 100;
var x2 = 80;
var y2 = 100;
var x3 = 40;
var y3;
var mountain1 = 5;
var c1;
var c2;
var diffx = 0;
var diffy = 0;
var targetX = 300;
var targetY = 300;
var x = 300;
var y = 300;
var r

function setup() {
    createCanvas(400, 100);
    background(220);
    y3 = random(40, 90);
    c1 = ("yellow");



  //  triangle (x1, y1, x2, y2, x3, y3)

}

function draw() {


    r = random(80);


    fill(c1);

    strokeWeight(4);
    stroke(225);
    diffx = mouseX / 2 - x;
    diffy = mouseY / 2 - y;
    x = x + 0.1 * diffx;
    y = y + 0.1 * diffy;
    line(x1, y1, x, y);
    line(x2, y2, x, y);



}
    function mousePressed() {

      push();
      translate(mountain1, 0);
      strokeWeight(1)
      triangle (x1, y1, x2, y2, x3, y3);
      pop();


    mountain1 = mountain1 + r;
    y3 = r;

    if (mountain1 > 400) {
      strokeWeight(0);
    }
}

Zee Salman- Project- 03


sketch

//Zee Salman
//SECTION E
//fawziyas@andrew.cmu.edu
//PROJECT-03



function setup() {
    createCanvas(600, 400);
//     rectMode(CENTER);
}

function draw() {
    background("pink");

//head
	fill("black")
	ellipse(width/2, height * .67, 100, 150);
//body	
	ellipse(width/2, height * .5, 80, 100);
//tummy	
	fill("white")
	ellipse(width/2, height * .68, 82, 96);
//beak
	fill("orange")
	ellipse(width/2, height * .5, 10,14);
//eyes
	
	fill("white")
	ellipse(320, height * .47, 20,20);
	ellipse(290, height * .47, 20,20);
//pupils
	fill("red")
	ellipse(320, height * .47, 10,10);
	ellipse(290, height * .47, 10,10);
	
//goes up

	if (mouseX < 300) {
	
	
		width = width + 2


	}
	if(mouseX > 299){

		width = width - 2
	}
//goes down
	if (mouseY < 200){
		height = height +2
	}
	if (mouseY > 199){
		height = height - 2
	}



}

For this project I combined the two mouse feature to make the eyes move on way and the body move another so that when the mouse is positioned just right, it creats a pengiun.

Julia Nishizaki – Project 03 – Dynamic Drawing

sketch

//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Project-03

var oceanY = 480;
var oceanSpeed = 0.05;
var diffocean = 0;
var diffwaves = 1;
var deg = 0;
var brightness = 0;

function setup() {
    createCanvas(640, 480);

}

function draw() {
    background(220);

    noStroke();
    fill(34, 110, 148);
    rectMode(CORNERS);

    //ocean rising and falling
    diffocean = mouseY - oceanY;
    oceanY = oceanY + oceanSpeed * diffocean;
    let conocean = constrain(oceanY, 200, 400)
    rect(0, conocean, width, height);

    //rain
    let rainWeight = constrain(((height - mouseY) / 48), 0, 10);
    strokeWeight(rainWeight);
    stroke(50, 120, 147, 20);
    var cloudsX = width - mouseX;
    line(cloudsX + 25, 100, cloudsX + 25, conocean);
    line(cloudsX + 50, 100, cloudsX + 50, conocean);
    line(cloudsX + 75, 100, cloudsX + 75, conocean);
    line(cloudsX + 100, 100, cloudsX + 100, conocean);
    line(cloudsX + 125, 100, cloudsX + 125, conocean);

    //clouds
    noStroke();
    rectMode(CORNER);
    fill(constrain(mouseY, 50, 255));
    rect(cloudsX, 50, 150, 50, 30, 30, 30);
    
    //boat and boat variables
    //bmX and bmY are boat middle X and Y
    var bmX = 0;
    var bmY = 0;
    //bw and bh are boat height and width
    var bw = 75;
    var bh = 40;
    //bd is displacement of left and right boat corners above bmY
    var bd = 10;
    //bblX and bbrX are boat base left and right X
    var bblX = bmX - bw / 2;
    var bbrX = bmX + bw / 2;

    //boat stroke and fill
    stroke('black');
    strokeWeight(5);
    strokeJoin(ROUND);
    fill('white');
    
    //rotation of the boat
    push();
    translate(width / 2, conocean);
    rotate(radians(deg), bmX, bmY);
    triangle(bblX, bmY, bmX, bmY, bmX, bmY - bh);
    triangle(bbrX, bmY, bmX, bmY, bmX, bmY - bh);
    triangle(bblX - bw / 2, bmY - bd, bblX, bmY + bh, bmX, bmY);
    triangle(bblX, bmY + bh, bbrX, bmY + bh, bmX, bmY);
    triangle(bbrX + bw / 2, bmY - bd, bbrX, bmY + bh, bmX, bmY);
    pop();
    var waves = ((height - mouseY) * 0.05);
    deg += (waves / 8) * diffwaves;
    if (deg > waves || deg < -waves) {
        diffwaves = -diffwaves;
    }

    //water in front of boat
    fill(34, 110, 148);
    noStroke();
    rect(0, conocean + 25, width, height);

    //stormy filter, makes things darker
    brightness = height - mouseY;
    let conbrightness = constrain(brightness, 0, 100);
    fill(12, 52, 68, conbrightness);
    rect(0, 0, width, height);

}

For this project, I wanted to play with the idea of a boat at sea that gets caught in a storm. While I ended up simplifying the project as I went along, I still was able to experiment a little with changing position, color, stroke weight, size, and rotation. However, I struggled a lot with getting the rotation to work, and I still wasn’t able to get it to function without occasionally glitching if your mouse goes too low on the canvas.

Claire Lee – Project 03 – Dynamic Drawing

project – 03 – seoyounl

var canvasW = 480
var canvasH = 640

function setup() {
    createCanvas(canvasW, canvasH);

}

function draw() {
    var drinkY = 300;
    var drinkH = 200;
    var drinkOpacity = 200 - (mouseY / 8);

    background(100 + (mouseX / 10), 150 + (mouseX / 10), 255);
    // background color changes with mouseX
    
    noStroke();
    fill(255, 200, 200);
    ellipse(canvasW / 2, 240, 300, 300);

    noStroke();
    fill(0);
    ellipse(180, 160, 15, 15);

    noStroke();
    fill(0);
    ellipse(300, 160, 15, 15);

    noStroke();
    fill(0);
    rect(235, 190, 10, 305);

    stroke(0);
    strokeWeight(4);
    line(210, 190, 270, 190);



    noStroke();
    fill(240, 130, 30, drinkOpacity);
    rect(170, drinkY + (mouseY / 4), 140, drinkH - (mouseY / 10));
    // drink height and opacity changes with mouseY
  
    noStroke();
    fill(60); 
    rect(0, 500, canvasW, canvasH - 500); 

    stroke(255);
    strokeWeight(4);
    noFill();
    rect(170, 250, 140, 250); 

    push();
    translate(0, (mouseY / 4.3));  
    rectMode(CENTER);
    noStroke();
    fill(255, 255, 255, 100);
    rect(200, 292, 50 - (mouseY / 100), 50 - (mouseY / 100), 5);
    pop(); 

    push();
    translate(0, (mouseY / 5)); 
    rectMode(CENTER);
    noStroke();
    fill(255, 255, 255, 100);
    rect(250, 320, 50 - (mouseY / 100), 50 - (mouseY / 100), 5);
    pop();

    push();
    translate(0, (mouseY / 4.3)); 
    rectMode(CENTER);
    noStroke();
    fill(255, 255, 255, 100);
    rect(280, 292, 50 - (mouseY / 100), 50 - (mouseY / 100), 5);
    pop();
    // ice cubes change size and position





}

This project was a really interesting way to experiment with changing shapes, colors, opacity, size, and position in a piece. I really enjoyed learning some new functions, and some other things I wish I could’ve implemented are rotations (in the ice cubes) and some more complex figures.

Carly Sacco – Project-03- Dynamic Drawing


sketch

//Carly Sacco
//Section C
//csacco@andrew.cmu.edu
//Project 3

var x = 300;
var y = 400;
var dx = 1 ;
var dy = -1;

function setup() {
    createCanvas(640, 480);	
}

function draw() {
	background(95, mouseX * .7, 227);
	//fish head
	fill(50, 162, 168);
	noStroke();
	push();
	translate(width / 2, height / 2);
    rotate(PI / 4);
    rect(-50, -50, 300, 300, 30);
	pop();
	
	fill(184, 213, 214);
	noStroke();
	push();
	translate(width / 2, height / 2);
    rotate(PI / 4);
    rect(-25, -25, 250, 250, 30);
	pop();
	
	//fish eyes
	fill('white');
	ellipse(290, 315, 50, 65);
	ellipse(350, 315, 50, 65);
	
	fill('black');
	//letting the black of the eye move based on the mouse
	eyeY = constrain(mouseY, 310, 330);
	ellipse(290, eyeY, 35, 35);
	ellipse(350, eyeY, 35, 35);
	
	//fish  mouth
	fill(227, 64, 151);
	noStroke();
	push();
	translate(320, 410);
	rectMode(CENTER)
    rotate(mouseX / 150); //the mouth spins based on mouseX
    rect(0, 0, 100, 100, 30);
	pop();
	
	fill(120, 40, 82);
	noStroke();
	push();
	translate(width / 2, height / 2);
    rotate(PI / 4);
    rect(95, 95, 50, 50, 30);
	pop();	
	
	//fins
	fill(209, 197, 67);
	quad(460, 350, 510, 300, 510, 450, 460, 400);
	quad(200, 350, 150, 300, 150, 450, 200, 400);
	
	//bubbles
	var bub = random(25, 60);
	fill(237, 240, 255);
	ellipse(x, y, 50, 50);
	ellipse(x, y, bub, bub);
	ellipse(200, y, bub, bub);
	ellipse(mouseX * .5, mouseY * .5, bub, bub);
	ellipse(mouseX * .25, mouseY * .25, bub, bub);
	ellipse(mouseX * .75, mouseY * .75, bub, bub);
	ellipse(mouseX * .5, mouseY * .25, bub, bub);
	ellipse(500, y, bub, bub);
	ellipse(250, 500, bub, bub);
	x += dx;
	y += dy;

	//so that they bounce off the edges
	if (x > 640) {
		dx = -dx;
	}
	if (y < 0) {
		dy = -dy;
	}
	if (y > 480) {
		dy = -dy;
	}
	if (x < 0) {
		dx = -dx;
		dy = random(1,5);
	}	
}

I thought making a fish with aspects that moved based on the cursor would be a fun way of how humans normally try to get fish’s attention. I learned a lot about how certain things can be controlled and how with others it’s fun to let them just run.

Stefanie Suk – Project 03 – Dynamic Drawing

sketch

//Stefanie Suk
//15-104 D
//ssuk@andrew.cmu.edu
//Dynamic Drawing

var a = 251; //background color
var b = 224; //background color
var c = 233; //background color
var angle = 0;

function setup() {
    createCanvas(640, 480);
}
function draw() {
    a, b, c = mouseX/4; 
    // background color change when mouse is moved 
    background(a, b, c);
    noStroke();
    push();
    translate(mouseY + 75, width/2)
    rotate(radians(angle));
    ellipseMode(CENTER);
    fill(130, 175, 255);
    stroke(217, 255, 147);
    strokeWeight(20);
    ellipse(0, 0, 200, 500);
    pop();
    angle = angle + 5
    // rotating oval position change; left when mouse moves up right whien mouse moves down
    let circlex = width - mouseX;
    let circley = height - mouseY;
    fill(230, 111, 183);
    ellipse(circlex, height/2, circley, circley); 
    // pink circle size and position change; left when mouse moves right, right when mouse moves left, big when mouse moves up, small when mouse moves down
    let cirx = height - mouseY;
    let ciry = width - mouseX;
    fill(185, 111, 230);
    ellipse(mouseX, height/2, mouseY, mouseY); 
    // purple circle size and position change; moves along the mouse, big when mouse moves down, small when mouse moves up
    fill(111, 208, 230);
    ellipse(cirx, height/2, ciry, ciry); 
    // blue circle size and position change; left when mouse moves down, right when mouse moves up, big when mouse moves left, small when mouse moves right 
    translate (mouseX + 10, height/2);
    ellipseMode(CENTER);
    fill(255, 147, 147);
    stroke(213, 68, 98);
    strokeWeight(15);
    ellipse(mouseX - 150, mouseY - 200, mouseX/2, mouseY/2); 
    // pink orange oval shape position change; long when mouse moves down and left, wide when mouse moves up and right,
}

For this project, I studied the various possibilities in the change of the shape, ellipse. Ellipse is one of my favorite shape to study because although it is a simple, single lined structure, there are so many varieties of different ellipse we can create. I tried to incorporate as many different aspects of image elements possible, like the changes in sizes, angles, colors, and position as I move the cursor around different places within the canvas.