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 shapes = []; // Store generated shapes

let centerX, centerY;

​

function setup() {

  createCanvas(600, 600);

  background(255);

  // Calculate center of canvas

  centerX = width / 2;

  centerY = height / 2;

​

  askQuestions(); // Prompt for answers

  generateAntingAnting(); // Generate shapes 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); // Faint background to create motion trails

​

  // Draw and update each shape

  for (let s of shapes) {

    s.update();

    s.display();

  }

  // Draw connections between shapes to symbolize unity

  stroke(100, 50);

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

    for (let j = i + 1; j < shapes.length; j++) {

      line(shapes[i].x, shapes[i].y, shapes[j].x, shapes[j].y);

    }

  }

}

​

function generateAntingAnting() {

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

    let theme = answers[i];

    createShape(theme);

  }

}

​

function createShape(theme) {

  let x = random(width);

  let y = random(height);

  let size = random(30, 60);

  let shapeColor, type;

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

    shapeColor = color(255, random(100, 200), 0);

    type = "triangle";

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

    shapeColor = color(0, 100, 255, 150);

    type = "circle";

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

    shapeColor = color(100, 50, 0);

    type = "square";

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

    shapeColor = color(200);

    type = "line";

  }

  // Create a new Shape object and add it to shapes array

  shapes.push(new Shape(x, y, size, shapeColor, type));

}

​

// Shape class for more dynamic interactions

class Shape {

  constructor(x, y, size, shapeColor, type) {

    this.x = x;

    this.y = y;

    this.size = size;

    this.shapeColor = shapeColor;

    this.type = type;

    this.angle = random(TWO_PI);

    this.rotationSpeed = random(-0.02, 0.02); // Slight rotation

  }

  update() {

    // Attraction to center

    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.05); // Stronger pull the farther it is

    this.x += dx * pullStrength;

    this.y += dy * pullStrength;

​

    // Rotate shape slightly

    this.angle += this.rotationSpeed;

  }

​

  display() {

    push();

    translate(this.x, this.y);

    rotate(this.angle);

    fill(this.shapeColor);

    noStroke();

​

    // Display based on type

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

      triangle(-this.size / 2, this.size / 2, 0, -this.size / 2, this.size / 2, this.size / 2);

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

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

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

      rectMode(CENTER);

      rect(0, 0, this.size, this.size);

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

      stroke(0);

      line(-this.size / 2, -this.size / 2, this.size / 2, this.size / 2);

    }

    pop();

  }

}

​

function keyPressed() {

  if (key === 's') {

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

  }

}

​