"use strict"; let fpsdisp; let dotsdisp; var dots = []; var rad = 5; var num, red, green, blue; var w, h; class Dot { constructor(_x, _y, _rad, _red, _green, _blue) { this.x = _x; this.y = _y; this.rad = _rad; this.red = _red; this.green = _green; this.blue = _blue; this.speedH = random(-2,2); this.speedV = random(-2,2); } show() { noStroke(); fill(this.red, this.green, this.blue); ellipse(this.x, this.y, this.rad, this.rad) } update() { this.x += this.speedH; this.y += this.speedV; } openSpace() { // if (mouseIsPressed) { if(dist(mouseX, mouseY, this.x, this.y) < width/8) { if (mouseX < this.x) { this.x += 8; }; if (mouseX > this.x) { this.x -= 8; }; if (mouseY < this.y) { this.y += 8; }; if (mouseY > this.y) { this.y -= 8; }; } // } } } function setup() { if (windowWidth > displayWidth) { w = displayWidth; h = displayHeight*0.8; } else { w = windowWidth; h = windowHeight } createCanvas(w, h); fpsdisp = createSpan().id("Fps"); dotsdisp = createSpan().id("dots"); if (h > w) { num = h/5; } else { num = w/5; }; red = random(100,255); green = random(100,255); blue = random(100,255); for (let i=0; i= width || obj.x <= 0) { obj.speedH *= -1; } if (obj.y >= height || obj.y <= 0) { obj.speedV *= -1; } } function mouseDragged() { for (let dot of dots) { dot.openSpace(); } return false; } function connect(obj1, obj2) { if (dist (obj1.x, obj1.y, obj2.x, obj2.y) < w/7) { stroke(green, blue, red); strokeWeight(.2); line(obj1.x, obj1.y, obj2.x, obj2.y); } } function escaped(obj, index) { if (obj.x < -rad || obj.x > width+rad) { dots.splice(index,1); dots.push(new Dot(random(width), random(height), rad, rad)); } if (obj.y < -rad || obj.y > height+rad) { dots.splice(index,1); dots.push(new Dot(random(width), random(height), rad, rad)); } } // uses whole window size, even after resize function windowResized() { resizeCanvas(windowWidth, windowHeight); }

Connected dots