xxxxxxxxxx
95
class Module {
constructor(position, size, c, angle, isStatic) {
this.radius = size.x / 2; // Use half of the width (size.x) as the radius for the circle
this.color = c;
// Create a Matter.js circle body
this.body = Bodies.circle(position.x, position.y, this.radius, { isStatic: isStatic });
Composite.add(engine.world, this.body);
}
update() {
let mou = createVector(mouseX, mouseY);
let pos = createVector(this.body.position.x, this.body.position.y);
let d = mou.dist(pos);
// If the mouse is close to the circle, make it dynamic
if (d < this.radius * 2) {
Matter.Body.setStatic(this.body, false);
}
}
display() {
let position = this.body.position;
let angle = this.body.angle;
ellipseMode(RADIUS);
push();
translate(position.x, position.y);
fill(this.color);
rotate(angle);
ellipse(0, 0, this.radius, this.radius);
pop();
}
}
// Matter.js setup
let Engine = Matter.Engine,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
Composite = Matter.Composite;
let engine = Engine.create();
let runner = Runner.create();
Runner.run(runner, engine);
let palette = ["#00ffff", "#ff00ff", "#ffff00"];
let modules = [];
function setup() {
createCanvas(400, 400);
background("white");
textSize(200);
textAlign(CENTER, CENTER);
textStyle(BOLD);
text("text", width / 2, height / 2);
let gap = 10;
for (let y = 0; y < height; y += gap) {
for (let x = 0; x < width; x += gap) {
let c = get(x, y);
let b = brightness(c);
if (b == 0) {
modules.push(
new Module(
createVector(x, y),
createVector(gap * 0.6, gap), // This determines the radius
random(palette),
random(0, 360),
true
)
);
}
}
}
modules.push(
new Module(
createVector(width / 2, height),
createVector(width, 20), // This creates a ground-like object
"white",
0,
true
)
);
}
function draw() {
background(220);
for (let i = 0; i < modules.length; i++) {
modules[i].display();
modules[i].update();
}
}