let points = []; // Array for hand-drawn kaleidoscope points

let kaleidoscopePoints = []; // Store kaleidoscope points for random generation

let maxRiders = 2; // Limit to two riders for multiplication

let slimeRadius = 30; // Radius for the slime ball rider

​

function setup() {

    createCanvas(800, 600);

    drawKaleidoscope(); // Initial kaleidoscope structure

}

​

function draw() {

    background(220);

​

    // Draw current kaleidoscope

    stroke(0);

    strokeWeight(2);

    noFill();

    drawKaleidoscopeStructure(points); // Draw the kaleidoscope structure

​

    // Update and draw each slime-ball rider

    for (let rider of riders) {

        rider.update();

        rider.display();

    }

​

}

​

// Function to draw a kaleidoscope based on points

function drawKaleidoscopeStructure(points) {

    beginShape();

    for (let p of points) {

        vertex(p.x, p.y);

    }

    endShape(CLOSE);

}

​

// Function to generate a random kaleidoscope

function drawKaleidoscope() {

    points = []; // Clear previous points

​

    // Generate kaleidoscope with random radial symmetry

    let centerX = width / 2;

    let centerY = height / 2;

    let numPoints = 10; // Number of points for symmetry

    let radius = 200;

​

    for (let i = 0; i < numPoints; i++) {

        let angle = TWO_PI * i / numPoints;

        let x = centerX + radius * cos(angle);

        let y = centerY + radius * sin(angle);

        points.push(createVector(x, y));

    }

​

    // Store for future automatic kaleidoscope generation

    kaleidoscopePoints.push([...points]);

​

    // Create an initial rider

    let rider = new SlimeRider(createVector(centerX, centerY), points);

    riders.push(rider);

}

​

// Soft-body Rider (Slime Rider) Class

class SlimeRider {

    constructor(position, pathPoints) {

        this.position = position; // Position of the slime ball rider

        this.pathPoints = pathPoints; // Path points the rider follows

        this.currentPointIndex = 0; // Index of the point being followed

        this.speed = 2; // Speed of the rider

        this.slimeParticles = []; // Particles for soft-body (jelly/slime effect)

        this.initSlimeBody();

    }

​

    // Initialize the slime body with particles

    initSlimeBody() {

        let numParticles = 10;

        let angleStep = TWO_PI / numParticles;

​

        // Create particles around a central point in a circular fashion

        for (let i = 0; i < numParticles; i++) {

            let angle = angleStep * i;

            let x = this.position.x + slimeRadius * cos(angle);

            let y = this.position.y + slimeRadius * sin(angle);

            this.slimeParticles.push(createVector(x, y));

        }

    }

​

    // Update the rider's position and soft-body dynamics

    update() {

        // Move toward the next target point

        if (this.pathPoints.length > 0 && this.currentPointIndex < this.pathPoints.length) {

            let targetPoint = this.pathPoints[this.currentPointIndex];

            let dir = p5.Vector.sub(targetPoint, this.position); // Direction to the target point

​

            if (dir.mag() < this.speed) {

                this.position.set(targetPoint.x, targetPoint.y); // Snap to the target point

                this.currentPointIndex++;

            } else {

                dir.normalize();

                this.position.add(p5.Vector.mult(dir, this.speed)); // Move toward the target

            }

​

            // Update slime particles to follow the central position (jelly/slime effect)

            this.updateSlimeParticles();

        }

    }

​

    // Update soft-body slime particles to create a slime-like behavior

    updateSlimeParticles() {

        let center = this.position;

        let angleStep = TWO_PI / this.slimeParticles.length;

​

        for (let i = 0; i < this.slimeParticles.length; i++) {

            let angle = angleStep * i;

            let targetX = center.x + slimeRadius * cos(angle);

            let targetY = center.y + slimeRadius * sin(angle);

            let dir = createVector(targetX, targetY).sub(this.slimeParticles[i]);

​

            // Apply some spring-like forces for smooth, soft-body movement

            this.slimeParticles[i].add(dir.mult(0.1));

        }

    }

​

    // Display the slime rider as a soft-body structure

    display() {

        noFill();

        stroke(0, 150);

}

}