ChelseaChenC

@ChelseaChenC·3 public vizzes

path

A black vertical rule tracks the mouse horizontally across an empty SVG canvas. The visualization relies on D3 v4 event handling: a transparent rectangle captures mouseover and mousemove events, updating the path element’s `d` attribute to draw a line from the top to the bottom of the plotting area. The mouse-out event fades the line to opacity zero. The code uses `d3.select`, `d3.mouse`, and style manipulation, though no data is displayed—only the interactive guideline.

Apr 16, 2018

Loading thumbnail…

Gist e0d36dea72b5cd332eef9e4265715ff9

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.

Sep 20, 2017

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.

Sep 13, 2017