Algorithmic Art: Using Code to Produce Art—Where to Start?

ThatPainter is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More

Start with p5.js in the browser. It is the quickest route from a little Python and HTML knowledge to visible, interactive artwork. Use it to learn canvases, coordinates, text, loops, randomness, noise, images, and animation. If your main goal is to generate large numbers of finished image files rather than experiment interactively, use Python with Pillow instead.

As an Amazon Associate I earn from qualifying purchases.

For the specific idea of turning words or letters into an image, begin with a random typographic field, then progress to a text mosaic: a target image is reduced to a grid, each cell is measured for brightness, and a glyph is selected and drawn according to that value. Simply shuffling letters produces texture; it does not, by itself, produce a recognizable portrait or scene.

What algorithmic art actually means

Algorithmic art is art made through explicit procedures, rules, calculations, or algorithms. Generative art is a broader term for work produced by a system with some autonomy, such as code, randomness, simulation, interaction, data, or machine learning. Procedural art usually refers to rule-based construction of patterns, textures, environments, or objects. Creative coding means programming primarily for expressive, exploratory, or artistic purposes.

These categories overlap, but none means simply “art made randomly.” A deterministic geometric drawing can be algorithmic without containing any randomness. A generative work can be carefully constrained, repeatable, interactive, or data-driven. Randomness creates variation; the artist still chooses the rules, limits, inputs, palette, typography, parameters, and final output.

The tradition also predates contemporary generative-AI systems. Artists including Vera Molnár and Manfred Mohr used geometry, rules, programming, and plotters in early computational art. The Victoria and Albert Museum’s history of digital art places this work in the longer development of algorithmic and generative practice. Frederick Hammersley is an especially relevant example for a typographic project: his computer-generated drawings used alphabetic characters and symbols as visual material, as discussed by the Whitney Museum.

That distinction matters when choosing what to learn. A p5.js sketch, a particle simulation, a GLSL shader, a TouchDesigner network, and a diffusion model can all be called generative in some context, but they involve very different skills and give the artist different kinds of control.

Which tool should you choose?

What you want to make	Good starting tool	Main reason
Immediate browser-based visual experiments	p5.js	No installation, fast visual feedback, straightforward HTML interaction, and a beginner-friendly reference
Desktop sketches and downloadable applications	Processing	A purpose-built creative-coding environment with examples, renderers, libraries, and application export
Batch-generated image files	Python + Pillow	Natural access to images, fonts, pixels, file formats, automation, and Python data tools
Live visuals, projection, cameras, and audiovisual systems	TouchDesigner	Real-time, node-based media processing
Procedural 3D scenes and rendered animation	Blender + Python	Python can create and modify scenes, meshes, particles, materials, animation, and renders
High-performance native installations or hardware projects	openFrameworks	A powerful C++ creative-coding toolkit for desktop, mobile, and embedded platforms
GPU-based textures, fluid effects, and millions of pixel operations	GLSL shaders	Parallel processing on the graphics card, at the cost of a steeper graphics and mathematics learning curve

This is a recommendation for an artist who knows a little Python and HTML, not a universal ranking. p5.js is designed for artists, designers, beginners, and educators, and the project describes its purpose as creative coding on the web. Its Web Editor lets you create, share, and remix sketches without first configuring a local development environment.

When the alternatives make more sense

Choose Processing if you prefer a desktop sketchbook, want to export standalone applications, or want a long-established teaching environment. Processing uses a Java-based language and environment; its beginner-oriented PDE hides much of the complexity of an ordinary Java application. The official overview, Getting Started tutorial, and environment guide explain the workflow.

Choose Python and Pillow if the finished result is primarily a PNG, JPEG, TIFF, or WebP file, especially if you want to render hundreds of variations overnight. Python also connects naturally to NumPy, OpenCV, data files, and automated naming or metadata.

