let rider; // Rider position

let riderImage; // Variable to hold the rider image

let riderSpeed = 2; // Speed of the rider

let flowField; // Flow field array

let cols, rows; // Number of columns and rows for the flow field

let flowScale = 0.1; // Scale for the flow field

let flowSpeed = 0.01; // Speed at which the flow field moves

let score = 0; // Player's score

​

function preload() {

    riderImage = loadImage('catt.png'); // Load the cat image

}

​

function setup() {

    createCanvas(800, 600);

    rider = createVector(50, height / 2); // Start position of the rider

    cols = floor(width / 20); // Number of columns

    rows = floor(height / 20); // Number of rows

    flowField = Array(cols * rows); // Initialize flow field array

    generateFlowField(); // Generate the initial flow field

}

​

function draw() {

    background(220);

​

    // Update the flow field continuously

    updateFlowField();

​

    // Draw the flow field

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

        let x = (i % cols) * 20; // Calculate x position

        let y = floor(i / cols) * 20; // Calculate y position

        stroke(0, 50);

        strokeWeight(2);

        let v = flowField[i]; // Get flow vector

        line(x, y, x + v.x * 10, y + v.y * 10); // Draw the flow vector

    }

​

    // Draw the track (motifs)

    stroke(0);

    strokeWeight(4);

    noFill();

    beginShape();

    for (let p of points) {

        vertex(p.x, p.y);

    }

    endShape();

​

    // Update rider's position based on the flow field

    if (points.length > 0) {

        let targetPoint = points[points.length - 1]; // Follow the last point

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

​

        // Move towards the target point

        if (dir.mag() < riderSpeed) {

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

            points.pop(); // Remove the reached point

            score++; // Increase score

        } else {

            dir.normalize(); // Normalize the direction

            rider.add(p5.Vector.mult(dir, riderSpeed)); // Move rider towards target

        }

    }

​

    // Draw the rider image

    imageMode(CENTER);

    image(riderImage, rider.x, rider.y, 50, 50); // Draw the rider image (adjust size as needed)

​

    // Display score

    fill(0);

    textSize(24);

    text(`Score: ${score}`, 10, 30);

}

​

// Function to capture points of the track when mouse is pressed

function mouseDragged() {

    points.push(createVector(mouseX, mouseY)); // Add new point at mouse position

}

​

// Function to clear the track

function keyPressed() {

    if (key === 'c' || key === 'C') {

        points = []; // Clear the points array

        rider.set(50, height / 2); // Reset rider's position

        score = 0; // Reset score

    }

}

​

// Generate a flow field with random vectors

function generateFlowField() {

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

        let angle = noise(i * flowScale) * TWO_PI; // Get random angle from noise

        let v = p5.Vector.fromAngle(angle); // Create vector from angle

        flowField[i] = v; // Store in flow field

    }

}

​

// Update the flow field continuously

function updateFlowField() {

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

        let angle = noise(i * flowScale + frameCount * flowSpeed) * TWO_PI; // Get moving angle from noise

        let v = p5.Vector.fromAngle(angle); // Create vector from angle

        flowField[i] = v; // Update flow field

    }

}

​