For this assignment I wanted to go for a calligraphy style visuals. I didn’t want it simply to be a ‘paint tool’ where it simply draws where your mouse is. Instead I decided to make it so that when you clicked down, it would mark the mouse X/Y position then mark down the mouse X/Y position of where you release. I used this to map the general direction and velocity of the object it spawns as well as the speed of which it changes color. I originally had the balls going in straight lines but it seems very unnatural and not very pleasant so I added a random addition/subtraction to the change of the X/Y positions in order to make the balls travel a bit more fluidly. For controls I mapped w to clear objects, q to clear the background to black, and e to clear the background to white. As for controlling which direction the ball goes click and drag the opposite direction you want it to go.
https://editor.p5js.org/khx201/full/lTUgbUxk1
Source Code:
let ball = [];
function setup() {
createCanvas(1920 , 1080);
background(0)
ball.push(new Circle());
}
function draw() {
for (let i = 0; i < ball.length; i++) {
ball[i].move();
ball[i].display();
}
}
//clear screen
let keyb = 81;
let keyw = 69;
let keyc = 87;
function keyPressed() {
if (keyCode == keyb) {
background(0);
return false;
}
if (keyCode == keyw) {
background(255);
return false;
}
if (keyCode == keyc) {
ball = [];
}
}
//end clear screen
//Vars
let startX;
let startY;
let endX;
let endY;
//MousePressed/Release
function mousePressed() {
startX = mouseX;
startY = mouseY;
}
function mouseReleased() {
endX = mouseX;
endY = mouseY;
let b = new Circle();
ball.push(b);
}
//Ball Class
class Circle {
constructor() {
this.x = endX;
this.y = endY;
this.color = 0;
this.diameter = 35;
this.speedX = startX-endX;
this.speedY = startY-endY;
this.colneg = 1;
}
move() {
this.x += constrain(map(this.speedX,-200, 200, -5, 5), -4, 4) + random(-11,11);
this.y += constrain(map(this.speedY,-200, 200, -5, 5), -4, 4) + random(-11,11);
let colchange = constrain(abs((this.x+this.y)/2), 1, 3);
if (this.color >= 250) {
this.colneg = -1;
}
if (this.color <=0) {
this.colneg = 1;
}
this.color += colchange*this.colneg;
fill(this.color)
}
display() {
noStroke();
ellipse(this.x, this.y, this.diameter, this.diameter);
}
}