Choose TouchDesigner for live audiovisual work rather than as your first programming lesson. Check its licensing before using it commercially: Derivative states in its licensing documentation that non-commercial use cannot be used for paid work, and compensated projects require the appropriate Commercial or Pro license.

Choose Blender when the artwork is fundamentally three-dimensional, spatial, animated, or render-based. Blender’s Python API quickstart documents access to scenes, meshes, particles, rendering, interface elements, and tools.

Choose openFrameworks later for performance-sensitive installations, hardware, camera systems, or native applications. It is an open-source C++ toolkit, and its about page and learning resources are the right starting points. C++ setup makes it a poor first step for the project described here.

Do you need to learn programming first?

No. You do not need to complete a general computer-science curriculum before making art. You do need a small, practical subset of programming:

• Variables, numbers, and strings
• Functions
• for loops and nested loops
• Conditional statements
• Arrays or lists
• Coordinates and dimensions
• Color values
• Randomness and seeded randomness
• Basic debugging
• Saving and loading images, fonts, and data

Learn each concept through a visual exercise rather than separating “programming study” from “art study.” The Processing beginner tutorial recommends running examples, altering them, breaking them, and enhancing them. That is an excellent creative-coding method: change one line, observe what happened, and form a visual question from the result.

Programming idea	Visual exercise
Variables	Change the canvas size, color, circle radius, or spacing
Loops	Draw a grid of shapes or letters
Conditions	Draw only selected cells or shapes above a threshold
Arrays	Store a palette, phrase, or character set
Functions	Turn one visual operation into a reusable brush
Randomness	Vary position, rotation, size, opacity, or color
Noise	Create smooth, organic movement instead of independent jumps
Objects or classes	Build particles, agents, letters, or other independent elements
Events	React to mouse movement, keyboard input, or typed text
File input and output	Load an image, font, palette, or data set and save the result

Your first p5.js sketches

Open the p5.js Web Editor, create a sketch, and replace its starter code with the examples below. These use basic APIs shared by p5.js 1.x and 2.x, so they are suitable while the project is moving between versions.

1. Draw one shape

function setup() {
  createCanvas(500, 500);
  background(245);
  fill(20);
  circle(width / 2, height / 2, 120);
}

This teaches the canvas, coordinates, background color, fill color, and a shape primitive. The coordinate (0, 0) is the upper-left corner; width and height refer to the canvas dimensions.

2. Repeat the shape in a grid

function setup() {
  createCanvas(500, 500);
  background(245);
  fill(20);
  noStroke();

  for (let y = 20; y < height; y += 30) {
    for (let x = 20; x < width; x += 30) {
      circle(x, y, 12);
    }
  }
}

The nested loops are already a compositional system. Change the spacing, canvas ratio, or shape and you have a family of related images rather than one manually positioned drawing.

3. Add controlled variation

function setup() {
  createCanvas(500, 500);
  background(245);
  noStroke();

  for (let y = 20; y < height; y += 30) {
    for (let x = 20; x < width; x += 30) {
      let size = random(4, 28);
      fill(random(40, 220));
      circle(x, y, size);
    }
  }
}

Now the rule contains variation. The important artistic question is not “How do I make it random?” but “Which properties may vary, by how much, and what must remain stable?” A fixed grid, limited palette, and narrow size range create a different visual language from unrestricted random placement.

4. Make the variation reproducible

function setup() {
  createCanvas(500, 500);
  randomSeed(42);
  background(245);
  noStroke();

  for (let y = 20; y < height; y += 30) {
    for (let x = 20; x < width; x += 30) {
      let size = random(4, 28);
      fill(random(40, 220));
      circle(x, y, size);
    }
  }
}

Run this repeatedly: it produces the same pseudo-random sequence. The p5.js randomSeed() reference documents that the function makes sequences produced by random() and randomGaussian() repeatable. Treat the seed as part of the artwork’s record, not as a disposable implementation detail.

5. Replace circles with letters

let phrase = 'ALGORITHMIC ART';

