JavaScript Magic Academy: Procedural Creatures

Name: JavaScript Magic Academy: Procedural Creatures
Rating: 5.0 (2 reviews)

Master vanilla JavaScript and HTML Canvas with hands-on creative coding

Created byFrank Dvorak

Last updated 1/2026

English

English [Auto],

What you'll learn

Understand how vanilla JavaScript draws and animates graphics on the HTML Canvas
Control colors, gradients, shadows for advanced visual effects
Turn code into reusable creative tools and generators
Read, tweak, and experiment with procedural art algorithms confidently

Course content

5 sections • 37 lectures • 2h 13m total length

Introduction1:05
Explore the symmetry of mathematical shapes and watch how no frameworks, vanilla JavaScript and HTML canvas birth fractal creatures as every code change reshapes anatomy.
Project setup8:14
Center a 600-pixel canvas with flexbox, then use a 2d context to draw with beginPath, moveTo, lineTo, and stroke, building fractal-like art through translate and rotate.
Fun With Fractals6:19
Twist It! Bend it! Break it!10:48
Explore procedural fractal generation by looping, rotating, and randomizing branches, controlling depth with maxlevel, spread, scale, and branches, while rendering on canvas and mutating shapes for diverse results.
Potion Mixing7:15
Experiment with procedural fractals by randomizing hue between 0 and 360, using hsl colors, adjusting lightness per recursion, and adding shadows, rotation, and varying line width for depth.
Source code checkpoint P10:17
Double-click the HTML file to open the downloaded source code in your browser and view the project at the same fractal laboratory part 1 stage.
Runic Geometry4:28
Apply a black-to-midnight blue gradient, remove border, expand to 700 pixels, and experiment with sides, spread, scale, max level, and a future fractal class refactor.
Better Spell Engine5:46
Define a fractal class with a constructor and a draw method that uses these properties and a ctx parameter for canvas rendering.
Source Code Checkpoint P20:31
Explore fractal laboratory part 2 by opening the html in your browser to view the current project stage, then adjust max level and branches for faster or richer renders.
Opening the Portal2:57
Resize the canvas to fullscreen, redraw the fractal on resize, and center it while managing overflow and a fixed position control button for a scalable, detailed procedural fractal.
The First Transmutation4:08
Explore fractal visualization by switching from drawing lines to drawing circles, using drawMode to render branches or circles, and combine both for dramatic, layered compositions.
Draw Mode: Sparks4:14
Explore the sparks draw mode to procedurally generate fractal ellipses with controlled fill, opacity, and rotation. Learn to limit draws with randomness and combine branches, circles, and sparks.
Draw Mode: Electricity3:28
Explore creating a magical fractal held together by crackling electricity, using randomized jagged lines, glow shadows, and layered electricity passes while controlling level depth and isolation with save and restore.
Source Code Checkpoint P30:31
Open the HTML file to load the current project stage in your browser. Increase the max level and branches in the source files to render more complex, detailed fractal renders.
Draw Mode: Runes4:22
const runeSymbols = ['ᚠ', 'ᚢ', 'ᚦ', 'ᚨ', 'ᚱ', 'ᚲ', '◊', '✦', '※', '⁂'];
Draw Mode: Potion Droplets2:57
Draw droplets of potion inside circles with arc, fill, and stroke, then combine electricity, droplets, and sparks to suspend a magical fractal.
Draw Mode: Fur2:07
In draw mode fur, the lecture shows drawing hair on a fractal by filling rectangles, adjusting lightness, translating, and using save and restore, with conditional rendering that excludes the middle.
Draw Mode: Minerals2:51
Draw Mode: Flames2:59
Explore the draw mode: flames by rendering jagged fire shapes along fractal edges, using a defined fire color, glow, and semi-transparency with canvas shadows for a dynamic fire effect.
Source Code Checkpoint P40:31
Open the HTML file to view the project at Fractal Laboratory part 4, and adjust the max level and branches for faster loading or more complex renders.

Turn Fractals Into Butterflies4:41
Drawing Body3:40
Create a procedurally generated butterfly body by drawing ten to thirty circles, spaced along a length, with a half-sine taper and a base visibility, then adjust antennae and scales.
Drawing Wings6:13
Transform a six-sided fractal into a butterfly by translating, rotating, flipping, and scaling wings and body. Use random upper and lower wing angles to create procedurally generated, layered butterflies.
Source Code Checkpoint: Basic Butterlies0:29
Open the downloaded source code by double-clicking the HTML file to view the project in your browser at the current stage, with reduced max level and branches for faster renders.

