p5js Sketches
-
p5.js - Common Examples - Bezier Shapes
Demonstrates the display and interaction of Bezier curves and splines. -
p5.js - Common Examples - Draggable Shapes
Implements draggable shapes for use in other sketches. -
p5.js - Common Examples - Paisley
Demonstrates the drawing of a simple Paisley shap.ebe -
p5.js - Common Examples - Quadtree
Implementation of a quadtree data structure, which groups data points into successively nested quadrants, which allows for fast access of elements in an area. -
p5.js - Common Examples - Teardrop Shapes
Demonstrates the display and interaction of teardrop shapes. -
p5.js - Ecosystem
Randomly generated terrain, with the intention of creating an environment in which an ecosystem can be modeled. -
p5.js - Forest Fire Simulation
Simulates forest fire propagation using cellular-automaton modeling, with basic interaction to create fire breaks. -
p5.js - Forest Fire Simulation - Part 2
Adds interaction to the forest fire simulation sketch, with limits to amount of fire breaks that can be added, and ability to load different scenarios. -
p5.js - Forest Simulation
Simulates the life-cycle of individual trees in a small forest, as they compete over resources. -
p5.js - Fractal Trees - Coding Challenge #15
Simulates tree growth with apical meristem cells driving growth at the end of branches, which secrete auxin, a growth inhibitor (shown as pink) which prevents lateral growth for little while. -
p5.js - Fractal Trees - Space Colonization
Models root growth based on 'space colonization' algorithm, where roots grow in spurts in an attempt to secure resources. -
p5.js - Frieze Pen
Allows you to draw a frieze, reflecting the lines you draw through a horizontal line, and repeating off to the right. -
p5.js - KeyViz
Preliminary sketch to record keyboard input and allow it to be played back, with the intention of allowing the user to create time-based drawings. -
p5.js - Logic Gates
Basic simulation of logic gates, switches, and clock signal inputs, along with a set of scenarios to load. -
p5.js - Maze Generator - Coding Challenge #10
Sketch that generates a maze by randomly walking through a grid of cells, creating walls as it goes. -
p5.js - Meandering River
Preliminary sketch modeling the meandering of a river. -
p5.js - Mitosis - Coding Challenge #6
Initial sketch that demonstrates the stages of mitosis as a cell divides, inspired by a video on the 'Coding Train' YouTube channel. -
p5.js - Nautical Flags
Sketch rendering the various International Maritime Signal Flags, including numbers and Answering pennants, as you type on your keyboard. -
p5.js - Nautical Flags - Part 2
Sketch that allows you to compose a message in nautical flags and get a shareable URL that will re-render the message on a friend's computer. -
p5.js - Paisley Spiral
Demo of drawing multiple Paisley shapes in a spiral pattern to explore controlled generation of head/tail/heading parameters. -
p5.js - Seven Segment Display
Simple rendering of seven-segment digital display (from old clocks / calculators), as you type, the sketch translates the digit into a series of bits, which in turn activates different segments of the display. -
p5.js - Slippy Map
An exploration of implementing Slippy-Map tile manager and rendering for pannable / zoomable view. -
p5.js - Snowflake Pen
Allows you to draw a snowflake by repeating and reflecting the lines you draw around a circle. -
p5.js - Solar System - Coding Challenge #7
Basic implementation of an n-body gravity simulation; calculates initial orbital velocity of planets to get things going. -
p5.js - Solar System 3D - Coding Challenge #8
Added 3D support to the basic solar system sketch simulating gravity of n-bodies. -
p5.js - Solar System 3D Texturized - Coding Challenge #9
Adds image textures to the 3D objects to display images of the planets in our solar system. -
p5.js - Space Invaders - Coding Challenge #5
Basic implementation of the classic arcade game, Space Invaders, inspired by the 'Coding Train' YouTube channel. -
p5.js - Thermal Cells
Simulation of heat transfer across a grid of cells, where you can add heat sources, heat sinks, and thermal walls to see how the heat dissipates. -
p5.js - Tree Rings
Preliminary sketch that establishes cells of a tree trunk cross-section to represent the growth rings experienced in different seasons. -
p5.js - Voronoi Herd
Simulates members of a herd avoiding a predator (that you click and drag) using mix of a Voronoi diagram (for fear modeling) and Boid modeling of movement.
paperjs Sketches
-
paper.js - 10-PRINT
Simple sketch of inspired by 10-Print algorithm, which had random alterations of `/` and `\` diagonal. -
paper.js - Drawing App
Basic drawing app to explore creating different 'tools' within Paper JS drawing SDK. -
paper.js - Interaction of Color
Rendering of several plates from Josef Albers' "Interaction of Color" that you can interact with (dragging shapes around) to see how colors that appear different are the same. -
paper.js - Race Track
Allows you to draw a race track (with your mouse) and press 'r' to send race cars around the track, simulating tire wear.
processing Sketches
-
Processing - 3D Blocks
An exploration of 3D rendering in Processing. -
Processing - Dodge Ball
A game where you control a small circle with your mouse, and your goal is to get bigger by absorbing smaller circles, while avoiding larger ones (which can absorb you). -
Processing - Event Sequencer
A visualization of state transitions for a population of data points switching between states. -
Processing - Field Equations
An exploration of creating layerable field equations that govern the motion of objects within the field. -
Processing - Game of Life
A basic implementation of Conway's Game of Life, with some ability to 'paint' automaton like the GliderGun onto the world. -
Processing - Hexagonal
An exploration of drawing a grid of hexagons, and translating x-y coordinates of the mouse into which hexagon it intersects with. -
Processing - Hockey
A scaled drawing of a hockey rink. -
Processing - Hockey 01
Second version of a hockey rink, adds ability to bounce a puck off the boards, including the curved corners. -
Processing - Interaction of Color
Preliminary exploration of creating a color wheel, revealed as you move your mouse around. -
Processing - Menger Sponge
Creates a Menger Sponge, which is a fractal cube where successive iterations subdivide the cube into 27 smaller cubes (like a Rubiks cube) with the center sections removed. -
Processing - Number Visualizer
Simple sketch of displaying a number, displaying that number of boxes. -
Processing - Particles
Sketch of particles that are placed by clicking on the canvas, and then disperse based on a perlin-noise driven vector field. -
Processing - Purple Rain
A simple sketch created around the death of Prince, inspired by the 'Coding Train' YouTube channel. -
Processing - Random 001
A random, serendipitous sketch. -
Processing - Series Plots
Stacked bar charts. -
Processing - Smart Traffic
An agent-based simulation of traffic with cars that have different driving styles, to see how traffic jams arise (with goal of finding 'smart' behavior to avoid them). -
Processing - Spirals
An exploration Fermat's Spiral, where the mouse location alters the spacing of points in the spiral. -
Processing - Starfield
A simple simulation of traveling through a starfield, reminiscent of 1990s screensavers, inspired by the 'Coding Train' YouTube channel. -
Processing - Thermal Cells
An exploration heat diffusion through a grid of cells. Clicking and dragging removes heat, and pressing a key while doing so adds heat.
ruby Sketches
-
Ruby - Console Art
An initial draft of a Processing-like setup() and draw() loop within Ruby, but confined to the console.
Posts
-
Flash N-Body Gravity Simulation
A circa-2005 ActionScript (Flash) based N-Body simulation. -
Coding Challenge #10 - Maze Generator
This is a p5.js sketch inspired by the Coding Train’s Coding Challenge -
Coding Challenge #9 - Add textures to 3D Solar System
This is a p5.js sketch inspired by the Coding Train’s Coding Challenge #9 on applying textures to the 3D solar system.
-
Coding Challenge #8 - Solar System 3D
This is a p5.js sketch inspired by the Coding Train’s Coding Challenge #8 on creating a Solar System modeled in 3D.
-
Coding Challenge #7 - Solar System
This is a p5.js sketch inspired by the Coding Train’s Coding Challenge #7 of creating a Solar System.
-
Coding Challenge #6 - Mitosis
This is a p5.js sketch inspired by the Coding Train’s Coding Challenge #6 on creating a simulation of Mitosis
-
Coding Challenge #5 - Space invaders
This is a p5.js sketch inspired by the 'Coding Train' YouTube channel to create a playable game of Space Invaders. -
Coding Challenge #4 - Purple Rain
This is a Processing sketch inspired by the Coding Train’s Coding Challenge -
Coding Challenge #3 - Snake Game
This is a sketch inspired by the Coding Train's Coding Challenge -
Coding Challenge #2 - Menger Sponge
This is a Processing sketch inspired by the Coding Train’s Coding Challenge -
Coding Challenge #1 - Starfield
This is a Processing sketch inspired by the Coding Train’s Coding Challenge -
P5.JS - Procedural Generation of Terrain
Quick links for the
p5js/ecosystemsketch: -
Processing - Drawing a Hockey Rink
Scaled rendering of a Hockey rink, to learn Processing's drawing functions. -
Processing - Hexagonal Layout
Explore rendering a grid of hexagons and allowing for clicking/hovering over individual hexagons. -
Processing - Exploring Fermat's Spiral and Vogel's Model using the Golden Angle
This is a Processing sketch inspired by the Fermat spiral; which is closely related to the arrangement of sunflower seeds (phyllotaxis).
subscribe via RSS