function setup() {
  createCanvas(700, 500);
  textFont('monospace');
  textSize(18);
  textAlign(CENTER, CENTER);
  randomSeed(42);
  background(245);
  fill(20);

  for (let y = 15; y < height; y += 24) {
    for (let x = 15; x < width; x += 24) {
      let index = floor(random(phrase.length));
      let character = phrase[index];
      let angle = random(-0.4, 0.4);

      push();
      translate(x, y);
      rotate(angle);
      text(character, 0, 0);
      pop();
    }
  }
}

This is a valid first generative artwork: a field of letters with controlled rotation and a repeatable seed. It is not yet a recognizable image. That requires a target image and a mapping from image information to typographic information.

Four different letter-based projects

“Turn words into an image” can mean several different things. Decide which one you actually want before choosing a more complicated technique.

A. Random typographic field

Select characters from a phrase, place them on a grid or along paths, and vary their scale, color, opacity, rotation, or position. This produces an abstract texture or typographic atmosphere. It is the easiest place to start.

B. Text mosaic

Load a portrait, photograph, or drawing; reduce it to a grid; measure the brightness or color of each cell; and select a glyph that visually represents that value. The result is a recognizable image constructed from letters or symbols.

C. Edge-following typography

Detect contours or edges in a source image, place words along those paths, and rotate each word according to the local direction of the path. This can look more illustrative than a regular grid, but requires edge detection, path sampling, typography measurement, and collision management.

D. Glyph particles

Treat each letter as an independent agent with a position, velocity, acceleration, target position, color, rotation, and lifetime. Letters can assemble into a portrait, respond to the mouse, or disperse as particles. Learn loops, arrays, vectors, and animation first; this is a later project, not the first exercise.

Build a text mosaic

The core pipeline is:

source image → resized grid → brightness values → glyph selection → rendered text image

For every cell in the grid:

1. Find the corresponding region of the source image.
2. Calculate its brightness, usually from red, green, and blue values.
3. Map that brightness to an index in a character ramp.
4. Draw the selected character at the cell’s position.

A common dark-to-light ramp is:

@%#*+=-:. 

Dense characters such as @ represent dark image areas, while sparse characters such as . or a space represent light areas. If the result appears inverted, reverse the ramp:

 .:-=+*#%@

A minimal p5.js mosaic

Upload a small, high-contrast image called portrait.jpg to the sketch’s local asset or data area. Loading a local asset is more reliable for a first experiment than fetching an image from another website.

let source;

const cols = 100;
const rows = 70;
const cellWidth = 10;
const cellHeight = 14;
const ramp = '@%#*+=-:. ';

function preload() {
  source = loadImage('portrait.jpg');
}

function setup() {
  pixelDensity(1);
  createCanvas(cols * cellWidth, rows * cellHeight);

  source.resize(cols, rows);
  textFont('monospace');
  textSize(cellHeight);
  textAlign(LEFT, TOP);
  noStroke();
  noLoop();
  renderMosaic();
}

function renderMosaic() {
  background(255);
  fill(0);

  for (let row = 0; row < rows; row++) {
    for (let col = 0; col < cols; col++) {
      let colour = source.get(col, row);
      let brightness =
        0.2126 * colour[0] +
        0.7152 * colour[1] +
        0.0722 * colour[2];

      let index = round(map(brightness, 0, 255, 0, ramp.length - 1));
      let character = ramp[index];
      text(character, col * cellWidth, row * cellHeight);
    }
  }
}

function keyPressed() {
  if (key === 's' || key === 'S') {
    saveCanvas('text-mosaic', 'png');
  }
}

This code intentionally uses a modest 100-by-70 grid. It is easier to understand and faster to render than sampling a full-resolution photograph. Press S to save a PNG.

The formula weights green more heavily because human vision is more sensitive to green than blue. You do not need to treat that formula as sacred; changing the weights can become part of the visual process. You can also use a monochrome source image and read a single channel.

