Category: Project-03-Dynamic-Drawing

Project03-Dynamic Drawing

sketchDownload
var R=255;
var G=153;
var B=203;
var x=380;
var y=280;

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

function draw() {
    background(0);
    stroke(0);
    line(600,0,mouseX,mouseY);
   //change angle
    var angle=mouseX;
    push();
    //change origin
    if(mouseY>225){
        translate(200,225);
    }
    else{translate(400,225);
    }
    rotate(radians(angle));
    fill(R,G,B);
    var x=mouseX;
    var y=mouseY;
    circle(x,y,200);
    circle(x+30,y-160,50);
    circle(x-160,y+30,70);
    circle(x-140,y+50,30);
    //change color
    if(mouseY<150){
        R=0,
        G=255;
        B=255;
    }
    else if(mouseY>300){
        R=255;
        G=255;
        B=102;
    }
    else{
        R=255;
        G=153;
        B=203;
    }
    //change scale
    if(mouseX<200){
        scale(0.6);
        fill(R,G,B);
        circle(x,y,300);
        circle(x+30,y-160,50);
        circle(x-160,y+30,70);
        circle(x-140,y+50,30);
    }
    else if(mouseX>400){
        scale(0.4);
        fill(R,G,B);
        circle(x,y,300);
        circle(x+30,y-160,50);
        circle(x-160,y+30,70);
        circle(x-140,y+50,30);
    }
    else{
        scale(0.2);
        fill(R,G,B);
        circle(x,y,300);
        circle(x+30,y-160,50);
        circle(x-160,y+30,70);
        circle(x-140,y+50,30);
    }
    pop();

}

When I first started this dynamic drawing, I have no idea what to do. Therefore, I simply drew 4 circles, and then changed their color, rotating position, scaling size, and rotating angle. I encountered several difficulties on making my drawing move by my logic, because I didn’t fully understand how certain function work in computer logic. As I look at detailed instructions on these function, I made it work eventually, and I had a more comprehensive understanding of these functions.

Project 3- Dynamic Drawing

I really like the text in my project

sketch
function setup() {
    createCanvas(600, 450);
    background(230, 230, 250);
    text("p5.js vers 0.9.0 test.", 10, 15);
    rectMode(CENTER)
}
var xa = 300 //coordinates for rectangles a, b, and c
var ya = 225
var xb = 215
var yb = 140
var xc = 500
var yc = 425

function draw() {
    background(230, 230, 250);
    var m = max(min(mouseX, 600), 0); //constrain mouseX in canvas
    var size = dist(xa,ya,mouseX,mouseY) //size changes with distance between mouse and center
    var fillR = (dist(300,225,mouseX,mouseY)*0.3) //color changes with distance between mouse and center
    var fillG = (dist(300,225,mouseX,mouseY)*0.4)
    var fillB = (dist(300,225,mouseX,mouseY)*0.6)
    fill(fillR, fillG, fillB) //paint sqaure
    strokeWeight(5) 
    stroke(25, 25, 112)
    rect(xa,ya,size/1.5,size/1.5) //draws the rectangles
    rect(xb,yb,size/3,size/3) 
    rect(xc,yc,size/0.75,size/0.75) 

    push();
    translate(300,225) //move origin to center
    rotate(radians(mouseX)) //rotate according to position of mouseX
    ellipse(50,50,30,30) //draws the ellipses
    ellipse(-50,-50,30,30)
    ellipse(50,-50,30,30)
    ellipse(-50,50,30,30)
    ellipse(100,100,30,30)
    ellipse(-100,-100,30,30)
    ellipse(100,-100,30,30)
    ellipse(-100,100,30,30)
    ellipse(100,0,30,30)
    ellipse(-100,0,30,30)
    ellipse(0,100,30,30)
    ellipse(0,-100,30,30)
    ellipse(150,150,30,30)
    ellipse(-150,-150,30,30)
    ellipse(150,-150,30,30)
    ellipse(-150,150,30,30)
    ellipse(150,0,30,30)
    ellipse(-150,0,30,30)
    ellipse(0,150,30,30)
    ellipse(0,-150,30,30)
    pop();

    fill(255) //writes the text in black
    text("): This project is so hard  :( SOS", mouseX, mouseY)

}

Project 3- Dynamic Drawing

sketch
var x;
var y;
var strokeValue;
var mx;
var my;
var dragging 

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

function draw() {
    //center point variables
    let x = width/2;
    let y = height/2;
    //stroke color variable
    let strokeValue = 255;
    //map of black screen ellipse
    let mx= map(mouseX, 0, width, 0, 600);
    //allows for ellipse to drag (which I just realized
    //is pointless for this code)
    if(dragging == true) {
        x=mouseX;
        y=mouseY;
    }
    //redraws ellipse with no background
    if (mouseIsPressed) {
    stroke(strokeValue);
    noFill();
    ellipse(x, y, (mouseX), (mouseY));
    fill(0);
    //draws two ellipses on black screen, one is mapped
    } else {
        background(0)
        stroke(mouseX,0,mouseY);
        noFill();
        ellipse(mouseX, mouseY, mouseX, mouseY);
        ellipse(mx, y, mouseX, mouseY);
        text('press :)', mouseX, mouseY);
    }
}
//changes background value to current value of mouseX,mouseY
function mousePressed() {
    background(mouseX,0,mouseY);
    dragging = true;
}
//changes dragging to false
function mouseReleased() {
    dragging = false;
}

Originally, I wanted to do something really cool with infinitely generating circles. That idea morphed into this fun, interactive circle drawing. You can click anywhere on the canvas to generate a new background color based on the location of your mouse, and draw cool circles!

I’ll admit I struggled a lot with this project, but overall I am happy with what I came up with. I know it’s maybe not as complex as what we’re aiming for, however I learned a lot by creating it.

Project 03- Dynamic Drawing

sketch

//Catherine Liu
//jianingl@andrew.cmu.edu
//Section D

// bee follows cursor and creates flowers when it gets near stems
var x = 300;
var y = 200;
var dx = 0;
var dy = 0;
var angle = 0;


function setup() {
    createCanvas(600, 450);
    background(204,255,255);
}

