Challenges

Featured Challenge:
#185 โ€” Dragon Curve

The Dragon Curve fractal is created by repeatedly folding a strip of paper in half, then unfolding it to form a curve. In this challenge, I attempt to code an animation of the Dragon Curve forming with p5.js in JavaScript.

aug 18, 2024

Dragon Curve
โŒฅ

Filter by Language

Pick a language to filter
โ˜†

Filter by Topic

Pick a topic to filter

The Dragon Curve fractal is created by repeatedly folding a strip of paper in half, then unfolding it to form a curve. In this challenge, I attempt to code an animation of the Dragon Curve forming with p5.js in JavaScript.

Dragon Curve

What happens when two circles collide in a p5.js canvas? In this video, I examine the math and implement idealized elastic collisions in a JavaScript physics simulation. This video supplements the Nature of Code book series in Chapter 6 which uses 3rd party physics libraries to handle collisions rather than a direct implementation.

Elastic Collisions

All aboard as I attempt to simulate the artistic process of paper marbling. The algorithm is based on the paper 'Mathematical Marbling' by S. Lu, A. Jaffer, X. Jin, H. Zhao, and X. Mao. The code is written in JavaScript using the p5.js library.

Mathematical Marbling

Happy Pi Day 2024! In this video, I attempt to create an Apollonian Gasket using the Descartes Circle Theorem and complex numbers. So many circles!

Apollonian Gasket

Stippling is an artistic technique that uses numerous dots to craft an image. In this coding challenge I attempt to implement a weighted Voronoi stippling algorithm with p5.js along with the Delaunay triangulation package from d3.js.

Weighted Voronoi Stippling

It's Genuary 2024! Watch as I attempt to build a falling sand simulation in p5.js using a grid of pixels and simple rules.

Falling Sand

How is nature hidden in a pile of 0s and 1s? Let's find out by coding a p5.js visualization of the Wolfram Elementary Cellular Automaton!

Wolfram CA

Learn to create your own climate spiral using p5.js and temperature data. Originally designed by the climate scientist Ed Hawkins, the climate spiral is a visual representation of the changing temperatures over time, illustrating the urgent need to address climate change.

Climate Spiral

Embark on a squishy adventure as I attempt to create a soft body physics simulation for a character with toxiclibs.js and p5.js!

Soft Body Character

How do toothpicks approximate the value of pi? I'll show you by coding a simulation in p5.js!

Buffon's Needle

Take a trip back in time and watch me attempt to build a 3D graphics engine in AppleSoft BASIC on a restored Apple II+ computer! Can I render a spinning cube?

AppleSoft BASIC 3D Cube

Take a trip back in time and let's learn all about GR (graphics) and HGR (high resolution graphics) in AppleSoft BASIC on a restored Apple II+ computer! Can we render a fractal tree?

AppleSoft Basic Fractal Tree

Take a trip back in time and let's code the Snake Game in AppleSoft BASIC on a restored Apple II+ computer! GOTO and GOSUB! Line numbers!

AppleSoft Basic Snake Game

This project is a collaboration with Grady Hillhouse at the Practical Engineering YouTube channel. This is my attempt to code a simulation of Horizontal Directional Drilling, laparoscopic surgery for the earth!

Horizontal Directional Drilling

Straight out of quantum mechanics, Wave Function Collapse is an algorithm for procedural generation of images. In this video (recorded over 3 live streams) I attempt the tiled model and explore a variety of solutions to the algorithm in JavaScript with p5.js. Also, check out WFC's predecessor: Model Synthesis (more info below).

Wave Function Collapse

It's the Monty Hall Problem! In JavaScript! With p5.js! Yes, you really double your chances of winning by switching doors. I hope to convince you of this in this video!

The Monty Hall Problem

It's the Mandelbulb! What happens when you take the original fractal (The Mandelbrot Set) and extend it into 3D space. And how do you visualize it in Processing (Java) as a point cloud?

The Mandelbulb

Why do prime numbers show up as diagonals in a spiral? In this video, I create a visualization in JavaScript (p5.js) of the Ulam Spiral (aka Prime Spiral) named for Polish Mathematician Stanislav Ulan.

The Prime (Ulam) Spiral

Let's make ASCII art in p5.js together! In this video, I demonstrate a variety of techniques for translating the pixels of an image into text and finish with rendering video as text ASCII characters in a DOM.

Image to ASCII

Let's make a slide puzzle in p5.js together! We'll be using images, nested loops, and arrays, and by the end of our journey, we'll have a fully playable game!

Slide Puzzle