Use a particular phrase rather than an ASCII ramp

If the requirement is that the image be made from a typed phrase such as ALGORITHMIC ART, let the phrase determine the repeating character while the sampled brightness controls its visual strength:

let phrase = 'ALGORITHMICART';
let character = phrase[(row * cols + col) % phrase.length];
let opacity = map(brightness, 0, 255, 255, 10);
fill(0, opacity);
text(character, col * cellWidth, row * cellHeight);

Dark source areas receive nearly opaque letters; light areas receive faint letters. This creates a recognizable image while preserving the chosen phrase. Another option is to arrange the phrase’s characters from visually dense to visually sparse, then use brightness to select among them. Since different fonts have different glyph shapes and weights, the correct order is something you should test rather than assume.

Typography is part of the algorithm

A text mosaic is not a square pixel grid with letters pasted on top. Characters have widths, ascenders, descenders, baselines, side bearings, and different visual densities.

• Start with a monospace font so each cell has a predictable width.
• Use separate horizontal and vertical spacing. A character is usually taller than it is wide.
• Test at the final intended output size. A mosaic that looks clear when enlarged may become muddy as a small image.
• Measure glyphs with textWidth() or textBounds() when exact placement matters.
• Load and identify the font deliberately; changing the font can change the entire image.
• Use a condensed font if the output looks horizontally compressed, or widen the cell spacing.

The p5.js reference includes text, font, textWidth(), and textBounds() APIs. Its font tools also support more advanced work with text points and paths. At a later stage, you can place letters along measured curves rather than on a regular grid.

Add typed input and interaction

p5.js can combine a canvas with ordinary HTML controls. The following sketch creates an input field and uses the typed phrase as a deterministic sequence of letters:

let input;

function setup() {
  createCanvas(700, 500);
  input = createInput('ALGORITHMIC ART');
  input.position(10, height + 10);
}

function draw() {
  background(245);
  fill(20);
  textFont('monospace');
  textSize(18);
  textAlign(CENTER, CENTER);

  let phrase = input.value() || 'ART';

  for (let y = 20; y < height; y += 24) {
    for (let x = 20; x < width; x += 24) {
      let index = (floor(x / 24) + floor(y / 24)) % phrase.length;
      text(phrase[index], x, y);
    }
  }
}

Here, the character choice is sequential and deterministic. To introduce independent variation, replace the index with:

let index = floor(random(phrase.length));

The createInput() reference and the input event API show how to respond only when the value changes rather than recalculating an expensive image every frame.

Useful controls include:

• A phrase or character-set input
• Sliders for cell size, rotation, opacity, contrast, and jitter
• A font selector
• A limited color palette
• A seed field or “regenerate” button
• A save button

Use randomness and noise differently

Use random() for independent changes: one letter gets a different angle, size, or color from the next. Use noise() when neighboring values should change smoothly. For example:

let angle = map(noise(x * 0.01, y * 0.01), 0, 1, -0.5, 0.5);

Independent random angles look scattered. Noise-based angles create flow fields and organic regions. p5.js describes noise() as a way to generate smoothly varying values across space or time. The free online Nature of Code chapter on randomness is useful once you want to understand why uniform randomness often looks harsh and how noise can create more coherent movement.

p5.js setup and version caution

The Web Editor is the easiest starting point. If you prefer a local HTML project, use a version-pinned script rather than allowing a tutorial’s dependency to change silently:

<script src='https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js'></script>

The official p5.js download page currently lists 2.3.1 and provides both a pinned CDN URL and an unpinned p5 2.x URL. However, first-party pages have not always shown identical release states: the GitHub releases page has presented a different stable and release-candidate state, and the editor’s 1.x-to-2.x transition has been documented separately in a Processing forum development update.

Do not assume that every online editor, tutorial, and local project is using the same version. Check the selected library version in the editor, or pin the version in your own HTML. The examples in this article deliberately use long-established functions shared across the transition.

