Just a rock simulator

function setup() {
  createCanvas(windowWidth, windowHeight);
  // Tip: Use windowWidth/windowHeight for responsive canvas

  // Generate the rock's vertices once in setup()
  // This prevents the rock from changing shape every frame, avoiding flicker
  generateRock();

  // Generate cloud data once in setup()
  generateClouds();

  // Generate people data once in setup()
  generatePeople();

  // Set the rock's color (a shade of gray/brown)
  rockColor = color(random(80, 120), random(80, 120), random(80, 120));

  // --- MODIFIED ROCK POSITION CALCULATION ---
  let maxY = 0;
  for (let v of rockVertices) {
    if (v.y > maxY) {
      maxY = v.y; // Find the lowest (largest Y) point of the rock's shape relative to its center
    }
  }
  // Position the rock horizontally in the center, and vertically so its lowest point
  // sits on the grass line (height * 0.7)
  rockPosition = createVector(width / 2, height * 0.7 - maxY);
  // ------------------------------------------
}

function draw() {
  // 1. Draw the Sky
  background(135, 206, 235); // Sky blue

  // 2. Draw the Grass
  fill(50, 160, 50);       // Green grass color
  noStroke();             // No outline for the grass
  rect(0, height * 0.7, width, height * 0.3); // Draw a rectangle from 70% down

  // 3. Draw the Sun
  fill(255, 200, 0);       // Yellow sun color
  noStroke();             // No outline for the sun
  circle(width * 0.15, height * 0.15, min(width, height) * 0.1); // Top-left, responsive size

  // 4. Draw the Clouds
  drawClouds();

  // 5. Draw the Rock (existing logic)
  drawRock();

  // 6. Draw the People (on top of the rock)
  drawPeople();
}

function generateRock() {
  rockVertices = []; // Clear any previous vertices

  // Approximate radius of the rock
  currentRockRadius = min(width, height) * 0.2; // Store for other elements
  let numPoints = floor(random(10, 20)); // Number of points for the rock's outline

  // Generate vertices using polar coordinates with some randomness
  for (let i = 0; i < numPoints; i++) {
    let angle = map(i, 0, numPoints, 0, TWO_PI);
    let r = currentRockRadius + random(-currentRockRadius * 0.2, currentRockRadius * 0.2); // Add irregularity to radius
    let x = r * cos(angle);
    let y = r * sin(angle);
    rockVertices.push(createVector(x, y));
  }
}

function drawRock() {
  push(); // Isolate drawing styles
  translate(rockPosition.x, rockPosition.y); // Move to the rock's position

  fill(rockColor);       // Use the generated rock color
  stroke(rockColor - 30); // Slightly darker stroke
  strokeWeight(2);       // Thin stroke

  beginShape(); // Start drawing a custom shape
  for (let v of rockVertices) {
    vertex(v.x, v.y); // Add each generated vertex to the shape
  }
  endShape(CLOSE); // Close the shape

  pop(); // Restore previous drawing styles
}

function generateClouds() {
  clouds = [];
  let numClouds = floor(random(3, 6)); // 3 to 5 clouds
  for (let i = 0; i < numClouds; i++) {
    let cloud = {};
    cloud.x = random(width * 0.1, width * 0.9);
    cloud.y = random(height * 0.1, height * 0.3); // Top portion of the canvas
    cloud.baseRadius = min(width, height) * random(0.05, 0.1); // Base size for the cloud

    cloud.lumps = [];
    let numLumps = floor(random(3, 6)); // 3 to 5 ellipses (lumps) per cloud
    for (let j = 0; j < numLumps; j++) {
      let lump = {};
      lump.offsetX = random(-cloud.baseRadius * 0.8, cloud.baseRadius * 0.8);
      lump.offsetY = random(-cloud.baseRadius * 0.5, cloud.baseRadius * 0.5);
      lump.radius = cloud.baseRadius * random(0.5, 1.2); // Vary lump sizes
      cloud.lumps.push(lump);
    }
    clouds.push(cloud);
  }
}

function drawClouds() {
  fill(255); // White clouds
  noStroke();

  for (let cloud of clouds) {
    for (let lump of cloud.lumps) {
      ellipse(cloud.x + lump.offsetX, cloud.y + lump.offsetY, lump.radius * 2);
    }
  }
}

function generatePeople() {
  people = [];
  let numPeople = floor(random(2, 5)); // 2 to 4 people

  for (let i = 0; i < numPeople; i++) {
    let person = {};
    // Position relative to the rock's center
    person.x_offset = random(-currentRockRadius * 0.6, currentRockRadius * 0.6); // Horizontal position on rock
    person.y_offset = -currentRockRadius * random(0.2, 0.4); // Feet y relative to rock center, on top of rock

    person.height = currentRockRadius * random(0.3, 0.5); // Person height relative to rock size
    person.width = person.height * 0.3; // Person width relative to height

    // Random skin tone
    person.color = color(random(180, 220), random(120, 160), random(80, 120));

    people.push(person);
  }
}

function drawPeople() {
  for (let person of people) {
    push();
    // Translate to the person's feet position (relative to the canvas)
    translate(rockPosition.x + person.x_offset, rockPosition.y + person.y_offset);

    fill(person.color);
    stroke(person.color - 50); // Slightly darker stroke for outline
    strokeWeight(1);

    // Head
    circle(0, -person.height, person.width * 0.8);

    // Body
    line(0, -person.height * 0.8, 0, -person.height * 0.3);

    // Arms
    line(-person.width * 0.5, -person.height * 0.6, person.width * 0.5, -person.height * 0.6);

    // Legs
    line(0, -person.height * 0.3, -person.width * 0.3, 0);
    line(0, -person.height * 0.3, person.width * 0.3, 0);

    pop();
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Called when preview panel is resized

  // Recalculate rock position and regenerate shape on resize
  generateRock(); // Regenerate shape first
  let maxY = 0;
  for (let v of rockVertices) {
    if (v.y > maxY) {
      maxY = v.y;
    }
  }
  rockPosition = createVector(width / 2, height * 0.7 - maxY); // Reposition rock

  // Regenerate clouds on resize to adapt to new canvas size
  generateClouds();

  // Regenerate people on resize to adapt to new canvas size and rock position
  generatePeople();
}