xxxxxxxxxx
111
let particles = [];
let torus = false;
let v = 1.0; // Constant velocity, pixels/step
let bg; // Background graphics for trails
let size = 2; // point size of rendered particles
let fps = 0;
let decayStrength = 5;
function setup() {
createCanvas(windowWidth, windowHeight);
bg = createGraphics(windowWidth, windowHeight); // Initialize background graphics
bg.background(0); // Start with a white background
for (let i = 0; i < 500; i++) {
particles.push(new Particle());
}
textSize(16); // Set the text size for the frame rate display
fill(255); // Set the text color to black
}
function draw() {
decayBackground();
image(bg, 0, 0); // Display the trails image
//bg.loadPixels();
for (let particle of particles) {
particle.update();
}
//bg.updatePixels();
for (let particle of particles) {
particle.show();
}
// Display the frame rate
fps = fps * 0.95 + frameRate() * 0.05;
fill(255);
stroke(0);
text(fps.toFixed(0), 10, 20); // Display frame rate rounded to 2 decimal places
}
function rotateVelocity(vel, angle) {
let radianAngle = radians(angle);
let newVel = createVector(
vel.x * cos(radianAngle) - vel.y * sin(radianAngle),
vel.x * sin(radianAngle) + vel.y * cos(radianAngle)
);
return newVel;
}
function decayBackground() {
bg.noStroke(); // Ensure no outline
bg.fill(0, decayStrength); // Set fill to black with low alpha to create the fading effect
bg.rect(0, 0, bg.width, bg.height); // Cover the entire graphics with the semi-transparent black rectangle
}
class Particle {
constructor() {
this.pos = createVector(random(width), random(height));
this.vel = createVector(0, v);
this.vel = rotateVelocity(this.vel, random(360));
this.type = (random() < 0.5) ? 1: 0;
}
update() {
let radius = 50; // Radius of detection (pixels)
// Read color from background to decide behavior (optional, for advanced uses)
let bgCol = bg.get(this.pos.x, this.pos.y);
// Modify behavior based on color (placeholder logic)
let greenComponent = bgCol[1];
// Steer left for green, right for red
let angleChange = map(bgCol[1], 0, 255, PI, -PI) +
map(bgCol[0], 0, 255, -PI, PI);
this.vel = rotateVelocity(this.vel, angleChange);
// Update background graphics - leave a trail
bgCol[this.type] = 255;
if (bgCol[this.type] > 255) bgCol = 255;
bg.stroke(bgCol); // Trail color
bg.strokeWeight(2); // Trail width
bg.point(this.pos.x, this.pos.y);
//bg.set(this.pos.x, this.pos.y, bgCol);
// Update position
this.pos.add(this.vel);
// Handle edge wrapping
if (torus) {
this.pos.x = (this.pos.x + width) % width;
this.pos.y = (this.pos.y + height) % height;
} else {
if (this.pos.x < 0 || this.pos.x > width) this.vel.x *= -1;
if (this.pos.y < 0 || this.pos.y > height) this.vel.y *= -1;
}
}
show() {
if (this.type == 1) stroke(0, 255, 0);
else stroke(255, 0, 0);
strokeWeight(2);
fill(0,255,255);
ellipse(this.pos.x, this.pos.y, size, size);
}
}