Category: Project-03-Dynamic-Drawing

sketch

//Michelle Dang (mtdang) section D
var r = 0; //red
var g = 0; //green
var b = 0; //blue 
var s = 2; //stroke weight

var f = 0; //fill color black

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


    }

function draw() {
    translate(width/2, height/2); // center origin
    fill(f, 50);
    stroke(r, g, b, 100); 
    strokeWeight(s);
    rotate(mouseX); //rotate ellipse
    ellipse(0, 0, mouseY, mouseX); //elipse size based on mouse
    ellipse(0, 0, mouseX, mouseY); //elipse size based on mouse
    ellipse(0, 0, 30,30); // center ellipse for clear indication of stroke weight change

    mouseX -= .5;




    if (mouseX < 450 & mouseX > 0 && mouseY < 600 && mouseY > 0) { //when mouse is farthest form center, make ellipse purple
        r=127;
        g=0;
        b = 255;
    }
        if (mouseX<405 & mouseX > 45 && mouseY < 540 && mouseY > 60 ) { //blue stroke
        r = 0;
        g = 0;
        b = 255;
    }
    if (mouseX < 360 & mouseX > 90 && mouseY < 480 && mouseY > 120) { //green stroke
        r = 0;
        g = 255;
        b = 0;
 }  if (mouseX < 315 & mouseX > 135 && mouseY < 420 && mouseY > 180) { //orange stroke
        r = 255;
        g = 128;
        b = 0;
    }
    if (mouseX < 270 & mouseX > 180 && mouseY < 360  && mouseY > 240) { // when mouse is closest to center, make ellipses red 
        r = 255;
        g = 0;
        b = 0;
    
    }
}

    function mousePressed() {
      s = random(1, 20); // if mouse is pressed, randomly change strokeWeight
    }

Dynamic Drawing

function setup() {
    createCanvas(500, 500);
    
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {

    //setting up the background color
    let firstColor = color(45,0,85); //first color to be blended from
    let secondColor = color(219,146,7); //second color to be blended from
    bldval = map(mouseX, 0,width,0,1,true); //the blending proportion 
    bColor = lerpColor(firstColor,secondColor,bldval); // the background color based on mouseX
    background(bColor); //setting background 

    //vertical and horizontal rectangle
    noStroke()
    rectColor = lerpColor(secondColor,firstColor,bldval);
    move = map(mouseY,0,height,300,320,true); //constraining the position of the horizintal rectangle
    fill(rectColor);
    rect(mouseX-40,0,80,height); //vertical rectangle
    rect(0,move-40,width,80); //horizontal rectangle

    //circle on top right moving to top left
    fill(255);
    ellipse(450 - mouseX,100,30,30);
    fill(rectColor);
    crcWidth = 100 - mouseX/2;
    crcHeight = 200 - mouseX/2;
    push();
    translate(450 - mouseX,100);
    rotate(0+mouseX);
    ellipse(0,0,crcWidth,crcHeight);
    pop();
      
    //rotating white circles around mouse X and mouse Y
    push();
    fill(255)
    translate(mouseX,mouseY);
    rotate(mouseX/10);
    ellipse(0,-30,+10,10);
    ellipse(0,30,-10,10);

}

I enjoyed doing this. The hardest idea was possibly to start the project. After that it was pretty quick.

dynamic drawing

//Max Stockdale, Section D

var R = 50; //color   
var G = 100;
var B = 255;

var angle = 0; 

var xs = 15; //scale
var ys = 20;

var circlesize = 80;

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


function draw() {

    if (mouseX < (width / 2) & mouseY < (height / 2)){   //background changes color in different quadrants 
        background(251,215,90);
    } else if (mouseX < (width / 2) & mouseY > (height / 2)){
        background(156,158,251);
    } else if (mouseX > (width / 2) & mouseY < (height / 2)){
        background(198,149,198);
    } else {
        background(36,110,237);
    }

    noStroke();


    var m = max(min(mouseX, 600), 0);  //maintaing size of ellipses
    var size = m * 300 / 600;


    fill(R + mouseX / 2, G + mouseX / 2, B + mouseX / 2); //ellipses
    ellipse(width / 2, height / 2, size, size);

    fill(R + mouseX / 2, G + mouseX / 2, B + mouseX);
    ellipse(width / 2, height / 2, size * 0.9 , size * 0.9);

    fill(R + mouseX, G + mouseX / 2, B + mouseX / 2);
    ellipse(width / 2, height / 2, size * 0.7 , size * 0.7);

    fill(R + mouseX / 2, G + mouseX, B + mouseX / 2);
    ellipse(width / 2, height / 2, size * 0.5 , size * 0.5);

    fill(R + mouseY / 2, G + mouseY, B + mouseX / 2);
    ellipse(550, 225, size * 0.1 , size * 0.1);

    fill(R + mouseY /2, G + mouseY, B + mouseX /2);
    ellipse(30, 225, size * 0.1, size * 0.1);
    
    fill(255);
    rect(mouseX, mouseY, 50, 50); //x,y position square 1


    //side circle_1
    translate(-150, + 100);
    
    fill(R + mouseX / 2, G + mouseX / 2, B + mouseX / 2);//ellipses
    ellipse(width / 2, height / 2, size, size);

    
    fill(R + mouseX / 2, G + mouseX / 2, B + mouseX);
    ellipse(width / 2, height / 2, size * 0.9 , size * 0.9);

    
    fill(R + mouseX, G + mouseX / 2, B + mouseX / 2);
    ellipse(width / 2, height / 2, size * 0.7 , size * 0.7);


    fill(R + mouseX / 2, G + mouseX, B + mouseX / 2);
    ellipse(width / 2, height / 2, size * 0.5 , size * 0.5);
    
    fill(255);
    rect(mouseX , mouseY, 50, 50); //x, y position square 2
    
    


    //side circle_2
    translate(+300, -200);
    //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);


    fill(255);
    rect(mouseX, mouseY, 50, 50); //x,y position square 3


    fill(36,110,237); //spinning square(blue)
    push();
    translate(-75,+175);
    rotate(radians(angle));
    rectMode(CENTER); 
    rect(0,0,50,50);
    pop();
    angle += 5;  

    fill(251,215,90); //spinning square(yellow)
    push();
    translate(+375,+475);
    rotate(radians(angle));
    rectMode(CENTER); 
    rect(0,0,50,50);
    pop();
    angle += 5;  

    
    angle = angle + 0.5;  
    xs = width - (0.5 * mouseX); //scale based on x
    ys = height - (0.5 * mouseY); //scale based on y

}

For this project, I wanted to play around with the scale of circles and the gradient of the colors. I also wanted to include a background that changes color based on the mouse position, with spinning squares on the corners.