function draw() {
    noStroke()
    //bee follows mouse
    dx = mouseX - x;
    dy = mouseY - y;
    x = x + 1*dx;
    y = y + 1*dy 
    background(204,255,255);
    //sun rotates according to mouse
    fill(0,153,0)
    push();
    fill(255,128,0);
    translate(300,450/2);
    rotate(radians(abs(mouseX/3)));
    ellipse(-200,-70,100,100)
    pop();
    rect(0,height-40,width,40);
    fill(0,255,0); //flower stems
    rect(445,370,10,80);
    rect(295,370,10,80);
    rect(145,370,10,80);

    if (dist(mouseX, mouseY, 450, 350) < 50) {
        if (dist(mouseX, mouseY, 450, 350) < 25) {
            fill(255,153,255); // flower petal is pink
        } else {
            fill(255,0,0) // flower petal is red
        }
        ellipse(450, 350, max(mouseX-340,mouseY-340), max(mouseX-340,mouseY-340));
        fill(255,255,0); // flower center
        ellipse(450, 350, max(mouseX-380,mouseY-380), max(mouseX-380,mouseY-380)); //make right flower bigger

        fill(255,0,0); // flower petal
        ellipse(300, 350, 250-(max(mouseX-250,mouseY-250)), 250-(max(mouseX-250,mouseY-250)));
        fill(255,255,0); // flower center
        ellipse(300, 350, 180-(max(mouseX-290,mouseY-290)), 180-(max(mouseX-290,mouseY-290))); //make middle flower smaller

        fill(255,0,0); // flower petal
        ellipse(150, 350, 250-(max(mouseX-250,mouseY-250)), 250-(max(mouseX-250,mouseY-250)));
        fill(255,255,0); // flower center
        ellipse(150, 350, 180-(max(mouseX-290,mouseY-290)), 180-(max(mouseX-290,mouseY-290))); //make left flower smaller

    } else if (dist(mouseX, mouseY, 300, 350) < 50) {
        if (dist(mouseX, mouseY, 300, 350) < 25) {
            fill(255,128,0); // flower petal is orange
        } else {
            fill(255,0,0) // flower petal is red
        }
        ellipse(300, 350, max(mouseX-250,mouseY-250), max(mouseX-250,mouseY-250));
        fill(255,255,0); // flower center
        ellipse(300, 350, max(mouseX-290,mouseY-290), max(mouseX-290,mouseY-290)); // make middle flower bigger

        fill(255,0,0); // flower petal
        ellipse(450, 350, 170-(max(mouseX-250,mouseY-250)), 170-(max(mouseX-250,mouseY-250)));
        fill(255,255,0); // flower center
        ellipse(450, 350, 100-(max(mouseX-290,mouseY-290)), 100-(max(mouseX-290,mouseY-290))); //make right flower smaller

        fill(255,0,0); // flower petal
        ellipse(150, 350, 170-(max(mouseX-250,mouseY-250)), 170-(max(mouseX-250,mouseY-250)));
        fill(255,255,0); // flower center
        ellipse(150, 350, 100-(max(mouseX-290,mouseY-290)), 100-(max(mouseX-290,mouseY-290))); //make left flower smaller

    } else if (dist(mouseX, mouseY, 150, 350) < 50) {
        if (dist(mouseX, mouseY, 150, 350) < 25) {
            fill(178,102,255); // flower petal is purple
        } else {
            fill(255,0,0) // flower petal is red
        }
        ellipse(150, 350, max(mouseX-250,mouseY-250), max(mouseX-250,mouseY-250));
        fill(255,255,0); // flower center
        ellipse(150, 350, max(mouseX-300,mouseY-300), max(mouseX-300,mouseY-300)); // make left flower bigger

        fill(255,0,0); // flower petal
        ellipse(450, 350, 170-(max(mouseX-250,mouseY-250)), 170-(max(mouseX-250,mouseY-250)));
        fill(255,255,0); // flower center
        ellipse(450, 350, 100-(max(mouseX-290,mouseY-290)), 100-(max(mouseX-290,mouseY-290))); //make right flower smaller

        fill(255,0,0); // flower petal
        ellipse(300, 350, 170-(max(mouseX-250,mouseY-250)), 170-(max(mouseX-250,mouseY-250)));
        fill(255,255,0); // flower center
        ellipse(300, 350, 100-(max(mouseX-290,mouseY-290)), 100-(max(mouseX-290,mouseY-290)));//make middle flower smaller
    }
    fill(255)
    ellipse(x-20,y-30,20,40); //bee wing
    ellipse(x-10,y-30,20,40); //bee wing
    fill(255,174,66);
    ellipse(x-15,y,50,25); //bee body
    fill(0)
    ellipse(x,y,5,5); // bee eye
    rect(x-55,y-5,20,10); // bee stinger
}

It took a while coming up with an idea but in the end I decided to do something fun and interactive like a game. When you move the bee close to the flower stems, a flower “blooms” while the others get smaller. I spent a long time making sure the sizes and numbers were correct but I’m happy with the end result.

initial idea sketch on whiteboard

Project-03-Dynamic-Drawing

sketch
//Nami Numoto
//Section A


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

function draw() {
    background(0); // initialize background
    fill(255, 255, 0); // yellow
    var m = max(min(mouseX, 600), 0); //restrict x to the canvas (600)
    var size = m * 350.0 / 400.0; // manipulate sizes of the circles
    ellipse(mouseX, mouseY, size, size); //yellow dot that follows mouse
    fill(0, 0, 255); // blue
    size = 400 - size;
    ellipse((width - mouseX), (height - mouseY), size, size); //blue dot that follows mouse inversely sort of
}

