Glowing Jack-o'-Lantern

Glowing Jack-o'-Lantern

October 20, 2016

example processing procedural-generation 🎃

This example builds off the random Jack-o’-lantern example and uses the draw() function to make it look like the Jack-o’-lantern contains a flickering candle.

float leftEyeWidth;
float leftEyeHeight;
float leftEyeX;
float leftEyeY;

float rightEyeWidth;
float rightEyeHeight;
float rightEyeX;
float rightEyeY;

float mouthWidth;
float mouthHeight;
float mouthY;

float centerX;

void setup() {

  size(200, 200);


  centerX = width/2;
  float centerY = height/2;

  float jWidth = random(width/2, width*.75);
  float jHeight = random(height/2, height*.75);

  stroke(0, random(50, 200), 0);
  strokeWeight(random(5, 15));
  line(centerX, centerY-jHeight/2, centerX + random(-jWidth*.25, jWidth*.25), centerY - jHeight*.75);

  fill(random(200, 256), random(75, 125), 0);
  stroke(random(100, 140), random(40, 80), 0);
  ellipse(centerX, centerY, jWidth, jHeight);
  ellipse(centerX, centerY, jWidth*.75, jHeight);
  ellipse(centerX, centerY, jWidth*.5, jHeight);
  ellipse(centerX, centerY, jWidth*.25, jHeight);

  //generate left eye
  leftEyeWidth = random(jWidth*.1, jWidth*.35);
  leftEyeHeight = random(jHeight*.1, jHeight*.25);
  leftEyeX = ((centerX - jWidth/2) + centerX)/2;
  leftEyeY = centerY - jHeight*.1 - leftEyeHeight;

  //generate right eye
  rightEyeWidth = random(jWidth*.1, jWidth*.35);
  rightEyeHeight = random(jHeight*.1, jHeight*.25);
  rightEyeX = ((centerX + jWidth/2) + centerX)/2;
  rightEyeY = centerY - jHeight*.1 - leftEyeHeight;

  //generate mouth
  mouthWidth = random(jWidth*.1, jWidth*.8);
  mouthHeight = random(jHeight*.1, jHeight*.25);
  mouthY = centerY + random(jHeight*.1, jHeight*.35);


void draw() {

  //get the glowing color
  float r = random(100, 255);
  float g = random(r);
  fill(r, g, 0);

  //draw eyes
  triangle(leftEyeX, leftEyeY, leftEyeX - leftEyeWidth/2, leftEyeY + leftEyeHeight, leftEyeX + leftEyeWidth/2, leftEyeY + leftEyeHeight);
  triangle(rightEyeX, rightEyeY, rightEyeX - rightEyeWidth/2, rightEyeY + rightEyeHeight, rightEyeX + rightEyeWidth/2, rightEyeY + rightEyeHeight);

  //draw mouth
  arc(centerX, mouthY, mouthWidth, mouthHeight, 3.14, 2*3.14);
  line(centerX-mouthWidth/2, mouthY, centerX + mouthWidth/2, mouthY);
Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

We’ve called frameRate(10), so the draw() function is called 10 times per second. Each frame, we’re generating a different red/orange/yellow color and then drawing the eyes and mouth with that color. This (hopefully) makes it look like the Jack-o’-lantern contains a flickering candle.

glowing Jack-o'-lantern

Tweak Ideas

  • Tweak the values fed into the random() function to change the type of Jack-o’-lanterns you generate.
  • Make the flickering more smoothly transition between colors.

Creating Functions Examples


Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!

Comments are powered by the Happy Coding forum. This page has a corresponding forum post, and replies to that post show up as comments here. Click the button above to go to the forum to post a comment!