Mathematical Coding

Mathematics as a creative art

Mathematical rigor and artistic intuition were presented as complementary rather than opposed. Music, architecture, geometry, and mathematical coding all combine structure with inspired choices about what a creation should become.

Processing techniques explored

The live coding demonstrated how trigonometry, coordinate systems, and rendering details shape mathematical art.

• Surface meshes: Nested loops sampled a grid, with each corner receiving its own height f(x,y). Increasing the number of divisions produced a smoother surface.
• Coordinates and transformations: Graph units were scaled into pixel space. Translation and rotation order mattered, and the object had to be rotated when the assumed vertical axis differed from Processing’s coordinates.
• Animation: A frameCount division bug repeated each state for 60 frames because of integer division. Converting the calculation to floating-point restored smooth motion.
• Trigonometric camera motion: Sine and cosine moved the camera around the surface, while radial sine functions created rippling forms whose amplitude changed with distance.
• Redrawing frames: Placing background() inside draw() clears the previous frame; otherwise moving elements leave accumulated trails.
• Angles: atan2(y,x) was introduced as a coding-friendly arctangent that identifies angles around the full circle.

Workshop projects

Students developed separate mathematical-art experiments and shared their progress.

• Animated 3D surface: A rotating mesh evolved from a paraboloid into a radial wave surface. Surface normals and smooth lighting were briefly examined, but the automatically generated replacement code was not adopted.
• Modular vortex: A JavaScript and BabylonJS tool connected evenly spaced points using a multiplier and modular arithmetic. Changing the parameters produced flowers, eye-like forms, and cardioid patterns in both 2D and 3D.
• Circle-tangent sketch: The sketch included coordinate axes and a moving point, then began calculating a tangent using cosine and atan2. Translating the origin to the center of the screen was suggested to simplify the remaining coordinate calculations.

Workflow and finished artwork

Use Git locally and GitHub remotely to preserve versions and recover deleted code. Processing frames can be exported with saveFrame() and assembled into a video using FFmpeg; Homebrew was recommended for installing FFmpeg. Finished work could become an animation, a wall print, or a 3D-printed object, and AI coding tools should be used for targeted help without surrendering the overall design or learning process.

Trigonometry as rotation

Sine measures the perpendicular component created by rotation, while cosine measures the component remaining in the original direction. Rotation occurs around a point in two dimensions, an axis in three dimensions, and a plane in four dimensions; four-dimensional space therefore has six coordinate planes of rotation.

Taylor series and computation

The sine series was presented as x − x³/3! + x⁵/5! − x⁷/7! + ⋯, with radians required as the angle measure. A computer can approximate sine by adding finitely many terms, using a high-precision data type such as double; interlacing the sine and cosine terms visually produced a path ending on the unit circle.

• One radian: The central angle for which the arc length equals the circle’s radius; a full turn contains 2π radians.
• Hyperbolic functions: The Taylor series for sinh and cosh use the corresponding odd and even powers without alternating signs, turning the circular visualization’s spiral into a staircase that lands on a hyperbola.
• Complex connection: On the complex plane, a point on the unit circle is cos(x) + i sin(x), giving Euler’s formula e^(ix) = cos(x) + i sin(x).
• Sigmoid connection: The class explored how a vertical and horizontal transformation of tanh produces the logistic sigmoid: sigmoid(x) = ½(tanh(x/2) + 1).

Stillness as part of mathematical inquiry

After viewing the circle and hyperbola constructions, the class paused to sit with the structures rather than forcing an explanation. The suggested approach was to become still, let the ideas settle, and notice whether questions or insights arose naturally.

• Optional mirror practice: The teacher also suggested patiently gazing at one’s reflection as a personal meditation practice connected with his description of inner luminosity.

Processing surface sketch

A P3D sketch used nested loops to traverse a grid, create four-vertex quads, and set height with f(x,y) = x² + y², producing the beginning of a rotating paraboloid. The speed-coded draft remained incomplete: each corner needs its own correctly sampled height so neighboring quads connect into a continuous surface.