// everything the mouse 'draws' or hovers (yellow dot) should be mirrored about the y axis by the blue dot
// make them change size contrarily

I wanted to go off of the example while keeping it original. I’ve always been intrigued by mirror images and reflections, so I decided to reflect the user’s mouse trails about the y-axis and practice using contrary sizing.

I’ve noticed that the blue ellipse is not showing up, although it works in my index.html file… trying to work that out still

Project 3: Dynamic Drawing

wpf-dynamic-drawing
function setup() {
    createCanvas(600, 450);
}

function draw() {
    var positionY = constrain(mouseY, 80, 400); //relative Y position for everything that is constrained so the sun doesnt shoot off into the sky etc
    background(139,214,241);
    fill(21,8,29, mouseY - 80); //transitions background to night sky by decreasing transparency with mouseY position
    rect(0,0,600,300);

    var rainbowAlpha = map(constrain(mouseY,80,400), 80, 250, 255, 0); //variable to control transparency of the rainbow as it goes down

    noStroke();
    
    fill(255,0,0,rainbowAlpha); //the rainbow: red
    ellipse(300, positionY + 100, 700, 200);
    fill(254,98,48,rainbowAlpha); //orange
    ellipse(300, positionY + 120, 700, 200);
    fill(255,246,2,rainbowAlpha); //yellow
    ellipse(300, positionY + 140, 700, 200);
    fill(1,179,2,rainbowAlpha); //green
    ellipse(300, positionY + 160, 700, 200);
    fill(4,1,119,rainbowAlpha); //blue
    ellipse(300, positionY + 180, 700, 200);
    fill(35,3,114,rainbowAlpha); //violet
    ellipse(300, positionY + 200, 700, 200,);
    fill(139,214,241); //"clear" ellipse that is the same color as the day background
    ellipse(300, positionY + 220, 700, 200,); 
    fill(21,8,29, mouseY - 80); //"clear" ellipse that tranistions to night sky same why the regular background does
    ellipse(300, positionY + 220, 700, 200); 


    fill(255,246,2); //sun
    circle(150, positionY - 50, 50);

    fill(241,222,150); //moon
    circle(390, positionY - 325, 30);

    fill(233,233,255,mouseY - 250); //stars
    circle(40,96,10);
    circle(250,15,10);
    circle(330,62,10);
    circle(470,340,10);
    circle(580,70,10);
    circle(346,54,10);
    circle(200,30,10);
    circle(475,120,10);
    circle(175,60,10);
    circle(275,115,10);
    circle(430,50,10);
    circle(20,20,10);
    circle(100,40,10);
    circle(270,50,10);
    circle(80,130,10);
    circle(500,25,10);
    circle(400,100,10);
    circle(150,85,10);
    circle(500,55,10);


    var positionX = constrain(mouseX,35,565);

    fill(141,196,39); //green "field"
    rect(0,300,600, 150);

    var oppositeX = map(positionX, 0, 600, 600, 0);

    fill(103,62,16); //left dog
    ellipse(positionX, 350,30,15); //body
    circle(positionX + 15, 345,15); //head
    ellipse(positionX-10,355, 5,8); //leg
    ellipse(positionX + 10, 355, 5, 8); //leg
    ellipse(positionX-15,350,15,5); //tail
    triangle(positionX+9,340,positionX+12,335,positionX+16,340); //ear
    triangle(positionX+14,340,positionX+17,335,positionX+20,340); //ear
    fill(0);
    circle(positionX+16,343,2); //eyes
    circle(positionX+19,343,2);

    fill(103,62,16); //right dog
    ellipse(oppositeX, 390,30,15); //body
    circle(oppositeX - 15, 385,15); //head
    ellipse(oppositeX + 10,395, 5,8); //leg
    ellipse(oppositeX - 10, 395, 5, 8); //leg
    ellipse(oppositeX + 15,390,15,5); //tail
    triangle(oppositeX - 9,380,oppositeX - 12,375,oppositeX - 16,380); //ear
    triangle(oppositeX - 14,380,oppositeX - 17,375,oppositeX - 20,380); //ear
    fill(0);
    circle(oppositeX - 16,383,2); //eyes
    circle(oppositeX - 19,383,2);



}

