Development Chat Log Also: CS Concepts Cross Training
Processing Cross Training  •  Creative Coding Edition  •  sister area: core CS concepts

TechNoviceTools — Processing Cross Training

The Same Sketch.
Three Processing Worlds.

Creative Cross Training takes one visual design and rebuilds it in p5.js, Java Processing, and Python Processing. Students see the same geometry, color logic, animation loop, and class structure through three related but distinct coding languages.

Creative Cross Training at TNT

Cross Training usually begins with a CS concept: a loop, a conditional, a class, a setter. Creative Cross Training begins with a sketch. The visual result comes first, and then the code is translated across the three Processing venues students are most likely to encounter at TNT.

This matters because creative coding is full of transferable patterns: coordinate systems, animation loops, color modes, random particles, polar-to-Cartesian conversion, helper functions, and classes that package behavior. The syntax changes, but the design thinking travels.

Each entry starts with a finished TNT sketch, then compares how p5.js, Java Processing, and Python Processing express the same idea. Students can look across the versions and ask the useful question: what changed because of the language, and what stayed the same because of the concept?

Classroom rhythm: admire the sketch first, read the code second, then compare the translations. The goal is not just to copy a program; it is to recognize creative coding patterns wherever they appear.
Visual Idea First

The sketch is the hook. Students begin with a visible result and then trace how geometry, color, timing, and classes produce it.

Three Related Dialects

p5.js, Java Processing, and Python Processing share the Processing mindset, but each reveals different language habits and tradeoffs.

Reusable Design Patterns

Particles, orbiting shapes, HSB palettes, helper functions, and classes become reusable tools students can carry into their own work.

Processing Cross Training Gallery

One visual design, rebuilt across p5.js, Java Processing, and Python Processing.

Entry #1 — v3 Edition
Mystic Shield
An eldritch mandala: rotating rings, eight satellite sigils, interlaced star geometry, and fading fire sparks. The v3 edition replaces every magic number with a named constant and documents every function — the same visual, professional-grade code. v2 is available for before–and–after comparison.
p5.js Java Processing Python Processing
v3 showcase  •  v3 app comparison  •  v2 (compare)  •  interactive  •  movie clip
Entry #2 — Saga
Henry’s Ghost Saga
An evolutionary design showcase. Henry’s Python Processing ghost app is taken apart, improved component by component, and rebuilt across three languages — so students can watch a real design evolve from first draft to quality code.
p5.js Java Processing Python Processing
Saga home  •  Ghost Wrangler  •  Twinkling Stars  •  Cross Training
Entry #3 — Sprite Animation
Sergio’s Slime Sprite
A student’s 2023 keyboard-controlled animated sprite — professionally refactored and ported to all three languages. The central teaching concept: a two-frame sprite-sheet animation that makes the slime appear to breathe. Sergio drew the sprite frames in Piskel, a free browser-based pixel art editor — see the Piskel cheat sheet to build your own.
p5.js Java Processing Python Processing
live sketch  •  app comparison  •  original sketch  •  chat log  •  Piskel guide
Priority Queue — Building next
4 Henry’s Ghost — full rebuilt with improved components Stars + ghost body + OOP design all revised
5+ More student creative Processing sketches Particles, curves, grids, and classes