• Core structure: Map loop indices i and j to x and y coordinates, calculate z from a two-variable function, and rotate the resulting mesh over time.
• Possible extension: Replace the paraboloid function with another surface, including a hyperboloid, and repair the vertex sampling.

Questions left open

Two deeper questions were intentionally saved for later.

• Origin of the sine series: Why does the Taylor expansion generate sine, rather than merely approximate observed values?
• Hyperbolic angle: Can the parameter in sinh and cosh be given a clear geometric or angular interpretation on a hyperbola?

Prepare for the art session

Create and bring a piece of mathematical artwork next week. It may use AI assistance, and it does not need to be finished; the next session will address completing the work and rendering it as a video or large print for printing or online publication.

Five-week creative goal

Create an original mathematical artwork by the end of the series. The final piece may be a video or a printable image and can be much simpler than the advanced shader examples shown in class.

• Optional output: A finished image could be printed and shipped through a service such as Gelato.

How a Processing sketch runs

`setup()` runs once and is used for initialization, including the window size. `draw()` runs continuously, so changing values inside it produces animation.

• Syntax: Use braces to define blocks, semicolons to end statements, camelCase for names such as `strokeWeight` and `frameCount`, and `//` for comments.
• Drawing controls: `background(r,g,b)` sets an RGB background; `stroke()` controls line color; `strokeWeight()` controls thickness; `line()` and `point()` draw geometry.

Trigonometric coordinates in code

A point on a circle can be calculated with `pointX = radius*cos(angle) + centerX` and `pointY = -radius*sin(angle) + centerY`. The Y value is negated because Processing’s screen coordinates increase downward; angles use radians, so `PI/4` represents 45 degrees.

• Animation: Using a changing value based on `frameCount` as the angle makes the radial line rotate; negating the angle reverses its direction.
• Scaling: Since sine and cosine range from −1 to 1, multiply them by the radius to obtain visible pixel coordinates.

Coding skills practiced

The lab included declaring and updating `int` and `float` variables, converting integer division to floating-point division, printing values to the console, joining text and numbers through concatenation, and introducing `if/else` conditions. Students also debugged braces, semicolons, RGB values, coordinate pairs, and stroke settings.

• Closing reset: After coding, the class paused briefly in stillness and returned attention to the heart center.

Practice before the next session

Continue coding during the week; the recommended rhythm is about 30 minutes per day.

• Trigonometric sketch: Develop the circle sketch further, using sine and cosine to position and animate a point. Vladimir was specifically asked to recreate the shared Desmos trigonometry construction in Processing.
• Processing review: Students needing a refresher should work through The Coding Train’s introductory Processing material at thecodingtrain.com.
• Extra support: Use ChatGPT to request explanations of unfamiliar ideas such as radians, circle coordinates, variables, or Processing syntax, while retaining control of the program’s overall design.

How the animation was structured

Processing’s setup() runs once, while draw() repeats to generate animation frames. Time was calculated deterministically from the frame count at 60 frames per second; using a decimal-valued float avoided integer-division problems.

• Mapping: map() preserves proportional position between two ranges—for example, mapping 500 from 0–1000 places it halfway between 0 and TAU.
• Shape construction: beginShape(), vertex(), and endShape(CLOSE) connect generated points into a closed figure.
• Interactivity: Mouse position was mapped to an angle so the complete trigonometric construction could be explored dynamically.

Building the circle from trigonometry

Rather than calling a built-in circle command, the circle was constructed from many points of the form (r cos(a), r sin(a)), with angles distributed from 0 to TAU. Reducing the number of points revealed polygons; increasing it produced a visually smooth circle.

• Cosine: Determines the horizontal coordinate of a point on the circle.
• Sine: Determines the vertical coordinate.
• Radius: Multiplying both coordinates by r scales the circle.

Seeing all six trigonometric functions

The moving radius, horizontal and vertical projections, and axis intercepts recreated the Desmos trigonometry diagram. The x-axis intercept was computed with r/cos(angle), representing secant, and the y-axis intercept with r/sin(angle), representing cosecant; the associated segments reveal tangent and cotangent through similar triangles.

