Processing Examples
All of these p5.js examples were inspired by the wonderful Val Lockhart and Troy Peterson. They were the first to get the idea to generate p5.js code using ChatGPT.
If you are not familiar with p5.js, it is a high-quality JavaScript library for building interactive animations. It has been around since 2014 and it is supported by a large community of educators and creative people that combine programming with art. Because there is a strong ethos of sharing open-source p5.js scripts there is ample material for ChatGPT to be trained on. There are currently over 21,000 p5.js sketches found on GitHub!
Our goal here is to teach you how to write precise ChatGPT prompts that will generate a working p5.js simulation without having to understand how to write JavaScript.
Basic Examples
We are going to start with some basic examples that ChatGPT can easily handle. To test these examples we ask ChatGPT to generate a single p5.js sketch file that we can easily test and debug using the p5 Editor. You simply copy and paste the code into the editor overwriting the default setup and draw functions.
Warning
When you press the play
button, the sketch runs continually
which can quickly drain your battery if you are using a portable device.
It does this even if there is no visible motion on the canvas. p5.js
continually runs the draw function until you press stop or the battery runs out.
My suggestion is to quickly press the stop
button if you are on a battery-powered device.
TODO
Virus Simulation
A classic simulation of the rate that a virus spreads in a network.
Virus Simulation
TODO - use a force-directed graph to rearrange the network.
Sierpinski Fractal Triangle
Koch Fractal Curve
Rabbit and Foxes
Simulate foxes eating rabbits.
Projectile Motion
Mass on A Spring
This is a simulator of a mass on the end of a coiled spring.
The user can change:
- The mass amount (M)
- The spring constant (K)
- The damping factor (D)
The simulation still needs some UX work. The drag-down operation is not clean and the spring could be compressed more.
Simple Maze Runner
A simple grid layout of a maze and a mouse that can only move right or down.
Maze Generator
This sample program was not created by ChatGPT but it demonstrates an algorithm for generating maze diagrams.
Videos 1. Coding Challenge #10.1: Maze Generator with p5.js - Part 1 2. Coding Challenge #10.2: Maze Generator with p5.js - Part 2 3. Coding Challenge #10.3: Maze Generator with p5.js - Part 3 4. Coding Challenge #10.4: Maze Generator with p5.js - Part 4
Depth-first search Recursive backtracker Wikipedia Page
To Dos
Here is a list of small animations that I have yet to do:
- EE - Simple circuits - battery, switch and light
- EE - Current measurement - measure the current in an LED circuit
- EE - H-Bridge - how to make a motor turn both forward and reverse using switches
- EE - Pulse-Width Modulation - how to send information from a microcontroller to a motor driver indicating the speed of a motor and the direction of a motor.
- EE - RGB LEDs - make any color by combining red, green a blue LEDs
- EE - LED Circuit
- EE - Distance sensor
- Robotics - Collision avoidance
- Robotics - Maze solving
- Robotics - Digital compass
- EE - Seven-segment display
- EE - Alphanumeric display
- EE - Character display (2 rows by 40 characters)
- EE - LED bar display
- EE - Addressable LED strip simulator
- EE - Physical computing - Microcontrollers, sensors, actuators, displays
- Robotics - Swarm robots
- EE - Color displays from red, green and blue LEDs
- Network science - vertices and edge counts - network complexity
- Network science - average degree
- Network science - in-degree and out-degree
- Network science - directed and undirected graphs
- Network science - acyclic graphs
- Network science - local communities
- Network science - traveling salesperson
- Machine learning - self-driving car
- Robot arms - degrees of freedom
- Simple gears
- AI - perceptron
- AI - bias and weights
- AI - activation functions
- AI - neural network
- AI - deep neural network
- AI - network complexity - parameter counting
- CS - bits, bytes and words
- CS - data types: strings, bytes, decimals and floats
- CS - data structures - lists, sets, arrays
- CS - sorting
- CS - recursion