In this video I explore the wonders of the copy() function in the creative coding platform Processing, simulating slitscan photography and bending time itself! This video is thanks to Tim Rodenbrรถkerโ€™s generous donation to The Processing Foundation!

Slitscan Time Displacement Effect

Have you ever wanted to know more about bรฉzier curves in p5.js? Thanks to a generous donation from Jason Oswald, I do a deep dive exploring the bรฉzier curve function and the math behind the algorithm?

Bรฉzier Curves

It's finally time to attempt a Self-Avoiding Walk! In this video, I quickly visualize a simple JavaScript p5.js implementation of a self-avoiding walk. I then tackle the more complex problem of backtracking to find a solution to a space-filling self-avoiding walk.

Self Avoiding Walk

Boing! Time to simulate a spring force! This challenge fits into chapters 2 and 3 of the Nature of Code and demonstrates how to simulate the oscillating motion of a spring using vectors and forces.

Spring Forces

Choo choo! In this challenge, I build on chapter 3 (Oscillating Motion) of the Nature of Code series and simulate a simple pendulum in p5.js via angular acceleration.

Simple Pendulum Simulation

In this episode of Coding in the Cabana, Gloria Pickle and I investigate the Marching Squares algorithm and apply it to Open Simplex Noise in Processing.

Marching Squares

Coding in the Cabana is a series where I attempt challenges from my garden cabana in Brooklyn, NY. In this episode, I explore the beauty of Worley noise.

Worley Noise

๐Ÿฅง Happy Pi Day 2020! In this challenge, I build a simple web application using p5.js and node.js to search in the first billion digits of Pi.

Peeking Inside Pi

Coding in the Cabana is a series where I attempt challenges from my garden cabana in Brooklyn, NY. In this episode, I animate the path of the classic "space filling curve" known as the Hilbert Curve.

Hilbert Curve

This challenge uses the pre-trained SketchRNN machine learning model (available with the ml5.js library) to create a p5.js sketch that finishes a person's drawing.

Interactive Drawing with SketchRNN

It's the second episode of Coding in the Cabana! Here I attempt to visualize the Collatz Conjecture in Processing.

Collatz Conjecture

The Ramerโ€“Douglasโ€“Peucker algorithm (aka "iterative end-point fit algorithm"), takes a curve composed of line segments and reduces the fidelty to a "lower fidelity" curve with fewer points.

RDP Algorithm

Coding in the Cabana is a series where I attempt challenges from my garden cabana in Brooklyn, NY. In this episode, I code a visualization of the Maurer Rose pattern in JavaScript (p5.js).

Maurer Rose

In this challenge, I attempt to create a Ukulele tuner in JavaScript using p5.js, ml5.js and the pre-trained machine learning model CREPE: A Convolutional REpresentation for Pitch Estimation. Can you make one with a more elegant and creative interface?

Ukulele Tuner with Machine Learning

In this challenge I generate rainbows using the StyleGAN Machine Learning model available in Runway ML and send the rainbows to the browser with p5.js! This challenge is based on the live coding talk from the 2019 Eyeo Festival.

AI Rainbows with Runway and p5.js

This is a beginner-friendly challenge where I attempt to code a basic version of the game Tic-Tac-Toe using JavaScript and the p5.js library.

Tic Tac Toe

In this coding challenge, I implement the โ€œGift Wrapping algorithmโ€ (aka Jarvis march) for calculating a convex hull in JavaScript. This is a foundational topic in computational geometry!

Gift Wrapping Algorithm

In this challenge, I attempt to make my own version of Googleโ€™s Dinosaur Game (T-Rex run!) with a unique twist โ€“ controlling the dinosaur (unicorn, in this case) with a machine learning Speech Commands model!

Chrome Dinosaur Game

Building off of the previous coding challenge (2D Ray Casting) I attempt to make my own version the original Wolfenstein 3D Raycasting engine and visualize the "field of view" of the moving particle.

Rendering Ray Casting

In this video, I implement a basic ray casting engine with line segment "surfaces" and vector "rays." The result simulates a light source casting shadows in a 2D canvas.

Ray Casting 2D

Inspired by the recent image of the Powehi m87 black hole from the Event Horizon Telescope, I visualize the behavior or light (photons) following the path of spacetime around the black hole in p5.js.

2D Black Hole Visualization

Let's try implementing a famously faster sorting algorithm: the Quicksort! And visualize the process with p5.js!

Quicksort Visualization

Can I build an interactive 3D Rubik's cube in Processing? Yes! Someday I hope to return to this project and add an AI solver!

Rubik's Cube