• Reciprocal relationships: secant = 1/cosine and cosecant = 1/sine.
• Geometric understanding: Similar triangles explain why the displayed lengths represent tangent, cotangent, secant, and cosecant—not merely formulas to memorize.
• Special angles: At 45°, the diagram makes relationships such as tangent equaling the radius and secant equaling √2 visible.

Suggested follow-up

Open Processing, rebuild or run the demonstrated sketch, and rewatch the coding sequence as needed. Focus first on understanding the purpose of each block rather than every syntactic detail; the later lab is intended for slower, hands-on understanding.

Possible extensions

The interactive trig diagram can serve as a starting point for the course art project.

• Circle-to-square morph: Describe a square in polar coordinates with a piecewise function, then interpolate between the circle and square—possibly using sine for the oscillation.
• Enhanced trig tool: Add colors, labels, displayed function values, click-and-drag controls, or three-dimensional geometry.
• Advanced directions: Explore a sine-series construction in the complex plane or a three-dimensional visualization related to log(z).

Closing meditation

The session ended with a brief meditation, using the mind’s concentrated state after coding as a positive focus before letting the thoughts settle.

Trigonometry made visible

On the unit circle, sine is the vertical coordinate (height) and cosine is the horizontal coordinate (width). For a general right triangle, this becomes SOHCAHTOA: sine = opposite/hypotenuse, cosine = adjacent/hypotenuse, and tangent = opposite/adjacent. When the hypotenuse is 1, the sine and cosine values are simply the opposite and adjacent lengths.

• Complementary angles: The diagram makes sin(90° − A) = cos(A) and cos(90° − A) = sin(A) directly visible.
• A 45° value: At 45°, the two legs are equal, so each has length √(1/2), which is equivalent to √2/2.
• Tangent at 90°: Tangent grows without bound toward +∞ from one side and −∞ from the other, so tan(90°) is undefined.
• Six functions: Sine, cosine, tangent, cotangent, secant, and cosecant were identified as geometric lengths in the circle construction.

The Pythagorean trigonometric identities

Each identity was read from a right triangle in the construction rather than presented as a formula to memorize.

• Unit-circle triangle: sin²(θ) + cos²(θ) = 1
• Tangent–secant triangle: 1 + tan²(θ) = sec²(θ)
• Cotangent–cosecant triangle: 1 + cot²(θ) = csc²(θ)

Functions in mathematics and code

A function relates an input to an output: for example, defining f(x) = x² gives f(3) = 9. Sine, cosine, and the other trigonometric functions are already-defined mathematical functions; programming functions can likewise transform values or perform actions such as drawing and handling input.

Study before the next session

Spend the week contemplating and revisiting sine and cosine until their geometric meanings feel natural. Make the booklet discussed in class into a trigonometry notebook and write down the three Pythagorean identities, deriving them from the diagram whenever possible rather than merely memorizing them.

• Set up Processing: Download Processing and begin considering what trigonometric construction or animation you would like to create.
• Optional extension: Try reconstructing the interactive diagram in Desmos before implementing it in Processing.

Interactive trigonometry animation

The main series project is to recreate the demonstrated trigonometric construction in Processing: calculate the relevant points, draw lines between them, and let the angle move through keyboard or mouse input. A later extension is to turn the animation into a JavaScript page for a personal website.

Creative intelligence

Art was presented as a collaboration between heart and mind: technical structure gives command over an expression, while intuition helps integrate the whole and recognize what feels right. Mathematical coding can therefore become both an artistic medium and a contemplative practice.

• Artistic attention: Notice the gestalt, energy, movement, color, symmetry, and overall feeling of what you create.
• Creative process: Enter silence, experiment freely, and let intuition guide choices before trying to explain them logically.

Turn a Processing sketch into a video

The class practiced exporting PNG frames from Processing and combining them into an MP4 with FFmpeg.

• Save frames: Place `saveFrame("frame-####.png");` at the end of the main `draw()` loop, after the complete scene has been drawn. Use `saveFrame("frames/frame-####.png");` to place the images in a separate frames folder.
• Check the output: Run the sketch long enough to generate the desired number of frames. If only part of the scene appears, make sure `saveFrame()` is in the main draw loop rather than inside a helper function that draws only one element.
• Navigate to the folder: Open Terminal or Command Prompt and use `cd` to change to the directory containing the exported frames.
• Compile the video: Run `ffmpeg -framerate 60 -i frame-%04d.png -c:v libx264 -pix_fmt yuv420p output.mp4` to create a 60-frames-per-second video named `output.mp4`.
• Install FFmpeg: On Windows, use `winget install ffmpeg`. On macOS, install Homebrew if necessary and then run `brew install ffmpeg`.

Why Goldberg polyhedra remain spherical

A Goldberg polyhedron always has 12 pentagons but can contain increasing numbers of hexagons. The pentagons provide the curvature needed to close the surface into a sphere, while three hexagons meeting at 120° each are locally flat and add no curvature.

• Construction: Subdividing the original icosahedral structure creates more hexagons without creating more pentagons.
• Spherical symmetry: Goldberg structures distribute form around a sphere without the polar distortion associated with ordinary spherical coordinates.
• Geodesic dual: The dual structure is built from triangles. Triangles are generally more rigid than pentagonal or hexagonal panels, which is why geodesic domes commonly use the dual form.

Mathematical animation outcomes

The practical goal was to transform mathematical code into a finished visual work. Examples completed during the session included a colorful pulsating icosahedron, a moving circle animation, and a projection related to a three-torus.

• Next creative step: Develop a coded image or animation until its movement, colors, composition, and mathematical structure feel coherent.
• Possible presentation: Create a longer video, a high-resolution still image, a print, or a social-media animation.

Continue the practice consistently

Continue meditation, mindfulness, contemplation, and regular mathematical coding practice. Revisit the Goldberg-polyhedra construction animation to observe directly why subdivision adds hexagons but leaves exactly 12 pentagons, and keep developing a personal mathematical artwork beyond the short test export.

• Coding routine: Practice Processing and command-line navigation regularly so that setup, drawing, frame export, and video compilation become familiar.
• Creative inquiry: While making everyday or artistic choices, pause and ask what feels right rather than relying only on analytical reasoning.

Tools for further exploration

FFmpeg provides detailed control over frame rate, quality, and output format. ChatGPT was recommended as a practical guide for diagnosing command-line installation problems and exploring suitable FFmpeg commands; Processing can also be used to begin experimenting with Mandelbrot- or Julia-set animations before moving to more advanced GPU programming.

The geometry behind Goldberg polyhedra

Goldberg polyhedra were approached through duality, triangular subdivision, and projection onto a sphere.

• Platonic duals: Connecting the centers of an icosahedron’s triangular faces produces a dodecahedron; taking the dual again returns to an icosahedron. The cube and octahedron are duals, while the tetrahedron is self-dual.
• Angle deficit and curvature: Three pentagon angles total 324°, leaving a 36° deficit at each dodecahedral vertex; 20 such deficits total 720°, or 4π radians. Five equilateral triangles leave 60° at each icosahedral vertex, again totaling 720°. More generally, a sphere-topology polyhedral mesh has total integrated curvature 4π.
• Goldberg notation: The pair (m,n) describes a path between neighboring pentagons on the underlying triangular lattice: one direction gives the first number and a diagonal direction gives the second. Examples included (1,0), the dodecahedron; (1,1), the soccer-ball or truncated-icosahedron pattern; and the (2,0), (3,0), (2,2), and (4,0) patterns.
• Construction: Subdivide the faces of an icosahedral triangular mesh, project or normalize its vertices onto a sphere, and take the dual. Six triangles meeting become hexagonal faces, while the twelve locations where five triangles meet become pentagons.
• Local flatness: Regular hexagons tile a plane but cannot close into a sphere by themselves. On a Goldberg polyhedron, the faces are slightly warped or nonregular; with finer subdivisions, each neighborhood becomes increasingly close to a flat hexagonal tiling while the small curvature contributions still add to 4π.

Connections and applications

The geometry was connected to physical structures and curved spaces.

• Geodesic structures: Triangular frameworks resist shearing, making geodesic domes strong candidates for buildings, Mars habitats, and speculative spherical space habitats. Because projected edges are not all identical, practical construction may require several beam lengths.
• Geodesics: A geodesic is an intrinsically straight path through curved space. An animation showed how changing a surface changes these paths, providing a lower-dimensional way to think about gravitational lensing and curved spacetime.
• Higher dimensions: The discussion extended to hyperspheres and regular four-dimensional polytopes. There are six regular 4D polytopes, including the tesseract, the 120-cell made from dodecahedral cells, and the 600-cell made from tetrahedral cells.
• A useful distinction: For a unit sphere, both its surface area and its total curvature equal 4π, but this numerical match does not generally continue in higher dimensions.

Contemplative and mathematical practice

The session treated silence and perceptual sensitivity as complements to mathematical rigor.

• Visual meditation: Gaze broadly at the rotating forms—or close the eyes—focus softly on light and overall form, allow pauses, and notice how changes in motion alter the felt experience.
• Daily exploration: After meditation, spend roughly 15–30 minutes on abstract mathematics. A suggested investigation was to construct Goldberg-like relatives by subdividing and dualizing other Platonic solids, such as the cube, tetrahedron, or octahedron.

Processing sine-wave animation

The shared Processing sketch created a 1000 × 800 canvas and recalculated the display every frame. Its main loop positioned 200 vertices according to a sine function, producing an animated wave.

• Horizontal coordinate: Each vertex used x = (width / numberOfDots) × i, distributing 200 points evenly across the canvas.
• Vertical coordinate: The y-value was verticalShift + amplitude × sin(frequency × TAU × i / numberOfDots − phase).
• Wave settings: The amplitude was one quarter of the canvas height, the vertical shift was half the height, and the frequency was 3.
• Animation: The phase increased with frameCount, causing the sine wave to travel across the screen. A separate point also moved diagonally according to the canvas aspect ratio.

Combining mathematical graphics with an interactive application

The closing demonstration showed how mathematical visualization can become part of a larger software system. The application coordinated HTML, CSS, GPU graphics, AI-driven interaction, database storage, and communication with OpenAI; its animated spherical harmonic responded as a user moved through the orientation.

• GPU mathematics: A spherical harmonic was rendered directly on the GPU to create the central animated visual.
• Adaptive interaction: The orientation detected missing information, changed its prompts accordingly, and animated in response to user input.
• Knowledge-based counselor: The built-in AI counselor answered questions using a school-specific knowledge base.

The geometry behind the icosahedron

Three golden rectangles placed in the XY, XZ, and YZ planes supply the icosahedron’s 12 vertices. Each vertex uses coordinates drawn from 0, ±1, and ±φ, where φ = √1.25 + 0.5 ≈ 1.618.

• Coordinate planes: A plane is named by its two active axes; the omitted coordinate is zero. Desmos 3D was used to visualize the axes, planes, and vertex locations.
• Faces and duality: The 12 vertices were connected into 20 triangular faces. Connecting the centers of neighboring triangles produces the dodecahedron, the simplest Goldberg polyhedron discussed.
• General Goldberg construction: For more complex Goldberg polyhedra, first subdivide each icosahedral face into a triangular lattice, then connect the centers of the smaller triangles.

Processing concepts used

The finished sketch rendered and rotated the icosahedron while making its edges and vertices visually distinct.

