let origin;

let prevPos = [];  // Array to hold previous positions of particles

let scalingFactor = 70;

let wind;  // Wind force vector

let windSlider;  // Slider for adjusting wind force

let noiseSlider;  // Slider for adjusting noise magnitude

let noiseOffset = 0;  // Offset for Perlin noise

let numParticles = 3;  // Number of particles

​

// Time offsets for each particle

let timeOffsets = [-0.1, 0, 0.1];  // Adjust these values for different offsets

​

function setup() {

  createCanvas(700, 700, "SVG");

  origin = createVector(width / 2, height / 2);  // Center of the canvas

  //background(50);  // Set initial background

  stroke(0);  // White color for the lines

  strokeWeight(1);  // Line thickness

  noFill();  // No fill for shapes

  let button = createButton("Download Image");

  button.mousePressed(downloadImage);

  // Create sliders

  windSlider = createSlider(0, 0.5, 0, 0.01);  // Wind strength

  windSlider.position(10, 10);

  noiseSlider = createSlider(0, 10, 0, 0.1);  // Noise magnitude

  noiseSlider.position(10, 40);  // Position the slider on the canvas

}

​

function draw() {

  push();

  fill(255);

  stroke(0);

  strokeWeight(1);

  text("Wind", 10, 10);

  text("Noise", 10, 40);

  ////

  fill(0);

  textSize(24);

  textAlign(CENTER, CENTER);

  strokeWeight(2);

  //text("lore of ipsum.", width/2, height/2);

  pop();

  // Fading background to create a trail effect

  //background(0, 10);  // Slightly transparent background for fading trails

  wind = createVector(0.1, 0);  // Initial wind force

  // Adjust wind force based on the slider value

  let windStrength = windSlider.value();

  wind.set(windStrength * cos(frameCount * 0.01), windStrength * sin(frameCount * 0.01));  // Wind direction varies

  // Loop through each particle

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

    // Calculate the current time for this particle

    let currentT = t + timeOffsets[i];  // Apply time offset for each particle

​

    // Parametric equations for x(t) and y(t) with noise modifier

    let noiseMagnitude = noiseSlider.value();

    let xNoise = map(noise(noiseOffset), 0, 1, -noiseMagnitude, noiseMagnitude);

    let yNoise = map(noise(noiseOffset + 100), 0, 1, -noiseMagnitude, noiseMagnitude);  // Offset for y noise

    let x = 2.5 * pow(Math.sin(-5 * currentT), 2) * pow(2, Math.cos(Math.cos(4.28 * 2.3 * currentT))) + xNoise;

    let y = 2.5 * Math.sin(Math.sin(-5 * currentT)) * pow(Math.cos(4.28 * 2.3 * currentT), 2) + yNoise;

    // Create vector from parametric values

    let pos = createVector(x, y);

    // Smoothly apply wind force to the position

    let windEffect = wind.copy().mult(0.05);  // Make the wind effect less pronounced

    pos.add(windEffect);  

​

    // Scale the vector for better visibility on the canvas

    pos.mult(scalingFactor);

    // Translate the vector to the center of the canvas

    pos.add(origin);

​

    // Draw the shape and rotate it 90 degrees for each quadrant

    for (let j = 0; j < 4; j++) {

      push();  // Save the current drawing state

      translate(width / 2, height / 2);  // Move to the center

      rotate(HALF_PI * j);  // Rotate by 90 degrees * j

      translate(-width / 2, -height / 2);  // Move back to original position

​

      // Draw lines between consecutive points

      if (t > -6 && prevPos[i]) {

        line(prevPos[i].x, prevPos[i].y, pos.x, pos.y);  // Draw line between previous and current position

      }

      pop();  // Restore the original drawing state

    }

​

    // Store the current position for the next iteration

    prevPos[i] = pos.copy();

  }

​

  // Increment t

  t += 0.005;

​

  // Reset t when it exceeds 6 to loop the animation

  if (t > 6) {

    t = -6;  // Reset t to -6

    prevPos = Array(numParticles).fill(null);  // Reset prevPos for all particles

  }

​

  // Increment noise offset for smooth transitions

  noiseOffset += 0.01;  // Control the speed of the noise variation

}

​

function keyPressed() {

  background(50);

}

​

function mouseIsPressed() {

  noLoop();

}

​

function downloadImage() {

  save("lines.svg");

}