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.