• Program structure: setup() runs once; draw() runs repeatedly for animation. P3D enables three-dimensional coordinates.
• Vectors and variables: PVector stored each XYZ location, while float and int stored numerical values such as φ, scale, and time.
• Reusable function: A drawTriangle function accepted three PVectors and used beginShape(), vertex(), and endShape(CLOSE). This avoided rewriting the same drawing code for all 20 faces.
• Transforms and scale: Vectors were normalized and multiplied by a shared scale. translate(width/2, height/2) centered the origin, and translation had to occur before rotation to avoid unintended motion.
• Presentation: stroke, strokeWeight, fill, noFill, point, and RGB values controlled the appearance of faces, edges, and vertices.

Meditative pause

The class paused for meditation during the full-moon moment. The instruction was to become aware of the unchanging background of existence, notice whether the mathematics continued in the still mind, and then let the mathematics fall away gently into silence.

Strengthen the construction before the next session

Revisit the live-coded sketch so the geometry and Processing syntax become familiar rather than merely observed.

• Reproduce it: Try rebuilding the icosahedron from scratch, including the 12 named vertices and 20 triangular faces.
• Experiment: Use the coding bundle when it is emailed; play with it, break it, repair it, change colors and scale, and repurpose parts of it.
• Review the mathematics: Use the theory PDF for the fuller mathematical background that was intentionally not repeated during this session.

Constructing a Goldberg polyhedron

Begin with an icosahedron, subdivide its triangular faces, and connect the centers of adjacent small triangles. Six triangles meeting at an ordinary point produce a hexagon in the dual structure, while the five triangles meeting at each original icosahedral vertex produce a pentagon.

• Twelve pentagons: Every Goldberg polyhedron in this family has exactly 12 pentagons because an icosahedron has 12 vertices; all remaining faces are hexagons.
• Why pentagons matter: Hexagons tile a flat plane, so the 12 pentagons supply the positive curvature needed to close the structure into a sphere.
• Examples and applications: The (1,1) case is the truncated icosahedron seen in soccer balls and the C60 carbon molecule. Related structures appear in geodesic domes and spherical biological forms.

The (h,k) system and face count

The integers h and k record steps in the two directions of a triangular lattice. They determine the Goldberg polyhedron through T = h² + hk + k², a result obtained from the law of cosines with a 60° angle.

• Number of hexagons: The count is 10(T − 1), while the pentagon count remains 12.
• Example: (1,0): T = 1, so there are no hexagons; the result is the 12-pentagon dodecahedral dual of the icosahedron.
• Example: (1,1): T = 3, giving 20 hexagons and 12 pentagons—the soccer-ball form.
• Chirality: Interchanging h and k can produce mirror-image forms, analogous to the relationship between left and right hands.

Topology and curvature

For any polyhedral net topologically equivalent to a sphere, Euler’s characteristic is V − E + F = 2. The corresponding total Gaussian curvature is 2πχ = 4π, or 720°.

• Local angle deficit: At a vertex adjoining one pentagon and two hexagons, the angles total 108° + 120° + 120° = 348°, leaving a 12° deficit.
• Total contribution: Five such vertices give each pentagon a 60° curvature contribution. Twelve pentagons therefore contribute 720° = 4π.
• Torus comparison: A torus has Euler characteristic 0, so its total Gaussian curvature is 0; positive and negative curvature cancel.

Coding plan

The class will build the geometry in Processing. Start with the 12 icosahedron vertices given by cyclic coordinate permutations of (0, ±1, ±φ), where φ is the golden ratio, then determine their edges and faces, subdivide the triangular faces, and form the dual.

• Projection onto a sphere: For each vertex vector p, normalize it and scale by the desired radius: p_sphere = r·p/‖p‖.
• Expansion animation: Interpolate between the original point p and p_sphere; a sine function can drive the repeated inward-and-outward motion.
• Initial milestone: Successfully coding the base icosahedron is already a substantial first achievement.

Practice before the next session

Review the complete Goldberg-polyhedra study page and revisit the diagrams until the construction, counts, and equations become visually meaningful rather than merely mechanical. Work for a manageable period each day over the next six days, choosing material at the edge of your current ability.