Section Introduction0:29
Procedural Horror Bats4:13
Adjust procedural parameters to render corrupted horror bats with glowing red layers, bones, and veins. Create layered canvas drawings using chaos, symmetry, and shadows to emphasize glow and texture.
Draw Mode: Veins3:23
Create veins and tendrils inside a glowing body by drawing with quadratic curve 2 and bezier curve 2, using two control points, red strokes, and random vertical variation.
Draw Mode: Tendrils6:57
Learn to render tendrils with manually controlled points and a sine-wave rhythm to reshape silhouettes, using dark red strokes, shadows, and glow across segments, frequency, and amplitude for procedural creatures.
Draw Mode: Spores3:51
In draw mode spores, the lecture shows drawing spores on branches with level and max level, random placement, save and restore, dark red fill, bright red shadows, and tendrils.
Source Code Checkpoint0:29

Section Introduction0:29
Turn magic butterflies into bioluminescent alien creatures from Pandora by shaping bodies and silhouettes, adding wing membranes, glowing accents, and protective scales; keep code clean with a source checkpoint download.
Night Moths6:23
Draw Mode: Membranes8:20
Explore a draw mode that creates four membranes for butterfly wings mapped to a sine-wave half-circle, with randomized membrane size, gradient fills, and layered wings using save and restore.
Draw Mode: Bioluminescence3:48
The bioluminescence draw mode introduces glowing dots along branches with random offsets, using radial gradients and shadow blur for a layered, luminous nocturnal signaling effect.
Draw Mode: Scales3:01
Apply the scales draw mode to place elongated diamond scales on the outermost levels every fifth step, saving and restoring state, with random sizes 15–30 and a 3-pixel line width.
Source Code Checkpoint0:29

Requirements

A basic understanding of JavaScript syntax
Access to a web browser
Simple code editor

Description

In this course, we’re not holding back, we’re diving into full-on, crazy experimentation mode. Unleash your creativity with vanilla JavaScript and HTML Canvas in this hands-on coding adventure! Start with simple fractals, then twist, break, and transform them into butterflies, moths, and bats. All fully procedural and entirely yours.

You will create:

Random fractal generator: Mix colors and shapes and watch unexpected patterns emerge.
Magic butterfly generator: Add sparks, electricity, fur, runes, and other draw modes to craft unique visual effects.
Movie-inspired renders:
- Corrupted bats: Deep red glow, veins, tendrils, and spores. See what happens when magic goes wrong.
- Bioluminescent alien moths: Delicate wing membranes, glowing dots, protective scales. Capture the beauty of unexplored alien life.

Learn coding the fun way! Discover how HTML Canvas draws shapes, how pixels and paths work, and how vanilla JavaScript really operates behind the scenes. No frameworks, no libraries, because real wizards and witches understand how their spells are actually made. By working on projects that produce instant visual feedback, you’ll grasp coding concepts faster, see how changes in your code affect the output in real time, and gain confidence in your programming skills.

By the end, you’ll have your own procedural creature creators and fractal generators, a deep understanding of how vanilla JavaScript and Canvas work together, and the skills to create mesmerizing interactive art. Tweak values, explore shapes, and make your own experiments!

Save your favorite renders as PNGs and share your creations with friends or your portfolio.

Dive in, code along and discover new coding techniques and dimensions of visual art.

Who this course is for:

Beginners who want to make coding more fun, intuitive, and less abstract
Anyone curious about HTML Canvas and how to draw and animate with pure vanilla JavaScript
Creative coders who enjoy learning through generative art and visual experiments
JavaScript developers who want to understand how code really affects visuals on the screen

JavaScript Magic Academy: Procedural Creatures

What you'll learn

Explore related topics

Course content

Introduction20 lectures • 1hr 16min

Procedural Magic Butterflies4 lectures • 15min

Procedural Horror Bats6 lectures • 19min

Bioluminescent Night Moths6 lectures • 23min

What's Next?1 lecture • 1min

Requirements

Description

Who this course is for: