Creative Coding Deep Dive for Beginners

Begin by creating a beginner-friendly project to learn how to animate lines into lightning, spirals, and waves. It guides the setup of html canvas and linking style.css and script.js.

Set up an HTML canvas with index.html, style.css, and script.js, and create a 2d rendering context to learn beginPath, moveTo, lineTo, and closePath for drawing and animating lines.

Draw a rectangle on canvas using fill rectangle at 100,100 with size 50 by 150. Set color with fill style; outline with stroke rectangle using line width and stroke style.

Draw lines on canvas using beginPath, moveTo, lineTo, and stroke with configurable coordinates and line width. Animate by adding new segments and removing the oldest to crawl across the screen.

Create and animate multiple lines using a custom JavaScript line class with a constructor, new, and random start/end points and widths on a canvas, drawn via a public draw method.

Explore dynamic stroke colors using hsl in coding, generating a new random hue from 0 to 360 to vary line colors on each render, with saturation 100% and lightness 50%.

Build a generative art project in JavaScript by creating a lines array of 50 randomized line objects from a line class, drawing them on a canvas, and animating the result.

Create a multi-segment line from a history array of x and y coordinates, connect segments with a for loop and stroke on a canvas, and animate it.

Learn to animate lines on a canvas with a custom animate function and requestAnimationFrame. Build a line system with a history array, max length, and speed x/y to create motion.

Build a procedurally generated rainbow lightning storm on HTML canvas by animating 100 lines with random speeds and lifespans, using a history-based reset for flowing motion.

Explore applying linear gradients in HTML canvas to enhance shape fills and strokes, using color stops from pink to violet along a line from (0,0) to (canvas width, canvas height).

Construct a center-centered radial gradient from a 30-pixel inner circle to a 200-pixel outer circle with color stops at 0.4 green and 0.6 blue, then apply the gradient stroke.

Convert an image to a base64 data URL and fill canvas shapes with a pattern, using createPattern with no-repeat to reveal a seamless tile image.

Explore canvas shadows to create subtle 3d depth with a two-pixel shadow offset and white color, then optimize by reducing lines or disabling shadows while experimenting with spirals.

Explore trigonometry by using an ever-increasing angle in radians and sine to create wave motion, controlled by a curve that starts at 0.1 and grows at 0.25, resetting on restart.

Explore chaos scribbles in the creative coding deep dive for beginners course, turning spirals into broken lines using sine, cosine, random velocity, and lifespan-driven symmetry in flow fields.

Explore how a flow field guides particle motion on a grid, with movement controlled by cell angle values and field vectors, using a canvas demo with downloadable source code.

Set up a full-screen HTML canvas using JavaScript by selecting the canvas element, obtaining its 2D rendering context, and applying a white fill style while preventing scrollbars with absolute positioning.

Draw shapes on canvas using arc to form circles with center at 100,100 and radius 50, end angle 2pi. Build lines with begin path, move to, line to, then stroke.

Explore object oriented programming in JavaScript by building a particle system on canvas, using classes for particle and effect, and rendering animated lines through a modular, interactive setup.

Develop a particle system by initializing 50 particles with randomized x and y coordinates using a for loop inside an effect class constructor or init method, enabling reuse as boilerplate.

Animate particles in a flow field, moving right and down to leave trails. Build an animation loop with render, update, and requestAnimationFrame to control speed and direction.

Draw lines and trails by updating a particle’s x and y, recording history, and connecting positions. Limit history with a max length and use push and shift to create wiggle.

Apply trigonometry to animate particles with an angle in radians, driving sine and cosine to map positions along a sine wave, around a circle, and scale radius.

Create a flow field by building a grid of angles and using sine and cosine to form a spiral pattern, then map particle positions to cell angles to drive movement.

Explore how to create a flow field by mapping grid cells to angles and updating particle speeds with cosine and sine, generating animated lines and spiral patterns.

Explore flow field experiments using Perlin noise and trigonometry to create endless, repeating, symmetrical patterns; adjust curve, zoom, and cell size to shape spirals, grids, and particle dynamics.

Visualize a grid flow field by drawing vertical and horizontal lines while exploring cell size and zoom. Toggle debug mode with the D key to inspect per-cell angles.

Select hex colors with a color picker, assign a discolored property on the particle class, and use math.floor to pick a color index for stroke style in the draw method.

Learn how to implement responsive canvas design by syncing canvas size with browser window resize through a modular effect class, and efficiently manage particles and flow fields without memory leaks.

Experiment with flow field patterns by using sine and cosine on a 2d angle grid to create spiral curve patterns, tweaking operators, zoom, and curve.

refactor a canvas effect to draw text on a grid-based vector field, computing angle values with a trigonometry formula and rendering the text with fillText. configure font, center the text with textAlign center and textBaseline middle, and toggle debug mode with the d key to reveal the grid and large centered letters.

Draw text on a canvas, then use getImageData to extract pixel data for the full canvas and map white letter pixels to a grid via rgba values.

Run the init method once on load to build a text-shaped vector field from canvas pixels. Use a 20×20 grid and red, green, blue and alpha values to drive angles.

Convert each pixel’s grayscale value to a flow angle, mapping 0–255 to 0–6.28 radians, so red, blue, and green hues guide the vector field’s directions.

Explore how linear and radial gradients influence particle flow on canvas by applying color stops and varying gradient direction, while adjusting the text max width.

Explore how particles follow a flow field grid with gradual angle corrections, using an angle corrector to smooth turns, and apply canvas text to shape the field around letters.

Learn to build image flow field by drawing an image on canvas, converting it to a base64 string to avoid cross-origin taint, and deriving a vector field from pixel data.

Preserve and use the original image colors by reading per-pixel rgb values into a flow field and mapping them to particle colors, while gradually transitioning colors along the particle paths.

Swap images, edit the base64 data in index.html, and redraw with new colors. Explore resources and bonus experiments while learning animation, array manipulation, and for loops.