Skip to main content
Level 02 · Generative Art & Computational Canvas

Algorithmic Form.
Generative Systems.
p5.js & Creative Code.

For visual thinkers and young builders aged 10 to 14. Students master trigonometry loops, parametric waveforms, particle physics, and audio-reactive geometry using JavaScript and the p5.js canvas engine.

Duration
10 Weeks
Format
1-on-1 Mentorship
Ideal For
Ages 10 to 14
Creative coding tactile art and digital logic
SPECIMEN: STEM-CREATIVE-02 INTERACTIVE CANVAS

p5.js Vectors, Trigonometric Motion & Shaders

Interactive Generative Canvas Specimen

How Mathematical Formulas Become Living Art

Students write real JavaScript that executes in the browser canvas, turning trigonometric equations into dynamic generative artwork and interactive physics.

p5js-runtime/generative-canvas
// Specimen 1: Parametric Harmonic Wave Oscillators
function draw() {
  background(11, 17, 32, 25); // Trailing fade effect
  noFill();
  stroke(244, 96, 12); // Brand orange
  strokeWeight(1.5);

  beginShape();
  for (let x = 0; x <= width; x += 6) {
    let angle = (x * 0.02) + (frameCount * 0.05);
    let y = height / 2 + sin(angle) * 80 + cos(angle * 0.5) * 30;
    vertex(x, y);
  }
  endShape();
}
// Specimen 2: 2D Particle Swarm with Vector Attraction
class Particle {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = p5.Vector.random2D().mult(2);
    this.acc = createVector();
  }

  attractTo(target) {
    let force = p5.Vector.sub(target, this.pos);
    let d = constrain(force.mag(), 5, 100);
    force.setMag(50 / (d * d));
    this.acc.add(force);
  }
}
// Specimen 3: Recursive Branching Tree System
function branch(len, depth) {
  line(0, 0, 0, -len);
  translate(0, -len);

  if (depth > 0) {
    push();
    rotate(PI / 6);
    branch(len * 0.72, depth - 1);
    pop();

    push();
    rotate(-PI / 6);
    branch(len * 0.72, depth - 1);
    pop();
  }
}
p5.js Canvas Graphics Pipeline
[p5.js Engine] Canvas initialized: 800x600 WebGL Renderer: 2D Context Hardware Accelerated Sample rate: 60 FPS locked Waveform points computed: 134 vertices Phase increment: 0.05 radians/frame Sine harmonic blend verified: f1(1x) + f2(0.5x)
[Physics Telemetry] Active particles: 256 instanced vectors Mouse attractor registered at (x: 412, y: 288) Euler integration step: dt = 0.016s Velocity clamp: max 6.0 px/frame Zero particle dropouts detected across 10,000 frames
[Recursion Depth Telemetry] Base trunk height: 120px Decay coefficient: 0.72 Recursion stack limit: 8 depth levels Total branch segments drawn: 511 Matrix transformations: 511 push/pop cycles cleanly popped
Structured 10-Week Syllabus

10-Week Creative Coding Syllabus

Students begin with canvas fundamentals and progress to trigonometric waves, particle physics, recursion, and audio-reactive web art.

PHASE 01

The Computational Canvas & Coordinate Transforms

Weeks 1 to 2 · Canvas architecture, shape primitives, and coordinate mapping

Week 01
Canvas Geometry & Setup

The setup() and draw() execution lifecycle, coordinate space (0,0 to width,height), and basic geometric forms.

Week 02
RGB & HSB Color Space

Color modes, alpha channel transparency, variable mapping, and interactive gradient canvases.

PHASE 02

Mathematical Motion & Trigonometric Curves

Weeks 3 to 5 · Sine, cosine, oscillations, and generative patterns

Week 03
Trigonometric Oscillations

Utilizing sin() and cos() for harmonic motion, circular paths, pendulum physics, and undulating wave ribbons.

Week 04
Perlin Noise & Organic Textures

Comparing random() vs noise(), topographic contour maps, flow fields, and generative terrain sketches.

Week 05
Matrix Transformations

Using translate(), rotate(), scale(), push(), and pop() to create spirographs and sacred geometry.

PHASE 03

Particle Systems, Physics & Vectors

Weeks 6 to 8 · Object-oriented programming, force vectors, and emergent swarms

Week 06
p5.Vector Mathematics

Vector addition, magnitude, normalization, heading angles, and gravitational attractor points.

Week 07
Multi-Particle Systems

Managing particle arrays, lifespans, fading alphas, and engineering explosive firework fountains.

Week 08
Fractals & Recursion

Recursive branching functions, Sierpinski triangles, Koch snowflakes, and algorithmic botanical trees.

PHASE 04

Audio-Reactive Installations & Exhibition

Weeks 9 to 10 · p5.sound Fast Fourier Transforms, live inputs, and gallery showcase

Week 09
Fast Fourier Audio Visualizers

p5.FFT frequency spectrum analysis, waveform amplitude, and synchronizing visual geometry to music beats.

Week 10
Masterpiece Curation & Defense

Deploying interactive artwork to the web and presenting the generative exhibition live to parents.

Intermediate Programme

Programme Tuition

$80/month

4 x 1-hour private 1-on-1 sessions per month · No lock-in contracts

  • ✓ Dedicated 1-on-1 creative coding mentor matched to student pace
  • ✓ Between-session tutor chat support and code reviews
  • ✓ Monthly milestone reports delivered to parents
  • ✓ Verified graduation certificate and online art portfolio
  • ✓ Pause, reschedule, or cancel any month with zero fees
Enroll Your Student Now

Questions? View full curriculum roadmap & FAQ

STEAM

Creative Technology

Where computer science fundamentals meet visual aesthetics, interactive animation physics, and computational creativity.

"Creative coding demonstrates that software engineering is a medium for original expression, empowering students to translate pure mathematics into breathtaking visual art."

STEMulus Creative Technologies Lead

Start Your Creative Journey

Ready to Code with Art?

Join private 1-on-1 sessions. Guide your child from basic loops to published interactive generative art.

Frequently Asked Questions

Does my child need prior art or coding experience?

Neither is required. Creative Coding introduces JavaScript syntax through immediate visual feedback. The visual results make abstract coding structures intuitive to grasp.

What is p5.js and where does it run?

p5.js is a creative coding library built for artists, designers, and educators. It runs natively in any modern web browser without complex installation or expensive software licenses.

What career paths utilize creative coding?

Creative technologies power modern UI/UX design, interactive architectural installations, video game visual effects, and digital advertising at companies like Apple, Google, and Spotify.

Free Discovery Session 45 min · 1-on-1 with mentor
Book Free →