Images, pixels, and browser problems

p5.js supports image loading, resizing, display, and pixel operations through image() and p5.Image. For a first mosaic, use a local image and load it in preload() so the rendering code does not run before the file is available.

An image fetched from another domain can fail because of browser cross-origin security rules. If a portrait will not load or its pixels cannot be read, test with a small PNG inside the sketch’s own asset or data folder first. Check the browser console, verify the path and filename, and do not debug image loading and pixel mathematics at the same time.

There is also a pixel-density trap. A high-density display may have two physical pixels for every logical canvas pixel. Direct use of loadPixels() and pixel-array indexing can therefore produce dimensions that do not match the canvas coordinates you expected. The Processing documentation explains the issue through pixelWidth and pixels. Setting:

pixelDensity(1);

makes beginner indexing easier to reason about, though it may reduce the sharpness of a retina-display preview. It is a consistency and debugging choice, not an unconditional quality setting.

The mosaic example uses source.get(col, row) for clarity. For much larger images, direct pixel access is faster, but then you must understand image dimensions, pixel density, channel order, and when loadPixels() has been called.

How to stop randomness becoming visual noise

A first random sketch often looks like noise because every property is changing independently. That is not a failure of code; it is information about the system’s constraints.

1. Freeze the seed.
2. Reduce the number of changing variables.
3. Keep the composition or grid fixed.
4. Change one parameter at a time.
5. Limit the palette and character vocabulary.
6. Introduce hierarchy: foreground and background, large and small, dense and sparse.
7. Generate many candidates, then curate the strongest results.

A generative artwork is not necessarily the first output of a script. Selection, editing, cropping, color correction, and deciding which rules remain are all legitimate parts of an artistic workflow. If you want the system itself to carry more of the composition, add constraints rather than merely adding more randomness.

Move from a sketch to a reproducible artwork

For every favored variation, record:

• Random seed
• Canvas width and height
• Grid or cell dimensions
• Font name and font file
• Phrase or character ramp
• Source image and crop mode
• Palette and contrast settings
• Rotation, jitter, opacity, and noise parameters
• p5.js, Processing, or Pillow version
• Export date

For example, a parameter record might contain:

{
  "seed": 4217,
  "canvasWidth": 2000,
  "canvasHeight": 2000,
  "cellWidth": 12,
  "cellHeight": 18,
  "font": "monospace",
  "phrase": "ALGORITHMIC ART",
  "palette": ["#111111", "#EAEAEA"],
  "sourceImage": "portrait.jpg",
  "p5Version": "2.3.1"
}

p5.js provides saveCanvas() for PNG, WebP, or JPEG output and saveJSON() for parameter objects. Preserve a package such as:

artwork.png
sketch.js
index.html
source-image.jpg
font-file-or-font-name.txt
parameters.json
README.md

In generative practice, the exported image may be only one part of the work. The rule system, seed, parameters, source material, font, and software environment can all matter to its provenance and reproducibility.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Exporting stills and animation

For a still image, call saveCanvas('letter-art', 'png') after rendering. Render at the size you actually need, but develop at a smaller grid first.

For animation, keep the expensive image-processing work outside draw() whenever possible. Use a precomputed target grid, an offscreen buffer, or createGraphics() for drawing that does not need to appear directly on the main canvas.

Browser export has practical limits. The p5.js documentation for saveFrames() notes a maximum duration of 15 seconds and a maximum frame rate of 22 frames per second, and warns that large canvases can consume enough memory to crash a sketch or browser. saveGif() is available for GIF output. For longer or higher-resolution animation, render frames selectively or move the job to Processing, Pillow, Blender, or another offline workflow.

The Python and Pillow route

Because you already know some Python, Pillow may be the most efficient route if your main interest is image generation rather than browser interaction. Its ImageDraw module draws text and shapes, and ImageFont.truetype() loads TrueType and OpenType fonts.

