egrady-Project03-DynamicDrawing

sketch

//Ean Grady
//section B
//egrady@andrew.cmu.edu
//Project-03

function setup() {
    createCanvas(640, 480);
    background(400-mouseX, 200-mouseY, 300);
}

function mouseMoved(){

    var R = (200-mouseX)/2;
    var G = (600-mouseY)/2;
    var B = 200;
    var Rx = (400+mouseX)/2;
    var Gx = (40+mouseY);
    var Bx = 100
    var Rz = (300+mouseX)/2; 
    var Gz = (80+mouseY);
    var Bz = 50

//the squares on each corner of the canvas
    fill(Rx, Gx, Bx);
    noStroke();
    rect (0, 0, 64, 48)
    rect (576, 432, 64, 48)
    rect (0, 432, 64, 48)
    rect (576, 0, 64, 48)

// the longer rectangles on the side
    fill (Rz, Gz, Bz);
    rect (64, 0, 512, 48)
    rect (64, 432, 512, 48)
    rect (0, 48, 64, 384)
    rect (576, 48, 64, 384)

//code for the ellipse used to draw
    noStroke();
    fill(R, G, B);
    ellipse (mouseX, mouseY, 120, 80);

    sizex=mouseX/2;
    if (sizex>120){
    sizex=mouseX/-4;
};
    sizey=mouseY/2;
    if(sizey>200){
    sizey=mouseY/-4;
};
}

For this project, I wanted to create a canvas for which you could draw something using different shapes. It ended up being a little too ambitious for my programming skills, so I instead created a canvas for which you could use an ellipse to just play around with, where it changes colors as you move it around. I had the most difficult time this week trying to come up with the right code to fit what I wanted, I had to go onto the p5.js reference page a lot, but it definitely helped to familiarize myself with the program.