I had difficulty with this project. I had a hard time coming up with something to draw. Once I had an idea I really enjoyed coming up with ways as to how I could incorporate dynamic elements into it. One thing, in particular, I am proud of is figuring out that the map function can work backwards, with the higher value being the start point and the lower value being the stop point, which allows you to invert the value of a variable in a sense.

Project 3: Dynamic drawing

sketch
// Yash Mittal
// Section D
 
var r = 100;
var g = 60;
var b = 150;
var angle = 30;
var sizeX = 70;
var sizeY = 70;

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

}

function draw() {

    background (r + mouseX, g + mouseY / 2, b + 10);

    frameRate(50);

    push(); //rectangle 1
    fill (r + mouseX - mouseY, g + mouseX, b + mouseY);
    translate (width / 2, height / 2);
    rotate (radians(angle));
    rectMode(CENTER);
    rect (mouseX / 2 , mouseY / 2, sizeX + mouseX / 2, sizeY + mouseY /2 );
    angle += 2;
    pop();
    
    push(); //rectangle 2
    fill (r + mouseX / 3 - mouseY / 2, g + mouseX + 50, b + mouseY - 100);
    translate (width / 2, height / 2);
    rotate (radians(angle) + 10);
    rectMode(CENTER);
    rect (mouseX / 2 , mouseY / 2, sizeX + mouseX / 2, sizeY + mouseY /2 );
    angle += 2;
    pop();
    
    push(); //rectangle 3
    fill (r - mouseX + mouseY * 2, g - mouseX + 10, b + mouseY / 2 + 100);
    translate (width / 2, height / 2);
    rotate (radians(angle) + 30);
    rectMode(CENTER);
    rect (mouseX / 2 , mouseY / 2, sizeX + mouseX / 2, sizeY + mouseY /2 );
    pop();

    push(); // rectangle 4 
    fill (r - mouseY - mouseX * 4, g - mouseX + 40, b + mouseX / 5 + 200);
    translate (width / 2, height / 2);
    rotate (radians(angle) - 10);
    rectMode(CENTER);
    rect (mouseX / 2 , mouseY / 2, sizeX + mouseX / 2, sizeY + mouseY /2 );
    pop();

    push(); // rectangle 5 
    fill (r - mouseY + 40 - mouseX * 7, g + mouseX / 2 + 200, b + mouseX + mouseY - 200);
    translate (width / 2, height / 2);
    rotate (radians(angle) - 30);
    rectMode(CENTER);
    rect (mouseX / 2 , mouseY / 2, sizeX + mouseX / 2, sizeY + mouseY /2 );
    pop();
    
    noStroke();

    var m = max(min ( mouseX, 600 ), 0 ); 
    var size = m * 350 / 600;

    fill(r + mouseY / 4, g - mouseY / 2, b + mouseY); // bigger circle fill
    ellipse (width / 2, height / 2, size); // bigger circle 

    fill(r - mouseY /2 + mouseY, g + mouseY / 4, b + mouseX); // smaller circle fill
    ellipse (width / 2, height / 2, size - 50); // smaller circle 


    var size1 = m * 350 / 600; // size for movaeble circle

    var w = constrain (mouseX, width / 2 - 1, width / 2 + 1); // x constrain
    var z = constrain (mouseY, 200, 250); // y constrain

    fill(r + mouseX, g - mouseY * 4, b + 20); // moveable circle fill 
    ellipse (w, z, size1 - 100); // moveable circle 
    

}

This project was really fun but also significantly harder. The part I struggled with the most was trying to get all the elements in the composition to be symmetrical and rotate / move at the same speed.

Project-03-Dynamic-Drawing

sketch

var angle = 0; //angle of rotation that will be determined by mouseX
var meow = 0; //canvas size that will be filled with cats

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

