Jamie Dorst Project 03 Dynamic Drawing

sketch

/*
Jamie Dorst
Section A
jdorst@andrew.cmu.edu
Project-03
*/

// variables
var saturation1 = 50
var hue1 = 0
var radius = 50
var lineX1 = 100

var ballX1 = 320
var ballY1 = 240
var ballX2 = 240
var ballY2 = 320
var ballX3 = 150
var ballY3 = 300


function setup() {
    createCanvas(640, 480);
    text("p5.js vers 0.7.1 test.", 10, 15);
}

function draw() {
    stroke(255);
    strokeCap(PROJECT);
    colorMode(HSB);
    background(hue1, saturation1, 100);

    // change background color as mouse moves
    // change mouseY to change hue
    // change mouseX to change saturation
    if (mouseX >= 0 & mouseX <= width && mouseY >= 0 && mouseY <= height) {
        saturation1 = mouseX / 5
        hue1 = mouseY
    }

    // draw white line when mouse goes over it
    // lines are 30 away from each other, all the same length
    // stroke increases by 0.2 with each line
    if (mouseX >= 70) {
        line(70, 40, 70, 440);
        strokeWeight(2);
    }
    if (mouseX >= 100) {
        line(100, 40, 100, 440);
        strokeWeight(2.2);
    }
    if (mouseX >= 130) {
        line(130, 40, 130, 440);
        strokeWeight(2.4);
    }
    if (mouseX >= 160) {
        line(160, 40, 160, 440);
        strokeWeight(2.6);
    }
    if (mouseX >= 190) {
        line(190, 40, 190, 440);
        strokeWeight(2.8);
    }
    if (mouseX >= 220) {
        line(220, 40, 220, 440);
        strokeWeight(3);
    }
    if (mouseX >= 250) {
        line(250, 40, 250, 440);
        strokeWeight(3.2);
    }
    if (mouseX >= 280) {
        line(280, 40, 280, 440);
        strokeWeight(3.4);
    }
    if (mouseX >= 310) {
        line(310, 40, 310, 440);
        strokeWeight(3.6);
    }
    if (mouseX >= 340) {
        line(340, 40, 340, 440);
        strokeWeight(3.8);
    }
    if (mouseX >= 370) {
        line(370, 40, 370, 440);
        strokeWeight(4);
    }
    if (mouseX >= 400) {
        line(400, 40, 400, 440);
        strokeWeight(4.2);
    }
    if (mouseX >= 430) {
        line(430, 40, 430, 440);
        strokeWeight(4.4);
    }
    if (mouseX >= 460) {
        line(460, 40, 460, 440);
        strokeWeight(4.6);
    }
    if (mouseX >= 490) {
        line(490, 40, 490, 440);
        strokeWeight(4.8);
    }
    if (mouseX >= 520) {
        line(520, 40, 520, 440);
        strokeWeight(5);
    }
    
    // erase black line when mouse goes over it
    // lines are 30 away from each other, 15 away from the white lines, all the same length
    stroke(0, 0, 0);

    if (mouseX <= 115) {
        line(115, 40, 115, 440);
    }
    if (mouseX <= 145) {
        line(145, 40, 145, 440);
    }
    if (mouseX <= 175) {
        line(175, 40, 175, 440);
    }
    if (mouseX <= 205) {
        line(205, 40, 205, 440);
    }
    if (mouseX <= 235) {
        line(235, 40, 235, 440);
    }
    if (mouseX <= 265) {
        line(265, 40, 265, 440);
    }
    if (mouseX <= 295) {
        line(295, 40, 295, 440);
    }
    if (mouseX <= 325) {
        line(325, 40, 325, 440);
    }
    if (mouseX <= 355) {
        line(355, 40, 355, 440);
    }
    if (mouseX <= 385) {
        line(385, 40, 385, 440);
    }
    if (mouseX <= 415) {
        line(415, 40, 415, 440);
    }
    if (mouseX <= 445) {
        line(445, 40, 445, 440);
    }
    if (mouseX <= 475) {
        line(475, 40, 475, 440);
    }
    if (mouseX <= 505) {
        line(505, 40, 505, 440);
    }
    if (mouseX <= 535) {
        line(535, 40, 535, 440);
    }
    if (mouseX <= 565) {
        line(565, 40, 565, 440);
    }

    // draw medium ball
    // same as background color
    noStroke();
    fill(hue1, saturation1, 100);
    ellipse(ballX1, ballY1, 100, 100);
    // ball coordinates relative to mouse coordinates
    ballX1 = mouseX + 150
    ballY1 = mouseY * 3 - 400

    // draw biggest ball
    // same as background color
    ellipse(ballX2, ballY2, 180, 180);
    // ball coordinates relative to mouse coordinates
    ballX2 = mouseX / 2 + 200
    ballY2 = mouseY / 4 + 200

    // draw smallest ball
    // same as background color
    ellipse(ballX3, ballY3, 60, 60);
    // ball relative to mouse coordinates
    ballX3 = mouseX * 3 - 300
    ballY3 = mouseY / 2
}

I started this project by making the background change and then adding the lines. Then I had the idea to add the circles so that it looked like they weren’t really there, it was just their silhouettes matching the background. I first made the balls bounce around because I thought that looked cool, but then I realized we weren’t supposed to have any elements that were random, so I changed it so that they are attached to the mouse coordinates. I also tried making the line position a variable so that I wouldn’t have to type in numbers for every line, but I couldn’t figure out a way to make that work.