• Count and verify: For several (h,k) pairs, calculate T and 10(T − 1), then check the listed numbers of hexagons and the invariant 12 pentagons.
• Contemplate the equations: Ask why area growth produces the squared-length term and why subtracting 1 gives zero hexagons in the basic case.
• Prepare for coding: Download Processing and learn basic variables, conditionals, and for loops. Daniel Shiffman’s Coding Train introductory tutorials were recommended.

Why begin with an icosahedron?

The class considered whether the construction could begin from another Platonic solid. An octahedral version could produce squares among the hexagons, but its curvature would be concentrated more abruptly; the icosahedron distributes curvature through 12 pentagons and gives a highly symmetric, gently rounded result.

Processing foundations

Processing’s setup() runs once, while draw() runs continuously and supports animation. The lab introduced variable declaration and initialization; int, float, boolean, double, String, and char values; comparison operators; if/else blocks; scope; and nested for loops.

• Scope: A variable declared outside setup() and draw() is globally available; one declared inside a block is available only within that block.
• Debugging: Compiler errors and visual output provide immediate feedback. Several naming, spelling, and declaration errors were isolated and corrected during the lab.
• Retina displays: Mac users used doubled render dimensions (rWidth and rHeight) to account for pixel density; other users could work directly with width and height.

Building the animated Julia set

A supplied Complex class represented numbers with real and imaginary parts and provided add(), sq(), and mag() operations. Each pixel coordinate was mapped into the complex plane, iterated through z → z² + c, tested against an escape radius, and assigned a color.

• Pixel mapping: map() translated x and y pixel coordinates into values between −1 and 1 for the complex domain.
• Escape-time iteration: Each point was iterated up to 200 times, stopping when |z| exceeded the escape radius of 100.
• Smooth coloring: A logarithmic smoothing expression produced fractional escape values and reduced visible color bands.
• Inside and outside: Escaping points were colored from the smooth escape count; non-escaping points were colored from the magnitude reached by z after the maximum iterations.
• Animation: A time variable increased by approximately 1/60 each frame and was used in the Julia constant. Replacing time with a fixed value such as 0.25 paused the evolving form at a selected state.

Continue experimenting with the sketch

Save the completed Processing sketch and vary one element at a time while observing the result.

• Green-blue palette challenge: Use three color arguments: set red to 0 and place the same escape-based value in both the green and blue channels.
• Parameter exploration: Compare different Julia constants, maximum iteration counts, escape radii, and color multipliers.
• Mindful coding: If the work begins to feel strained, pause, return attention to the heart center, and resume from a state of ease.

Reference and next artistic steps

Use Processing’s Documentation → Reference when checking built-in commands such as loadPixels(), updatePixels(), mouse variables, and mathematical constants. A later artistic compilation session is planned to cover rendering an animation, producing a printable image, and selecting forms and colors by aesthetic feel.

How the Julia set becomes an image

The same recursive rule is tested from every pixel-sized starting point in the complex plane. The resulting escape behavior supplies the numerical structure that becomes the image.

• Recursive rule: Repeatedly calculate z → z² + c, using the result as the next input while keeping c constant.
• Pixel mapping: Nested loops visit every pixel. Its x and y coordinates are mapped to the real and imaginary parts of the starting value z.
• Escape-time coloring: The iteration count at which |z| exceeds the chosen boundary determines the pixel’s hue; points that do not escape within the limit are black.
• Smooth bands: The expression escape + 1 − log(log(|z|))/log(2) interpolates between whole iteration counts, replacing hard color bands with smoother gradients.

Structure of the live-coded sketch

The sketch used Processing with Java syntax and a small helper class for complex arithmetic.

• Complex class: Stored real and imaginary components and implemented addition, squaring, and magnitude.
• Pixel manipulation: loadPixels() opened the pixel array, x + y × width identified each pixel, and updatePixels() displayed the completed image.
• Color model: HSB color mode made it easy to map escape values around a 0–400 hue wheel while controlling saturation and brightness separately.
• Debugging lesson: A reversed comparison caused every point to stop immediately and the screen to appear uniformly red. Changing the escape test from |z| < 100 to |z| > 100 revealed the fractal.
• Animation: A frame counter gradually changed c each draw cycle, causing the Julia set to evolve. Changing c or the mapped complex-plane range produced new forms and zoom levels.

