interactive comic template

3/9/2024

*/

​

var x = 260

    var y = 220

    var s = 240  //;

    var state = 1; 

​

function setup() {

  createCanvas(600, 600);

  textSize(35);

  textFont("Comic Sans MS");

}

​

function mousePressed() {

  state++;

  if (state == 4) {

    state = 1;

  }

}

​

function draw() {

  background(128,0,128);  //purple

  //the code below is Ai Generated

  // Draw the buns using the function

  drawBuns(210, 175, 30, 60, "left"); // Left bun

  drawBuns(310, 175, 30, 60, "right"); // Right bun

}

​

// the code below is Ai Generated Define function to draw buns this

function drawBuns(centerX, centerY, width, height, side) {

  // Set fill color for the buns (dark brown)

  fill(65, 40, 14);

​

  // Calculate base positions for left and right buns

  const leftBaseX = side === "left" ? centerX - width / 2 : centerX + width / 2;

  const rightBaseX =

    side === "left" ? centerX + width / 2 : centerX - width / 2;

​

  // Draw the main part of the bun (rounded rectangle)

  rect(leftBaseX - width / 2, centerY - height / 2, width, height, 20); // Adjust corner radius as needed

​

​

  //character

  // Face

  noStroke();

  fill(250, 128, 114); //salmon peachy skin tone

  ellipse(x, 255, 130, s); //oval shaped head //260,255,130,s

  // Eyes

  fill(80, 30, 10); //brown

  ellipse(210, y, 38, 25);  //210, 220, 38, 25); //oval shaped left eye

  ellipse(310, y, 38, 25);  //(310, 220, 38, 25); //oval shaped right eye

​

  // Pupils

  noStroke();

  fill(0); //black

  ellipse(210, y, 8, 8);  //(210, 222, 8, 8); //dot shaped inside left eye

  ellipse(310,y, 8, 8);  //(310, 222, 8, 8); //dot shaped inside right eye

   // Mouth found through reference page

  noStroke();

  fill(255, 0, 255); // Fuchsia mouth 255, 0, 255

  arc(x, 280, y - 250, 15, 0, PI + QUARTER_PI, CHORD); //smirk for mouth

  //stuck

  if (state == 1) {

  //first panel

   fill('yellow'); 

  text("Stuck?", x - 250, y + 180);

  }

   if (state == 2) {

  //second panel

     fill('orange');

   text("Wheely Stuck?", x -250, y + 180); 

         //second statement wheely stuck

     // Draw the baseball cap using the function

  drawBaseballCap(260, 200, 150, 80, 30, -PI / 6); // Adjust parameters as needed

}

// Define function to draw a baseball cap

function drawBaseballCap(

  centerX,

  centerY,

  capWidth,

  capHeight,

  brimLength,

  brimAngle

) {

  // Set fill color for the cap (adjust as needed)

  fill(255, 0, 255); // fuschia

​

  // Calculate brim endpoint coordinates based on angle and length

  const brimTipX = centerX + brimLength * cos(brimAngle);

  const brimTipY = centerY + brimLength * sin(brimAngle);

​

  // Draw the main part of the cap (rounded top)

  ellipse(centerX, centerY - capHeight / 2, capWidth, capHeight);

​

  // Draw the brim using two triangles for a smooth curve

  beginShape();

  // Connect cap edge to brim tip

  vertex(centerX - capWidth / 2, centerY);

  vertex(brimTipX, brimTipY);

  // Connect brim tip to other side of cap edge

  vertex(centerX + capWidth / 2, centerY);

  endShape(CLOSE);

​

        }  

   if (state == 3) {

     //// Draw the bike frame

     fill('yellow');

     text("Got Wheels?!", x -250, y + 180); 

      fill('orange');

         //third statement Got Wheels?!

     // Draw the bike frame

  fill(255, 165, 0); // Orange frame

  rect(260, 350, 80, 50, 10); // Main body

// wheels 

  fill(0); // Black wheels

  ellipse(275, 400, 30, 30); // Front wheel 

  ellipse(330, 400, 30, 30); // Back wheel 

      // Draw the baseball cap using the function

  drawBaseballCap(260, 200, 150, 80, 30, -PI / 6); // Adjust parameters as needed

}

// Define function to draw a baseball cap

function drawBaseballCap(

  centerX,

  centerY,

  capWidth,

  capHeight,

  brimLength,

  brimAngle

) {

  // Set fill color for the cap (adjust as needed)

  fill(255, 0, 255); // fuschia

​

  // Calculate brim endpoint coordinates based on angle and length

  const brimTipX = centerX + brimLength * cos(brimAngle);

  const brimTipY = centerY + brimLength * sin(brimAngle);

​

  // Draw the main part of the cap (rounded top)

  ellipse(centerX, centerY - capHeight / 2, capWidth, capHeight);

​

  // Draw the brim using two triangles for a smooth curve

  beginShape();

  // Connect cap edge to brim tip

  vertex(centerX - capWidth / 2, centerY);

  vertex(brimTipX, brimTipY);

  // Connect brim tip to other side of cap edge

  vertex(centerX + capWidth / 2, centerY);

  endShape(CLOSE);

        }  

​

}