Shannon Case – Project-02 – Dynamic Drawing

sketch



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

function draw() {
    background(0);
    fill(255);

    var m = max(min(mouseX, 640), 0); //mouse X min/max
    var l = max(min(mouseY, 480),0); //mouse Y min/max
    var sizeX = m * 350 / 400; //size of ellipses
    var sizeY = l * 350 / 400; // size of ellipses
    var colA = random(0,255);
    var colB = random(0,255);
    var colC = random(0,255); // all these create flashing black and white colors
    var colD = random(0,255); //strobe light effect
    var colE = random(0,255);
    var colF = random(0,255);

    //creates groups of flashing ellipses that strech and shrink with movements of the mouse
    fill(colA); 
    ellipse(10+m*190/300, 300, sizeX, sizeX);
    ellipse(30+m*80/460, 80+l*400 / 400, sizeX,sizeY); 

    fill(colB);
    ellipse(200+m*50/200, 250,sizeX,sizeY);
    ellipse(26+m*300/600, 70+l*400 / 500,sizeX,sizeX);

    fill(colC);
    ellipse(20+m*90 / 400, 280,sizeY,sizeX);
    ellipse(30+m*40 / 400, 85+l*450 / 40,sizeX,sizeY);

    fill(colE);
    ellipse(200+m*90 / 400, 200, sizeX, sizeY);
    ellipse(30+m*40 / 430, 80+l*45 / 400,sizeY,sizeX);
    ellipse(30+m*40 / 400, 85+l*450 / 40,sizeX,sizeX);


    fill(colE);
    ellipse(100+m*75 / 400, 50, sizeY,sizeY);
    ellipse(50+m*20 / 460, 550, sizeX,sizeY);
    ellipse(30+m*40 / 400, 600, sizeY,sizeX);

    fill(colF);
    ellipse(20+m*90 / 400, 100,sizeY,sizeY);
    ellipse(30+m*407 / 440, 65+l*350 / 400,sizeX,sizeY);

}

For this project I decided to make a dynamic drawing that stretches and shrinks a series of ellipses when the mouse is moved around the canvas. I was listening to music while I was coding it and it made me think that the shapes were almost dancing around on the screen 🙂

Leave a Reply