Creative Cross Training Live Sketch Ghost Saga Home Movie Clip
Henry’s Ghost  •  App Comparison  •  09/28/2026
TNT — Processing Cross Training  •  Henry’s Ghost Saga

👻 ✨ Henry’s Ghost:
Three Languages, One Spooky Canvas

The same ghost-wrangler sketch — identical geometry, identical animation logic, identical interaction model — in JavaScript (p5.js), Java Processing, and Python Processing.

The Ideas

Six Concepts at Work in Every Version

These design decisions drive all three sketches. The Processing vocabulary stays familiar; the host language changes how data, classes, loops, and stacks are expressed.

Custom Shape Drawing

The ghost body is hand-crafted with beginShape() / endShape(CLOSE) and a series of vertex() calls: a half-circle for the head, straight sides, then a wavy bottom hem driven by sin().

identicalidenticalidentical
Sinusoidal Animation

sin(floatOffset) makes ghosts float. sin(twinkleOffset) pulses star brightness. sin(waveOffset + i*0.8) undulates the hem. sin(millis()*0.01) pulses the selection ring. One function, four animations.

same mathsame mathsame math
Mouse-Tracking Eyes

atan2(mouseY − ghost.y, mouseX − ghost.x) gives the look angle. A small polar offset positions the pupil:

px = cos(lookAngle) * maxPupilDist
py = sin(lookAngle) * maxPupilDist

The math is identical across all three languages.

Gradient Background

lerpColor(topColor, botColor, inter) is called once per pixel row in a loop, blending dark blue at the top to near-black at the bottom. Two gradient colors are pre-computed in setup() so color() is not called 600 times per frame.

identicalidenticalidentical
Data Structure Translation

One ghost is described by 8 properties. Python stores them in a dict: ghost['x']. JavaScript uses an object literal: ghost.x. Java uses a typed class Ghost with declared fields.

object {}class Ghostdict {}
Push/Pop Stacks

Python and Java Processing require two paired calls around each ghost draw: pushMatrix() + pushStyle() (and their pop counterparts). p5.js combines both transform and style state into a single push() / pop().

push() / pop()pushMatrix + pushStylepushMatrix + pushStyle
The Code

All Three Sketches, Side by Side

Yellow paper = JavaScript  •  Blue paper = Java  •  Green paper = Python. Each panel scrolls independently.

JavaScript henrysGhost1Sketch.js
    Runs live in the browser with p5.js.
    Java HenryGhost.pde
      Open in the Processing IDE → Java mode → Run.
      Python henryGhost.py
        Open in Python Processing, paste, press Run.
        Download source files henrysGhost1Sketch.js HenryGhost.pde henryGhost.py

        What’s the Same — and What’s Different

        All three versions use the same Processing vocabulary: beginShape(), endShape(CLOSE), vertex(), translate(), lerpColor(), atan2(), sin(), cos(), dist(), constrain(), millis(), mouseX/mouseY. The interesting differences are host-language habits: JavaScript uses object literals and push()/pop(); Java uses a typed Ghost class, ArrayList<Ghost>, and paired pushMatrix()/pushStyle(); Python uses dicts with ghost['x'] syntax and the same paired matrix/style calls as Java.

        One ghost, three dialects. Henry’s eyes follow the mouse in every language.