Gist e0d36dea72b5cd332eef9e4265715ff9

100%

Gist e0d36dea72b5cd332eef9e4265715ff9

✓ Published0🌍 Public

Last edited Sep 20, 2017

Created on Sep 20, 2017

This generative sketch displays a cartoon face rendered through layered procedural drawing commands, with a wall of overlapping code text scrolling horizontally in the background. The sketch uses the Processing.js (p5.js) API to draw shapes like ellipses, arcs, triangles, and rectangles, while the foreground text repeatedly includes the literal substrings “ITPIsAwesomeWeLoveCodingtrain” and “Codingsohard,” suggesting a playful commentary on learning to code. The face alternates between static and animated states, with randomized cheek positions and a frame rate change, all triggered by a variable that switches between two drawing branches. The code also manipulates a global offset variable to create the continuous text slide.

AI-generated description

Similar vizzes

Loading thumbnail…

qwe

This piece is a generative self-portrait built with the Processing API, using primitive shapes and canvas drawing functions. The artwork assembles a stylized face from arcs for hair and neck, ellipses for cheeks and eyes, and polygons for the nose and shoulders, with a t-shirt and the text "!TP" rendered via the `text()` function. The code relies on `createCanvas`, `background`, and shape-drawing calls like `arc`, `ellipse`, `triangle`, and `rect`, with explicit `fill` and `stroke` settings. The portrait is static, with no interaction or animation.

CChelseaChenC

71% match

Loading thumbnail…

Progress

A wall of smiling cartoon faces fills the screen, each with a yellow circular head, black outline, two eyes, and an arched mouth. The faces are randomly varied in stroke width, eye position and size, and mouth dimensions, creating a playful, chaotic grid of 12 distinct characters. The code uses React components to structure each face, while d3’s `arc` API generates the mouth path, and d3’s `range` creates the array of faces. Each face is rendered as inline SVG within a React app.

RRay Yang

68% match

Loading thumbnail…

Gist 56494ad7dada033af61cc1c9c3d87776

This example presents a full-screen, animated canvas of randomly colored square pixels that continuously redraws itself. It shows how a simple generative pattern can create a dynamic, shifting mosaic across the entire browser window. The code uses the Canvas 2D API with `fillRect` and `requestAnimationFrame` to refresh the display, while each frame assigns new random RGB values to every pixel block. The visualization responds to window resizing by updating the canvas dimensions, and it is rendered inside a draggable, resizable widget container.

HHypercubed

67% match

Loading thumbnail…

Gist c7122eee6247b95dba09

This example generates a continuously evolving abstract animation by drawing Voronoi polygons in alternating black and white. It shows a recursive process where each polygon’s edges are traced with short, sequential line segments that slowly shrink the polygon’s boundary, creating a spiral-like contraction. The animation uses D3’s `d3.geom.voronoi()` with a clip extent to create the polygons from random points, and then employs Canvas 2D API calls like `beginPath`, `lineTo`, and `stroke` to draw each step. A queue (`queue.js`) schedules the drawing of each polygon, and the code alternates stroke colors (`#000` and `#fff`) after each full pass, repeating indefinitely.

11wheel

67% match

Loading thumbnail…

Untitled

A grid of 18 procedurally generated cartoon faces is displayed, each rendered as an SVG circle with eyes and an arc-shaped mouth. The faces vary randomly in stroke width, eye offset, eye radius, and mouth dimensions, creating a playful sense of variety. The visualization uses React components to structure the face elements, while D3 v7’s `arc()` generator produces the mouth paths. Each face is drawn with a simple `<svg>` and `<g>` transform, with all random parameters generated on every render via `Math.random()` and the `range()` helper from D3.

Jjchen6912

66% match

Loading thumbnail…

make face... but in HTML!

This gallery example displays a grid of 18 procedurally generated cartoon faces, each rendered as a yellow circle with black outlines, distinct eyes, and a mouth. Each face is an SVG constructed from React components, including `BackgroundCircle`, `Eyes`, `Mouth`, and `Teeth`, which are composed within a parent `Face` component. The visual variation stems from random values applied to parameters like eye offset, size, and mouth radius. The code leverages D3’s `arc` to draw the mouth arc and D3’s `symbol` with `symbolTriangle` to render the teeth, all positioned through SVG transforms.

AAshford

66% match

Loading thumbnail…

Gist 67b47524ed8ed829d021

This animated SVG visualization, rendered with D3.js, explores how geometric forms can be generated through code. The page loads a script called `circle-lattice.js` that draws a grid of small, semitransparent red rectangles, each with a faint stroke trail that animates to show their movement or placement over time. The layout is minimal—a single heading "Scripts" above the canvas—and the emphasis is on the lattice of shapes as they are built and possibly repositioned, revealing structural patterns through the animation. The visualization uses D3's data-binding and SVG rendering to create a dynamic, generative composition.

11wheel

65% match

Loading thumbnail…

ascii-animation

Two separate animations play side by side: a pre-rendered sequence of block characters cycles through slides showing the growth of urban versus rural population, while a second panel flips the characters of a Donald Trump ASCII portrait line by line to create a mirror effect. The population sequence loads its frames from a text file and swaps them every 500 milliseconds using `setInterval`, updating the text of a `pre` element with `d3.select`. The portrait animation reverses each line’s characters and swaps slash directions every 100 milliseconds, using D3’s `xhr` calls to fetch both text files.

11wheel

65% match