105 lines
2.2 KiB
JavaScript
105 lines
2.2 KiB
JavaScript
|
|
||
|
|
let circles = [];
|
||
|
|
|
||
|
|
function setup() {
|
||
|
|
createCanvas(1920,880);
|
||
|
|
background(51);
|
||
|
|
dl = new drawline();
|
||
|
|
lengthSlider = createSlider(1,150,10);
|
||
|
|
sizeSlider = createSlider(1,300,100);
|
||
|
|
clearButton = createButton("clear");
|
||
|
|
}
|
||
|
|
|
||
|
|
function draw() {
|
||
|
|
const l = lengthSlider.value();
|
||
|
|
const s = sizeSlider.value();
|
||
|
|
|
||
|
|
background(51);
|
||
|
|
|
||
|
|
dl.update(s, l);
|
||
|
|
|
||
|
|
for (let p of circles) {
|
||
|
|
p.show();
|
||
|
|
}
|
||
|
|
//print(clearButton.value());
|
||
|
|
clearButton.mousePressed(cleararray);
|
||
|
|
}
|
||
|
|
function keyPressed() {
|
||
|
|
if(keyCode===32){
|
||
|
|
cleararray();
|
||
|
|
//background(51);
|
||
|
|
}
|
||
|
|
else
|
||
|
|
print("not");
|
||
|
|
return false; // prevent any default behaviour
|
||
|
|
}
|
||
|
|
function cleararray(){
|
||
|
|
circles = [];
|
||
|
|
}
|
||
|
|
|
||
|
|
class drawline {
|
||
|
|
constructor() {
|
||
|
|
var dir = [1, 1, 1];
|
||
|
|
var color = [142, 212, 111];
|
||
|
|
this.update = function (size, length) {
|
||
|
|
this.size = size;
|
||
|
|
this.length = length;
|
||
|
|
if (color[0] > 255)
|
||
|
|
dir[0] = 0;
|
||
|
|
if (color[0] < 50)
|
||
|
|
dir[0] = 1;
|
||
|
|
if (color[1] > 255)
|
||
|
|
dir[1] = 0;
|
||
|
|
if (color[1] < 50)
|
||
|
|
dir[1] = 1;
|
||
|
|
if (color[2] > 255)
|
||
|
|
dir[2] = 0;
|
||
|
|
if (color[2] < 50)
|
||
|
|
dir[2] = 1;
|
||
|
|
if (dir[0] == 1)
|
||
|
|
color[0] += random(1, 5);
|
||
|
|
else
|
||
|
|
color[0] -= random(1, 5);
|
||
|
|
if (dir[1] == 1)
|
||
|
|
color[1] += random(1, 5);
|
||
|
|
else
|
||
|
|
color[1] -= random(1, 5);
|
||
|
|
if (dir[2] == 1)
|
||
|
|
color[2] += random(1, 5);
|
||
|
|
else
|
||
|
|
color[2] -= random(1, 5);
|
||
|
|
|
||
|
|
//print(color[0] + ' ' + color[1] + ' ' + color[2]);
|
||
|
|
|
||
|
|
stroke(255, 255, 255);
|
||
|
|
//fill(color[0], color[1], color[2]);
|
||
|
|
|
||
|
|
if ((mouseIsPressed)&&(mouseY<=880)){
|
||
|
|
if(circles.length>=length){
|
||
|
|
circles.shift();
|
||
|
|
circles.push(new circle(size, size, color[0],color[1],color[2], mouseX, mouseY));
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
circles.push(new circle(size, size, color[0],color[1],color[2], mouseX, mouseY));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
class circle{
|
||
|
|
constructor(sizex, sizey, r, g, b, mx, my){
|
||
|
|
this.sizex = sizex;
|
||
|
|
this.sizey = sizey;
|
||
|
|
this.r = r;
|
||
|
|
this.g = g;
|
||
|
|
this.b = b;
|
||
|
|
this.mx = mx;
|
||
|
|
this.my = my;
|
||
|
|
}
|
||
|
|
|
||
|
|
show(){
|
||
|
|
fill(this.r,this.g,this.b);
|
||
|
|
ellipse(this.mx,this.my,this.sizex,this.sizey);
|
||
|
|
}
|
||
|
|
}
|