function draw() {
    background(220);
    //begin of rotate function
    fill("green");
    push();
    angle = angle + mouseX*0.01
    if (mouseX < 300){
       strokeWeight(1);
       rotate(radians(angle));
       rect(mouseX,mouseY,600 - mouseX, 450- mouseY);
    } else{
        rotate(radians(angle));
        strokeWeight(2);
        circle(mouseX,mouseY,mouseX+50,mouseY+70);
    }
    pop(); 
    //end of rotate

  
    //begin of cat eye
    strokeWeight(3);
    line(mouseX,mouseY,mouseX+mouseX*0.5,mouseY-mouseY*0.5);
    line(mouseX,mouseY,mouseX-mouseX*0.5,mouseY-mouseY*0.5);
    line(mouseX,mouseY,mouseX,mouseY-mouseY*0.9);

    strokeWeight(1);
    if (mouseX < 300){
        fill("magenta");
        ellipse(mouseX,mouseY,mouseY,mouseX);
    }else if (mouseX < 450 & mouseX > 300) {
        fill("blue");
        ellipse(mouseX,mouseY,mouseY,mouseX);
    }else {
        fill("orange")
        ellipse(mouseX,mouseY,mouseY,mouseX);
    }
    fill(0);
    ellipse(mouseX,mouseY,mouseX*0.2,mouseY*0.2);
    //end of cat eye



    //begin of cat
    meow = 0 + mouseX*0.7
    for (var x = 5; x < meow; x = x+50){
        for (var y = 5; y < meow; y = y+50){
            if(mouseY < 300){
                push();
                translate(x, y);            
                drawCat();
                pop();
            }
        }   
    }   
    //end of cat

//bottom rectangle and text
fill("brown");
rect(0,400,600,50);

text("Welcome to Meow World",425,390);
}

function drawCat() {
    if (mouseX>500){
        fill(random(0,255),random(0,255),random(0,255));
    }else{
        fill("yellow")
    }
    triangle(7, 0, 0, 7, 14, 7);
    triangle(21,0,28,7,14,7);
    rect(0,7,28,25);
    fill(0);
    ellipse(10,10,4,7);
    ellipse(18,10,4,7);
    ellipse(14,19,6,4);
    line(-3,11,8,15);
    line(8,15,-3,21);
    line(21,15,38,11);
    line(21,15,38,21);
}

Project-03-Dynamic-Drawing

sketch

var r = 255;
var g = 255;
var b = 255;

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

function draw() {
  background (220);
  fill(r,g,b);
  
  //to create that spin that is constant
  rotateX(frameCount*0.01);
  rotateY(frameCount*0.01);
  rotateZ(frameCount*0.01);
  
  //the cones that are in different positions and sizes change with the mouse
  cone(mouseX,mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  
  rotate(radians(90));
   cone(mouseX,mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  
   rotate(radians(90));
   cone(mouseX,mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  
  rotate(radians(90));
  cone(mouseX,mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  
}

// colors change when mouse is pressed 

function mousePressed () {
  
  r -= 20;
  g -= 20;
  b -= 20;
  
}

This was alot of fun! Especially working with 3D objects!

Dynamic Drawing

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

function draw() {
    background(0);
    fill(255, 255, 0);
    var m = max(min(mouseX, 400), 0);
    var size = m * 350.0 / 400.0;
    ellipse(10 + m * 190.0 / 400.0, height/4, size, size); //yellow circle
    fill(255, 0, 0);
    ellipse(200 + m * 190.0 / 400.0, 3*height/4, size, size); //red circle
    size = 350 - size;
    fill(0, 0, 255);
    ellipse(200 + m * 190.0 / 400.0, height/4, size, size); //blue circle
    fill(0,255,0); 
    ellipse(10 + m * 190.0 / 400.0, 3*height/4, size, size); //green circle

}

I really liked the live movements of the squares in the example, so I took my own spin-off of it using circles. The trickiest part was figuring out how to make it change size diagonally.