Skip to content
Critical Web Design Wiki

8.2 Generative Arp

Overview
The Generative Arp design and coding process.

Chapter Prompt

Section titled “Chapter Prompt”

Untitled Untitled (Collage with Squares Arranged according to the Law of Chance) can be found on the Museum of Modern Art’s website: https://www.moma.org/collection/works/37013

Generative Arp A screenshot from our Generative Arp https://criticalwebdesign.github.io/book/08-generative-design/8-3/

Generative Arp Process

Section titled “Generative Arp Process”

flowchart A visual flowchart showing the flow of the program described by the pseudocode.

Four screenshots showing random numbers of boxes. Four examples of outputs producing a random number of divisions that would hold polygons in later exercises.

Screenshots demonstrating Generative Arp so far Two instances of Generative Arp show a random number of rectangles in red.

Side-by-side screenshots showing a random number of polygons filled with a variety of colors. Two instances of Generative Arp with various colors and rotations.

8.2 SVGs and Color Arrays

Section titled “8.2 SVGs and Color Arrays”

A cyan triangle, magenta square, and yellow circle next to the letters “svg” in black above a block of code that renders the image. SVG images https://www.w3schools.com/graphics/svg_intro.asp are created using XML (eXtensible Markup Language), making their code easy to understand like HTML.

Screenshot of an SVG in Chrome with DevTools showing its code. The SVG appears as an image in the Chrome browser, but a closer look at its source code shows how this image is composed of coordinates between the open and close <svg> tags.

Myriad shapes in a variety of colors, sizes, and positions on a dark background. The polygons in the browser. Click or reload the page to see their color, size, and position change.

diagram This diagram illustrates how the polygon points are selected. Each magenta circle defines the area within which the x or y values could be created.

Multi-colored polygons on a dark background. SVG Polygons generated for the browser. Click or refresh the page to see a new composition of polygons.

Screenshot of the export interface on coolors.co. Export the code from a trending color palette on https://coolors.co/palettes/trending

A diagram showing how a PRNG can be used to select random colors from an array A diagram showing how a PRNG can be used to select random colors from an array. Each color is stored at an index number starting at 0.

Side-by-side screenshots of the project expressed with two color palettes: blue and purple hues on the left and orange and yellow hues on the right. Two palettes from Coolors.co in our Generative Arp project.

the Generative Arp project will include controls for the number of polygons and their height values When you complete the exercises in 8.2 your version of the Generative Arp project will include controls for the number of polygons and their height values.