This is the same brightness-to-glyph algorithm in Python:

from PIL import Image, ImageDraw, ImageFont

source = Image.open('source.jpg').convert('L')
cols, rows = 100, 70
source = source.resize((cols, rows))

cell_width, cell_height = 10, 14
output = Image.new('RGB', (cols * cell_width, rows * cell_height), 'white')
draw = ImageDraw.Draw(output)
font = ImageFont.truetype('YourMonoFont.ttf', 14)

ramp = '@%#*+=-:. '

for row in range(rows):
    for col in range(cols):
        brightness = source.getpixel((col, row))
        index = round(brightness / 255 * (len(ramp) - 1))
        character = ramp[index]
        draw.text((col * cell_width, row * cell_height), character, fill='black', font=font)

output.save('text-mosaic.png')

For a phrase-based version, replace the ramp selection with a repeating phrase character and use brightness to control the ink strength, font size, or color. For example, create an RGBA output and draw each phrase character with an alpha value that becomes lower as the source brightness increases. Or build a custom character ramp from the phrase, ordered by the visual density of its glyphs.

Pillow is particularly useful for batch work: loop through seeds, palettes, source images, or parameter combinations; generate filenames from the seed; and write a JSON record beside every image. For a simple interactive desktop window, Python’s standard-library tkinter.Canvas supports text, images, lines, ovals, polygons, and event bindings, but p5.js is usually more immediate for experimental visual work.

A practical learning roadmap

Stage 1: Visual primitives

Learn coordinates, shapes, text, color, stroke, fill, canvas dimensions, and drawing order. Make a grid of circles, a palette study, a typographic poster, and one composition with adjustable parameters.

Stage 2: Repetition and variation

Learn loops, nested loops, arrays, functions, random values, seeded randomness, and noise. Make a tiled pattern, a random letter field, a noise-driven line drawing, and ten controlled variations of one system.

Stage 3: Motion and interaction

Learn draw(), frameCount, mouse and keyboard events, state variables, timing, and particle-like objects. Make letters that drift toward target positions, a mouse-controlled typographic field, and a sketch that regenerates when a key is pressed.

Stage 4: Images and data

Learn image loading, pixel sampling, grayscale conversion, palette mapping, resizing, and normalization. Make an ASCII portrait, a colored text mosaic, edge-following typography, and an image transformed into particles or glyphs.

Stage 5: Systems and simulations

Next learn vectors, forces, particle systems, autonomous agents, cellular automata, fractals, and evolutionary systems. The current online edition of The Nature of Code uses JavaScript and p5.js and progresses through randomness, vectors, forces, oscillation, particles, autonomous agents, cellular automata, fractals, evolutionary computing, and neural networks.

Stage 6: Shaders

Move to GLSL only when you want highly parallel pixel operations, procedural textures, fluid-like effects, reaction-diffusion, ray marching, or real-time image processing. The Book of Shaders covers algorithmic drawing, patterns, noise, image processing, simulations, and 3D graphics, but its introduction recommends becoming comfortable with Processing before beginning shader programming. Shaders can be very fast for appropriate GPU workloads, but performance depends on the implementation, resolution, browser, graphics hardware, and movement of data between the CPU and GPU.

Where each path leads

Stay with p5.js for web sketches, interactive 2D work, typography, animation, and easy sharing. Move to Processing for a desktop-centered sketchbook, high-resolution exports, and standalone applications. Move to Pillow for offline rendering and large batches of image files. Study Nature of Code for particles and simulations. Move to shaders for GPU-scale pixel effects. Choose TouchDesigner for node-based live installations, and Blender for procedural 3D. Choose openFrameworks when native performance, hardware, or a custom C++ application justifies the additional setup.

Common problems and fixes

“My result is random noise, not art.”

Freeze the seed, reduce the number of changing variables, keep a fixed composition, limit the palette, and change one parameter at a time. Add constraints such as a grid, hierarchy, repeated motif, or defined region of activity. Generate several outputs and curate them.

