artist
container = container_from(canvas);
sketch = function( p ) {
let circles = [];
p.setup = function() {
p.createCanvas(p.windowWidth, 800);
}
p.draw = function() {
p.background(0);
for(let c of circles) {
c.draw();
}
addCircles(1);
stopExistingCircles();
}
function addCircles(amount) {
for (let i = 0; i < amount; i++) {
let newCircle = new Circle(p.random(p.width), p.random(p.height));
if (!newCircleOverlaps(newCircle)) {
circles.push(newCircle);
}
}
}
function newCircleOverlaps(newCircle) {
for (let otherCircle of circles) {
if (newCircle.overlaps(otherCircle)) {
return true;
}
}
return false;
}
function stopExistingCircles(){
for (let i = 0; i < circles.length - 1; i++) {
let circleOne = circles[i];
for (let j = i + 1; j < circles.length; j++) {
let circleTwo = circles[j];
if(circleOne.overlaps(circleTwo)){
circleOne.isGrowing = false;
circleTwo.isGrowing = false;
}
}
}
}
class Circle {
constructor(x, y) {
this.x = x;
this.y = y;
this.r = 5;
this.isGrowing = true;
this.color = p.color(p.random(255), p.random(255), p.random(255));
}
draw() {
p.fill(this.color);
p.circle(this.x, this.y, this.r * 2);
if(this.isGrowing){
this.r += 1;
}
}
overlaps(otherCircle){
return p.dist(this.x, this.y, otherCircle.x, otherCircle.y)
< this.r + otherCircle.r + 2;
}
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
