<!-- This is your optional HTML structure, for example, a div to contain the canvas -->
<div id="p5-container"></div>

<!-- This is your p5.js script -->
<script>
let sketch = function(p) {
    let colorPalettes;
let bgColor;

function setup() {
  createCanvas(800, 800);
  
  // Define a few nostalgic color palettes
  colorPalettes = [
    ['#FFD300', '#FF7755', '#D62D20', '#0057A8'],
    ['#EED2EE', '#3E3D40', '#D5B1BB', '#A43955']
  ];
  
  // Choose a random color palette and background color
  let chosenPalette = random(colorPalettes);
  bgColor = random(chosenPalette);
  
  background(bgColor);
  
  // Generate random comic elements
  for (let i = 0; i < 50; i++) {
    drawComicElement(chosenPalette);
  }
}

function drawComicElement(palette) {
  fill(random(palette));
  let choice = floor(random(3));
  
  let x = random(width);
  let y = random(height);
  
  if (choice === 0) {
    // Draw a star
    drawStar(x, y, 30, 70, 5);
  } else if (choice === 1) {
    // Draw a speech bubble
    ellipse(x, y, 60, 40);
    ellipse(x-30, y+30, 25, 40);
  } else {
    // Draw a random ellipse
    ellipse(x, y, random(20, 70));
  }
}

function drawStar(x, y, radius1, radius2, npoints) {
  let angle = TWO_PI / npoints;
  let halfAngle = angle / 2.0;
  beginShape();
  for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * radius2;
    let sy = y + sin(a) * radius2;
    vertex(sx, sy);
    sx = x + cos(a + halfAngle) * radius1;
    sy = y + sin(a + halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

}

new p5(sketch, 'p5-container');
</script>