Final Project

For this final project, I wanted to create a drawing program for users. I wanted to create a platform that inspired users to be creative for themselves. In 2020, practicing my creative interest was a great way for me to keep my mind off of the current social climate, and focus on something that I enjoyed doing – I wanted others to experience that. It is a simple program, but it works, and it is enjoyable. Just run the program, and start drawing!

If I had more time, I would have added stroke features and visuals that effectively guide the user through choosing color and stroke. And perhaps a randomly generating image relating to 2020 asking users to copy the image. 

sketch

var strokeColor;
var hover;
 
function setup() {
    createCanvas(600, 600);
    strokeColor = color(0);
}
 
function draw() {
    
    noStroke();
    fill(0);
    //borders
    rect(0, 0, width, 80);
    rect(0, height - 20, width, 50);
    rect(0, 0, 20, height);
    rect(width - 20, 0, 20, height);
    //text color
    fill(255);
    textSize(10);
    text("Press the circle button to change the color", 20, 55);
    text("Press Q to clear canvas", 20, 70);
    //title
    strokeWeight(5);
    textSize(15);
    text("Draw your favorite moment from 2020!", 20, 30);


    stroke(strokeColor);
    //calculating distance between mouse and circle
    var distance = dist(mouseX, mouseY, 540, 120); 
    //making sure disatnce is less than circle's radius
    if(distance < 15) {
        hover = true;
    } else {
        hover = false;
    }

    push();
    //draw a circle
    ellipseMode(CENTER);
    ellipse(540, 120, 30, 30);
    pop();

    //testing is mouse is over the circle
    if(hover == true) {
        fill(200);
        cursor(HAND);
    } else {
        fill(255); 
        cursor(ARROW); 
    }
    
}
 
function mousePressed() {
    //changing color when button is pressed
    if(hover == true) {
    strokeColor = color(random(255), random(255), random(255));
    }
}

function mouseDragged() { 
    //creating the brush tool
    strokeWeight(8);
    stroke(strokeColor);
    line(mouseX, mouseY, pmouseX, pmouseY);
}
 
function keyPressed() {
    //clearing canvas
    if(key == 'q' || key == 'Q') {
        clear();
    }
}

Leave a Reply