p5js

A collection of 35 posts

p5js

randomness – a generative zine

I coded a generative zine to bring to XOXO 2024. It is different every time it loads with a sampling of p5.js sketches. Each zine has hundreds of thousands to millions of generated shapes and points using random numbers. The github is here (the code is slow to run and painful to read). If you […]

coding

Curve

I made Curve, a coloring book, to bring to XOXO 2024 this week. If you’d like to print/play: See the Pen Curve Zine by Sophia (fractal kitty) (she/her) (@fractalkitty) on CodePen.

coding

SumFib

After playing simple yet addictive games like Threes and 2048, I wondered how the gameplay mechanics would translate using Fibonacci numbers, which introduce a unique twist. I wrote a prototype in p5js. You can swipe on mobile or use arrows/WASD on desktop. I did this in about a day and unit tested

coding

Genuary 2024

This year’s Genuary code is here (I will update as I go through the prompts). My codepen gallery is here. I am hoping to play with symmetry the entire month. Day-31 – generative music (this runs slow on mobile and some machines) Day-30 – shaders Day-29 – Signed Distance Functions (if we keep trying

data

Porthales

I wanted to undertake a data project that could be completed in less than a day, so I decided to work with storm manhole data from Salem, Oregon. The primary aim of this project is to foster community creativity—whether through code, imagination, writing, or conversation. The map has transformed 10,

coding

Mathober Pieces

Mathober 2023 Prompts are here.This year I used a mix of p5js and procreate to play with stellar scenes – enjoy! There were some great sketches on Mathstodon including hilarious videos, comics, generative music, puns, and more. Links on titles take you to codePen full page view. Some days I played w

coding

Mathober 2022 Code Doodles

This post is late, but here is the code doodles from mathober2022: Click to change the code below. Or go here for the full page version. See the Pen Mathober2022 by Sophia (@fractalkitty) on CodePen.

coding

Creative Coding Update

April was a fun month of coding. I am sharing a few of the pieces and activities from this month below. Have fun forking, playing, and creating! A Quiet Space This piece was created at the end of March as a stream of consciousness. I started with the Birb’s Nest coding group prompt of “space” […]

Makings

Serendipitous Oulipo Haiku

I copied, pasted, cut, poked, threaded, beaded, coded, and finished Serendipitous Oulipo Haiku. Four hundred and eighteen haiku when rearranged by first, second, and third lines yield 418 x 418 x 418 poems. That is 73,034,632 haiku that often work, sometimes seem profound, and other times are broken

coding

Spring Folk

Generative folk art in p5.js

coding

Charged

I created the following composition while playing with code as part of Genuary. I wanted to get the feeling of a discharge of energy. Everytime the code is run, a unique new piece is generated. Below are some of the infinite varieties.

coding

String Art Presentation

I put these slides together for the Seattle Math Jam 1/18/2021 and thought I’d share them here. I have investigated string art with many of my middle school groups and have had so much fun finding patterns. This slide deck was put together with some extra toys for small group investigations. Code li

coding

Catenary Kitties

I am really enjoying Genuary 2022. For the architecture prompt, I created these catenary kitties. The kitties are drawn in Adobe Fresco and the code is in p5.js. If you go to the code page, clicking the work will randomize the kitties and typing “p” will bring motion to the clouds. Below is one of [

birb

Borb Generator

Sometimes you just need a borb. They make good digital stickers, profile pics and more. I created the Borb Generator to make random borbs using pointillism in p5js. There are over 900,000 points in each Borb. Here is a link on OpenProcessing to the Borb Generator to make your own. Refresh to code to

coding

Diatom Sketch

I pondered diotoms in my spare time today and made this. I hope to play some more as time allows to expand this. Click to change images (randomized). A gallery is included below. Enjoy. A full page view is here. See the Pen diatom1 by Sophia (@fractalkitty) on CodePen.

coding

Coded Optical Illusions

I had a great time this summer doing art and professional development with Twitter peers. On one of the days, Ellen Thomson hosted activities with Optical Illusions. This got me thinking of all the ways this could be done with coding + math groups. There are two approaches I take in coding groups. T

coding

Folding Origami

Need a pun? This is an origami I-koi-sahedron. This code is from Day 0 to kick off my 101 Days of Creative Code. I will post GIFs to the blog as they are created, but the coding will be done as pages rather than posts ( I didn’t want to spam my followers).

coding

Locomotive Rose Art

The equations used to produce these plots are in the family of rose curves. This particular form is composed of two curves added together. It almost feels like there is some locomotion happening in the visualization, and it is fun to think about the gears and shafts might that make this pattern. r =

coding

Parabolic Beams

I love thinking of parabolas as being formed with a directrix and focus. Coming from a background in trajectory analysis, I find the abstract relationships of the curve to the point and line beautiful. When a light shines through the focus of a parabolic mirror, the light reflected is orthogonal to

coding

Code for Two-Button Calculator

A two-button calculator can only perform two operations (like multiply by two and add five). The Global Math Project is a wonderful resource for math learning and play and has a great resource for two-button problems in this Global Math Project PDF. Another variation of this sort of problem is done

coding

Blue Flames

This code was generated by playing around with one of the p5.js examples. It translates and rotates using parametric equations each frame. Codepen is below (it may not run well on some machines). See the Pen blueFlame by Sophia (@fractalkitty) on CodePen.

coding

Transformed Magic Squares

I got a request from a twitter friend (Sara Resvi) to create a visual for transforming magic squares. A learner can see how one solution is many (or vice versa). Here is what I put together in an afternoon. Click the numbers to change them. Try to find solutions where the rows, columns and diagonals

coding

Parametric Waves Morphed into Unstable Charcoal

Have you ever wished that you had charcoal that is made of particles that randomly leave and come back? Wish the reference frame would rotate so down is up, but not always? Well now you have what you have always wanted – Unstable Charcoal! I created this after playing with a parametric wave visualiz

coding

Laced Reflections

My mind was on snowflakes tonight, which brought me down a rabbit hole of reflections, lace, and play. The code here is simple but fun. Enjoy making snowflakes, lace, stars, or whatever comes to mind. If you wish to fork the code or play it is here. My CodePen is below. Press the spacebar (or […]

coding

Code of the Rings

While tinkering with my tree ring code, I created a simpler yet mesmerizing adaptation. Essentially I added a loop, some random multipliers, and changed to radian mode. Sine and cosine are so incredibly beautiful and full of infinite play and wonder. Please play with the code below by clicking to ch