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.

Leave a Reply