Suggested practice

The teacher encouraged rebuilding the Julia set repeatedly—possibly for 20 minutes each day—until its logic becomes familiar rather than treating the code as a one-time task. The session also began and ended with meditation, using attention to the heart center and stillness to support focused mathematical work.

Display-density compatibility

The demonstrated code manually used retinaWidth = 2 × width and retinaHeight = 2 × height for a high-density Mac display. Other systems may require standard width and height or Processing’s pixelDensity(1); the cross-platform issue was not fully resolved during the session.

Next stages of the Julia set sequence

The current live-coding session was the second of five planned stages.

• Coding lab: Students will build the sketch themselves while receiving direct support.
• Meditative and philosophical session: The group will contemplate fractals, recursion, and the Julia set’s wider mathematical and metaphysical implications.
• Creative production: The final stage will turn the work into an MPEG animation or a high-resolution image suitable for a large print.

Optional Ramanujan follow-up

The teacher recommended the film “The Man Who Knew Infinity” for its portrayal of Srinivasa Ramanujan and the relationship between mathematical insight, meditation, and mysticism.

How a Julia-set image is generated

The central iterative rule was zₙ₊₁ = zₙ² + C. Each screen pixel is mapped to a starting complex number z₀; the same C is used across the entire image, and changing C produces a different Julia set.

• Pixel mapping: A one-dimensional pixel array can represent a two-dimensional image using an index such as y × width + x.
• Complex plane: A complex number has the form z = x + iy: x is the real horizontal component and y is the imaginary vertical component.
• Iteration: Square the current z, add the fixed C, and feed the result back into the same rule repeatedly.
• Escape test: The demonstration stopped when |z| exceeded the bailout radius of 100 or when the maximum of 100 iterations was reached.
• Color meaning: Non-escaping points were shown in black. Escaping points were colored according to how many iterations they took to escape; slower escape means more iterations.
• Smooth coloring: Using only integer escape counts creates visible color bands. Measuring how far a value overshoots the escape boundary provides a fractional, smoothed count and a continuous gradient.

Code and rendering structure

The displayed Processing/Java implementation used nested loops to visit every pixel, a custom Complex class, and hue–saturation–brightness color mapping.

• Complex operations: The custom class stored real and imaginary parts and supplied addition, squaring, and magnitude. Magnitude came from the Pythagorean formula √(x² + y²).
• Pixel workflow: Load the pixels, calculate and assign each pixel’s color, then update the display.
• Color cycle: Hue was wrapped with modular arithmetic so values beyond the chosen 0–400 range returned to the beginning of the rainbow.
• Animation: C was expressed through a radius and angle, then moved by oscillating those parameters with sine functions. Saved frames could be compiled into a smoother video.
• Retina displays: For Apple Retina screens, doubled display dimensions were used to align calculations with the higher pixel density.

Suggested Julia-set practice

Rebuild the image from a blank file so the code becomes a direct expression of your mathematical understanding rather than something merely copied.

• Start simply: Begin with black-and-white output: map each pixel to z₀, iterate z² + C, test for escape, and assign a color.
• Add refinement: Once the basic version works, add escape-time colors, smooth coloring, animation of C, frame saving, or interactive zooming.
• Practice rhythm: The suggested rhythm was roughly 20–30 minutes daily for a week or month, with weekly practice as a lighter alternative.

Continue the exploration

A follow-up code lab was offered for working through implementations, debugging, and receiving feedback. Check the course website for the confirmed schedule and bring an attempted implementation rather than waiting for complete understanding.

• Review materials: Use the class note sheet and source code that were to be shared after the session.
• Further experiments: Try z³ + C, alternative coloring methods, interactive scrolling and zooming, or coloring the non-escaping interior according to its cycles or convergence.
• Related directions: Explore the Mandelbrot set and other fractals related to the same family of iterative complex maps.