let questions = [

  "Choose an element: fire, water, earth, air",

  "Choose a virtue: courage, wisdom, kindness, resilience",

  "Choose a vibe: calm, energy, mystery, joy",

  "Choose a feeling: love, peace, strength, hope"

];

let answers = [];

let symbols = [];

let centerX, centerY;

​

function setup() {

  createCanvas(600, 600);

  background(255);

  // Center of canvas for symbols to gravitate towards

  centerX = width / 2;

  centerY = height / 2;

​

  askQuestions(); // Prompt for answers

  generateAntingAnting(); // Generate fine-line symbols based on answers

}

​

function askQuestions() {

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

    let answer = prompt(questions[i]);

    if (answer) {

      answers.push(answer.toLowerCase());

    } else {

      answers.push("");

    }

  }

}

​

function draw() {

  background(255, 10); // Light fade for gentle trails

​

  // Draw each symbol with movement and rotation

  for (let s of symbols) {

    s.update();

    s.display();

  }

}

​

function generateAntingAnting() {

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

    let theme = answers[i];

    createSymbol(theme);

  }

}

​

function createSymbol(theme) {

  let x = random(width);

  let y = random(height);

  let size = random(40, 80); // Varying sizes for symbols

  let type;

  if (theme === "fire" || theme === "courage" || theme === "energy" || theme === "strength") {

    type = "spikyCircle";

  } else if (theme === "water" || theme === "wisdom" || theme === "calm" || theme === "peace") {

    type = "waveCircle";

  } else if (theme === "earth" || theme === "kindness" || theme === "mystery" || theme === "love") {

    type = "flower";

  } else if (theme === "air" || theme === "resilience" || theme === "joy" || theme === "hope") {

    type = "star";

  }

  symbols.push(new FineLineSymbol(x, y, size, type));

}

​

// FineLineSymbol class for fine-line shapes and patterns

class FineLineSymbol {

  constructor(x, y, size, type) {

    this.x = x;

    this.y = y;

    this.size = size;

    this.type = type;

    this.angle = random(TWO_PI);

    this.rotationSpeed = random(-0.01, 0.01); // Slower rotation

  }

  update() {

    let dx = centerX - this.x;

    let dy = centerY - this.y;

    let distance = dist(this.x, this.y, centerX, centerY);

    let pullStrength = map(distance, 0, width / 2, 0, 0.02); // Subtle pull

    this.x += dx * pullStrength;

    this.y += dy * pullStrength;

​

    this.angle += this.rotationSpeed;

  }

​

  display() {

    push();

    translate(this.x, this.y);

    rotate(this.angle);

    noFill();

    stroke(0);

    strokeWeight(1); // Fine line

​

    // Display based on type

    if (this.type === "spikyCircle") {

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

        let angle = i * PI / 4;

        line(0, 0, cos(angle) * this.size, sin(angle) * this.size);

      }

      ellipse(0, 0, this.size * 0.5, this.size * 0.5);

    } else if (this.type === "waveCircle") {

      for (let r = this.size * 0.2; r < this.size; r += this.size * 0.2) {

        arc(0, 0, r, r, PI / 4, (3 * PI) / 4);

        arc(0, 0, r, r, (5 * PI) / 4, (7 * PI) / 4);

      }

    } else if (this.type === "flower") {

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

        let angle = i * PI / 3;

        arc(cos(angle) * this.size * 0.3, sin(angle) * this.size * 0.3, 

            this.size * 0.6, this.size * 0.6, angle, angle + PI);

      }

    } else if (this.type === "star") {

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

        let angle = i * PI / 6;

        line(0, 0, cos(angle) * this.size, sin(angle) * this.size);

      }

    }

    pop();

  }

}

​

function keyPressed() {

  if (key === 's') {

    saveCanvas('my-anting-anting', 'png');

  }

}

​