Creative Coding

Visual and interactive projects built with p5.js library.

Projects

Shape Invaders

A space shooter game built with p5.js. Defeat the shapes and your math anxiety! Features multiple enemy types, player power ups, sound effects and synthy background music. And for a blast from the past, a classic hidden easter egg!

Demo: https://editor.p5js.org/wenners/sketches/qkgJJzoxr

Scanimation

An example of barrier-grid animation.

Viewers can control the speed of animation by sliding the mouse across the canvas to make the cat "move". Press mouse key to remove grid and reveal underlying image. https://en.wikipedia.org/wiki/Barrier-grid_animation_and_stereography

Demo: https://editor.p5js.org/wenners/sketches/qEp5tJIk3

Doodleshop GUI

Demo: https://editor.p5js.org/wenners/sketches/UCmEL35Tz

Eye Roll Clock

A take on visualizing time.

The direction of irises corresponds to position on a traditional clock face.

• First pair of eyes track hours
• Second pair of eyes track minutes
• Third pair of eyes track seconds

The color brightness corresponds to the time of day. Base color is generated randomly. Color brightness is map to the minutes in a day, updated per minute and cycle ever 12 hours.

Demo: https://editor.p5js.org/wenners/sketches/CvF6tAr4G

Optical Illusion - Peripheral Drift

This is an example of apparent motion. Your eyes are oversaturated with information that there's a latency for when each shape is processed by the eye and that gives the illusion of wavy movement. https://en.wikipedia.org/wiki/Peripheral_drift_illusion

Demo: https://editor.p5js.org/wenners/sketches/Yosb4648_

Sol Lewitt Motion

This is the same generative polgyon mesh with motion.

Demo: https://editor.p5js.org/wenners/sketches/xSu7V6zuT

Generative Sol Lewitt Poster Exploration

This generative polygon mesh is a exploration of the Sol Lewitt prompt: six white geometric figures (outlines) superimposed on a black wall. https://massmoca.org/sol-lewitt/

Demo: https://editor.p5js.org/wenners/sketches/z0l3-j26H-

Prism - Expression Typeface

Demo: https://editor.p5js.org/wenners/sketches/mv5x3sQtN

Rule-Based Typeface Design

Demo: https://editor.p5js.org/wenners/sketches/s02NcF1zZ

Generative Gift Wrap Design

Generative gift wrapping pattern in Memphis Design style.

Demo: https://editor.p5js.org/wenners/sketches/9Tr062PYu

Representational Poster

Demo: https://editor.p5js.org/wenners/sketches/Q_6tU36SE

Movie Poster Color Exploration

Demo: https://editor.p5js.org/wenners/sketches/RA9f3Q2qC

Movie Poster Grayscale

Demo: https://editor.p5js.org/wenners/sketches/LMdg9GIxc

Built With

• p5.js
• Javascript
• CSS