“Every run is different, so I cannot reproduce the good one.”

Call randomSeed(12345) before the random operations and save the seed with the artwork. Also save the canvas size, parameters, font, source image, palette, and software version.

“My letters do not form a recognizable image.”

The program is probably only shuffling characters. Use a target image, sample its brightness, and map that value to glyph choice, opacity, size, or color. Begin with a high-contrast source and a grid of roughly 50 to 150 columns. If the image looks like a photographic negative, reverse the character ramp. If it disappears, increase contrast or use darker glyphs.

“The output is stretched.”

Characters are normally taller than they are wide. Use independent cellWidth and cellHeight, measure glyph bounds, adjust spacing, and test with a calibration grid. A monospace or condensed font is usually easier to control.

“The image will not load.”

Check the filename and path, place the image in the sketch’s local asset area, load it in preload(), and test with a small PNG. A remote image may be blocked by cross-origin browser rules. Check the browser console before changing the pixel algorithm.

“The pixel array has the wrong dimensions.”

High-density displays can change the physical pixel dimensions used by pixel operations. Try pixelDensity(1) while debugging and confirm that your indexing matches the actual image or canvas dimensions. This may reduce high-density preview sharpness.

“The browser freezes.”

Reduce the grid resolution, sample a smaller image, render only when the input changes, move expensive work out of draw(), use an offscreen graphics buffer, and avoid repeatedly saving frames. For large pixel-processing jobs, use Pillow, native Processing, or shaders.

“A tutorial works differently from my sketch.”

Identify whether it uses p5.js 1.x, p5.js 2.x, Processing’s Java-based language, or an add-on library. Pin the library version, read the matching reference, and reduce the example to a minimal sketch. Tutorials often omit which part is a core API and which part depends on a separately loaded library.

A good first-week plan

1. Session one: make the single shape, grid, and controlled-variation sketches.
2. Session two: replace the shapes with letters, add a phrase, and experiment with font, spacing, rotation, and color.
3. Session three: add randomSeed(), save several seeds, and make a small parameter panel.
4. Session four: load a high-contrast image and build the brightness-based text mosaic.
5. Session five: add a limited palette, contrast control, export, and a metadata file.
6. After that: choose whether the next project needs particles, edge-following text, batch rendering, live interaction, 3D, or shaders.

The key is to make each programming concept visible. Do not wait until you “know enough code.” Change the grid, alter the font, reverse the ramp, constrain the randomness, and observe how a small rule produces a large visual difference.

Frequently Asked Questions

Do I need machine learning to make generative art?

No. Algorithmic and generative art can be made with deterministic rules, loops, geometry, randomness, noise, simulations, interaction, images, or data. Machine learning is one possible technique, not a prerequisite.

Should I learn p5.js or Python first?

For interactive visual experiments and browser-based artwork, start with p5.js. For batch rendering and direct manipulation of image files, Python with Pillow may be the better fit. You can learn either through the same progression: shapes, grids, loops, variation, images, and export.

What is the difference between ASCII art and a text mosaic?

They overlap. Classic ASCII art normally uses a limited set of text characters to represent tonal values, while a text mosaic may also use color, custom fonts, arbitrary words, image sampling, opacity, rotation, or a phrase chosen for conceptual reasons.

How do I preserve a generative artwork?

Save the exported image together with the source code, seed, parameters, font, source image, palette, export date, and software version. The reproducible rule system may be as important as the selected output.

The Bottom Line

Begin with p5.js: draw a shape, repeat it in a grid, add controlled randomness, replace the shapes with letters, and then sample a target image to create a text mosaic. Use randomSeed() and save your parameters. Move to Pillow for batch image generation, Processing for desktop sketches, Nature of Code for simulations, shaders for GPU-scale effects, TouchDesigner for live media, Blender for procedural 3D, and openFrameworks for native high-performance work.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.