Skip to content
Critical Web Design Wiki

8.1 Generative Practices

Overview
A Survey of generative practices across art, literature, and games.

Creative Coding Tools

Section titled “Creative Coding Tools”
Excerpt Section 8.1.5

In this book we prioritize foundational concepts in HTML, CSS, and JS which you can later apply to any project, regardless of what additional tool is trending. Still, we want to share a sample of the many powerful Javascript libraries and frameworks for creating generative design and art online. Many of these libraries were created by artists or designers, some of whom are featured in the book. We hope you experiment with these tools, and continue to seek out others that will advance your critical and creative coding experiences.

  • p5.js https://p5js.org (created by Lauren McCarthy, see the Case Study in this chapter), and the popular Processing programming environment https://processing.org (Ben Fry and Casey Reas) on which the Javascript version is based, have been instrumental in helping artists and designers learn programming concepts to create games, interactive experiences, and data visualizations.
  • SVG.js https://svgjs.dev (Wout Fierens) lets you dig deeper into SVG gradients, bezier curves, and animations. Its powerful functions make manipulating SVG files easier and enjoyable. Search for “SVG” on Codepen to see what other designers are doing with this versatile format.
  • Two.js https://two.js.org (Jonathan “Jono” Brandel) is a two-dimensional drawing library for the web that also lets you output graphics to the page using SVG, HTML Canvas, and WebGL. See his codepen for inspiring examples created using two.js
  • Paper.js http://paperjs.org (Jürg Lehni & Jonathan Puckey) is a vector graphics scripting framework that uses the HTML Canvas. As with others, check out the inspiring examples on their site.
  • Three.js https://threejs.org (Ricardo Cabello) is a 3D graphics library for the web using JS and WebGL. This framework, and Cabello’s (“mrdoob”) personal work, is rooted in the early generative visualizations of the DemoScene and Flash. See his work at https://mrdoob.com
  • D3.js https://d3js.org (Mike Bostock) is a multi-faceted visualization library popular among data journalists for telling stories with data.
  • Twine https://twinery.org (Chris Klimas) is a tool for telling interactive, nonlinear stories using HTML, CSS, and Javascript. Twine has a huge user base, especially for creating game-like narrative experiences https://itch.io/games/made-with-twine
  • The honorable mention goes to some of the popular UI frameworks we discussed in the introduction. “Reactive” tools like React, Angular, Vue, and Svelte can greatly simplify keeping your page content updated (in reaction to) changes to data in your code. While we considered incorporating them in the exercises (see our experiment with the Svelte UI Framework here https://criticalwebdesign.github.io#string-art-generator), their setup, complexity, and special syntax can add a lot of overhead, making them only helpful for creating large websites.

Flash

Section titled “Flash”

Macromedia’s Flash was a software tool that combined an animation timeline, a highly intuitive vector drawing and tweening tool, and a script editor which allowed creators to attach scripts to keyframes, objects, or events. Flash files could be exported in SWF format and then embedded in HTML. Flash was widespread, inspiring international conferences, and artists, designers, game developers across the web. Adobe, who purchased Macromedia, has mostly discontinued Flash today due to performance, accessibility, and security issues on mobile devices. While publishing Flash projects online is no longer possible one can still find evidence of its impact on generative design:

Generative Art and Design

Section titled “Generative Art and Design”

Lillian Schwartz & Kenneth Knowlton, Pixillation HD, 1970. In this film, Schwartz developed an editing technique that synthesized computer code, black and white pixels, and hand-drawn colored animation to create abstracted pixel-like movement with a seemingly saturated color palette. See https://archive.org/details/1970LillianSchwartzPixillation.

Frieder Nake Frieder Nake, 13/9/65 Nr. 2 (“Homage to Paul Klee”), 1965.

Screenshot of an artful browser filled with patterning, contrasting colors, and fluid, organic shapes. Casey Reas created 923 EMPTY ROOMS #874 using P5.js, see https://arttab.xyz/?id=114.

More inspiring examples of generative art and design

Kim Asendorf Work by Kim Asendorf https://naz.cx/ available in ArtTab https://arttab.xyz/ a chrome extension that features a vast collection of dynamic artworks https://arttab.xyz/explore

Electronic and Generative Literature

Section titled “Electronic and Generative Literature”

Examples related to computational, electronic, or generative literature/poetry

Two Moji

Two Moji: A Modern Epic of Love and Betrayal https://taper.badquar.to/2/two_moji.html (2018) by Mark Sample generates infinite dramatic stories depicting guilty pleasure, forbidden romance, and crimes of passion using only emoji and Javascript.

Two screenshots of Parrish’s The Nonsense Laboratory displays the Mixer and Explorer portions of the Laboratory’s interface. Allison Parrish, The Nonsense Laboratory, 2021, https://experiments.withgoogle.com/nonsense-laboratory.

Storyland

A pioneering work demonstrating these connections is Nanette Wylde’s Storyland. Wylde describes the project as “a randomly created narrative which plays with social stereotypes and elements of popular culture.” This work was developed in 2002, revised for a second version in 2004 with the now outdated application and web format Flash, and recently preserved for viewers with Ruffle (a Flash Player emulator written in Rust) by the Electronic Literature Lab in 2023. It is archived in Volume 1 of the Electronic Literature Archive.

Generative Design in Games

Section titled “Generative Design in Games”

procedural generation An example of procedural generation using the symbols, rules, and recursive nature (fractals) of an L-system to “grow” 3D models of weeds. Image uploaded to Wikipedia by user Solkoll.

No Man’s Sky Four screenshots from No Man’s Sky (2016) which used procedural generation to create over 18 quintillion planets, each with their own ecosystem and unique flora, fauna, and alien species.

Related examples found in video games

Demoscene

Section titled “Demoscene”
Another important influence on the history and practice of generative art is the demoscene, a subculture of hackers, clubs, and competitions (a.k.a. demoparties) that blended creativity, hacking, and hardware testing.

Emerging in Europe during the 1980s, demos were small self-contained computer programs written to test computer hardware capabilities using the most intense algorithmically-generated graphics and audio effects of the time. Typical competition categories restricted the size of the demo’s executable, the compiled code packaged into a single file, by overall size (e.g. 1k, 4k, or 64k), and platform (8-bit like Atari or Commodore 64 or 16 bit Amiga).

PC DOS Demoscene mix

While the results might appear simplistic today, their output can be appreciated for their technical and artistic constraints when considering the abundant limitations on their hardware and access to programming resources (Stinson, Liz. “The Ever-Changing Art of the Screensaver.” in Eye on Design).

Hologon by The Electronic Knights [Amiga 500]

For example, for the most part, coders could not depend on the internet or StackOverflow to figure out their codes. Many programs were typed directly by copying code out of hobbyist magazines. This was also very early in the history of 3D computer graphics development. The earliest releases of standards like OPENGL (Open Graphics Library) didn’t happen until 1992, and even then their functionality and rendering features were still very much a work in progress. The graphic effects in demos, much like the most artistic screensavers that emerged from this period, were thus limited to generative aesthetics that could be ported from math like transformations, primitive shapes, and other basic animated effects.

Hackers gathered in an ice rink during the 2004 Assembly demoscene party in Finland Hackers gathered in an ice rink during the 2004 Assembly demoscene party in Finland (credit)

Perhaps the biggest constraint on demos was due to the hardware itself, which was crude by today’s standards. This is in reality an essential component of the medium, since the goal of these programs was to push the hardware to its limit using real-time graphic effects. A Commodore 64, the standard in home computing at the time and one of the main targets for demos, included a 1.023 Mhz CPU, 64 KB of memory, and graphics card capable of 320x200 pixels and 16 colors. The iPhone 15 (late 2023) by comparison has not one but two 3.46 GHz processors, 6 GB of memory, and a separate GPU for graphics with 5 cores, a speed of 1.70 TFLOPS (teraflops), and a 2556 × 1179 resolution to display at least 16.7 million colors.

In other words, it would take more than 6,745 Commodore 64s to match the combined computing power of an iPhone that fits in your pocket today. Regardless, young people all over Europe lugged their heavy machines and their even heavier CRT (Cathode-ray tube) displays into events (Figure 8.10) to show off their work. Looking back at demos and early screensavers, these limitations together can be appreciated as contributing to the artistic and technological

Generative Interfaces

Section titled “Generative Interfaces”

Example generative art and design web interfaces

Emoji Simulator Nicky Case’s Emoji Simulator https://ncase.me/sim/ creates generative emoji “worlds” using Conway’s Game of Life and other systems.

NSynth Sound Maker The NSynth Sound Maker (2017) https://experiments.withgoogle.com/sound-maker by Yotam Mann uses machine learning trained with a neural network of over 300,000 instrument sounds.

Pixeldudesmaker Pixeldudesmaker by 0x72 https://0x72.itch.io/pixeldudesmaker lets you modify your preferences after an initial completely random output. See other procedural generator interfaces on the Chapter 8 wiki.