Shawn Peters
@shawnpeters1982.bsky.social
Creative coder, programmer, teacher, curriculum developer, author, Newfoundlander. I like to keep busy.
The pieces that I create are not generated by AI, even though I refer to them as generative art. My works are generated by code that I write.
The pieces that I create are not generated by AI, even though I refer to them as generative art. My works are generated by code that I write.
Pinned
Mathober Day 7 - Five Circles Theorem
5 circles are drawn so that they intersect at 2 points, with 1 of those points lying on a central circle. Connecting the intersection points that do not lie on the central circle forms a pentagram.
openprocessing.org/@speters/302...
#p5js #mathober #mathober7
5 circles are drawn so that they intersect at 2 points, with 1 of those points lying on a central circle. Connecting the intersection points that do not lie on the central circle forms a pentagram.
openprocessing.org/@speters/302...
#p5js #mathober #mathober7
October 7, 2026 at 10:04 PM
Mathober Day 7 - Five Circles Theorem
5 circles are drawn so that they intersect at 2 points, with 1 of those points lying on a central circle. Connecting the intersection points that do not lie on the central circle forms a pentagram.
openprocessing.org/@speters/302...
#p5js #mathober #mathober7
5 circles are drawn so that they intersect at 2 points, with 1 of those points lying on a central circle. Connecting the intersection points that do not lie on the central circle forms a pentagram.
openprocessing.org/@speters/302...
#p5js #mathober #mathober7
Mathober - Day 6 - Connected Topology
A connected topology describes a space where any two points can be travelled between without leaving the space.
This starts with a convex hull surrounding a region of points which shrinks inward.
openprocessing.org/@speters/302...
#p5js #mathober #mathober6
A connected topology describes a space where any two points can be travelled between without leaving the space.
This starts with a convex hull surrounding a region of points which shrinks inward.
openprocessing.org/@speters/302...
#p5js #mathober #mathober6
October 6, 2026 at 11:00 PM
Mathober - Day 6 - Connected Topology
A connected topology describes a space where any two points can be travelled between without leaving the space.
This starts with a convex hull surrounding a region of points which shrinks inward.
openprocessing.org/@speters/302...
#p5js #mathober #mathober6
A connected topology describes a space where any two points can be travelled between without leaving the space.
This starts with a convex hull surrounding a region of points which shrinks inward.
openprocessing.org/@speters/302...
#p5js #mathober #mathober6
Mathober - Day 5 - Inellipse
Each triangle has an inscribed ellipse, known as an inellipse.
In this sketch, a Delaunay triangulation is drawn, along with the corresponding inellipses.
openprocessing.org/@speters/302...
#p5js #mathober #mathober5
Each triangle has an inscribed ellipse, known as an inellipse.
In this sketch, a Delaunay triangulation is drawn, along with the corresponding inellipses.
openprocessing.org/@speters/302...
#p5js #mathober #mathober5
October 5, 2026 at 10:26 AM
Mathober - Day 5 - Inellipse
Each triangle has an inscribed ellipse, known as an inellipse.
In this sketch, a Delaunay triangulation is drawn, along with the corresponding inellipses.
openprocessing.org/@speters/302...
#p5js #mathober #mathober5
Each triangle has an inscribed ellipse, known as an inellipse.
In this sketch, a Delaunay triangulation is drawn, along with the corresponding inellipses.
openprocessing.org/@speters/302...
#p5js #mathober #mathober5
Reposted by Shawn Peters
Today's #mathober
and then a p5 sketch: codepen.io/editor/fract...
and a desmos: www.desmos.com/calculator/b...
and then a p5 sketch: codepen.io/editor/fract...
and a desmos: www.desmos.com/calculator/b...
October 4, 2026 at 4:56 AM
Today's #mathober
and then a p5 sketch: codepen.io/editor/fract...
and a desmos: www.desmos.com/calculator/b...
and then a p5 sketch: codepen.io/editor/fract...
and a desmos: www.desmos.com/calculator/b...
Mathober - Day 4 - Linear Recurrence
A linear recurrence is a sequence which is generated by summing together previous values, similar to the Fibonacci sequence, but can also involve coefficients.
openprocessing.org/@speters/302...
#p5js #mathober #mathober4
A linear recurrence is a sequence which is generated by summing together previous values, similar to the Fibonacci sequence, but can also involve coefficients.
openprocessing.org/@speters/302...
#p5js #mathober #mathober4
October 4, 2026 at 12:03 PM
Mathober - Day 4 - Linear Recurrence
A linear recurrence is a sequence which is generated by summing together previous values, similar to the Fibonacci sequence, but can also involve coefficients.
openprocessing.org/@speters/302...
#p5js #mathober #mathober4
A linear recurrence is a sequence which is generated by summing together previous values, similar to the Fibonacci sequence, but can also involve coefficients.
openprocessing.org/@speters/302...
#p5js #mathober #mathober4
Mathober - Day 3 - Permutation List
A permutation list is made up of all the unique permutations of a string or similar collection, in this case "permutation".
There are 11! / 2! unique permutations, from "aeimnoprttu" to "uttrponmiea"
openprocessing.org/@speters/302...
#p5js #mathober #mathober3
A permutation list is made up of all the unique permutations of a string or similar collection, in this case "permutation".
There are 11! / 2! unique permutations, from "aeimnoprttu" to "uttrponmiea"
openprocessing.org/@speters/302...
#p5js #mathober #mathober3
October 3, 2026 at 11:43 AM
Mathober - Day 3 - Permutation List
A permutation list is made up of all the unique permutations of a string or similar collection, in this case "permutation".
There are 11! / 2! unique permutations, from "aeimnoprttu" to "uttrponmiea"
openprocessing.org/@speters/302...
#p5js #mathober #mathober3
A permutation list is made up of all the unique permutations of a string or similar collection, in this case "permutation".
There are 11! / 2! unique permutations, from "aeimnoprttu" to "uttrponmiea"
openprocessing.org/@speters/302...
#p5js #mathober #mathober3
Mathober - Day 2 - Zebra Graph
The zebra is a fairy chess piece that moves similar to a knight, but moves 2 by 3 instead of 1 by 2.
Alternating sets of zebra graphs are arranged on a chess board pattern.
openprocessing.org/@speters/302...
#p5js #mathober #mathober2
The zebra is a fairy chess piece that moves similar to a knight, but moves 2 by 3 instead of 1 by 2.
Alternating sets of zebra graphs are arranged on a chess board pattern.
openprocessing.org/@speters/302...
#p5js #mathober #mathober2
October 2, 2026 at 10:28 AM
Mathober - Day 2 - Zebra Graph
The zebra is a fairy chess piece that moves similar to a knight, but moves 2 by 3 instead of 1 by 2.
Alternating sets of zebra graphs are arranged on a chess board pattern.
openprocessing.org/@speters/302...
#p5js #mathober #mathober2
The zebra is a fairy chess piece that moves similar to a knight, but moves 2 by 3 instead of 1 by 2.
Alternating sets of zebra graphs are arranged on a chess board pattern.
openprocessing.org/@speters/302...
#p5js #mathober #mathober2
Mathober - Day 1 - Perimeter of an Ellipse
An ellipse does not have a simple formula for its perimeter. While there are many approximations and calculus-based methods, I approximated the perimeter by using a polygon.
openprocessing.org/@speters/302...
#p5js #mathober #mathober1
An ellipse does not have a simple formula for its perimeter. While there are many approximations and calculus-based methods, I approximated the perimeter by using a polygon.
openprocessing.org/@speters/302...
#p5js #mathober #mathober1
October 1, 2026 at 10:42 PM
Mathober - Day 1 - Perimeter of an Ellipse
An ellipse does not have a simple formula for its perimeter. While there are many approximations and calculus-based methods, I approximated the perimeter by using a polygon.
openprocessing.org/@speters/302...
#p5js #mathober #mathober1
An ellipse does not have a simple formula for its perimeter. While there are many approximations and calculus-based methods, I approximated the perimeter by using a polygon.
openprocessing.org/@speters/302...
#p5js #mathober #mathober1
February 1, 2026 at 1:55 PM
#Genuary31 - GLSL day.
Typically I avoid using shaders. Something about the process just doesn't click with me. Experimenting for this piece I found that I could process an image extremely quickly.
Here a webcam image is modified to resemble a CRT display with NES style rendering.
#genuary #p5js
Typically I avoid using shaders. Something about the process just doesn't click with me. Experimenting for this piece I found that I could process an image extremely quickly.
Here a webcam image is modified to resemble a CRT display with NES style rendering.
#genuary #p5js
January 31, 2026 at 12:41 PM
#Genuary31 - GLSL day.
Typically I avoid using shaders. Something about the process just doesn't click with me. Experimenting for this piece I found that I could process an image extremely quickly.
Here a webcam image is modified to resemble a CRT display with NES style rendering.
#genuary #p5js
Typically I avoid using shaders. Something about the process just doesn't click with me. Experimenting for this piece I found that I could process an image extremely quickly.
Here a webcam image is modified to resemble a CRT display with NES style rendering.
#genuary #p5js
#Genuary30 - Its not a bug, its a feature.
A standard flocking simulation, but with variable alignment, cohesion, and separation scaling. Sometimes they even go into the negative, indicated by changing background colour. Feature, not a bug.
#genuary #p5js
A standard flocking simulation, but with variable alignment, cohesion, and separation scaling. Sometimes they even go into the negative, indicated by changing background colour. Feature, not a bug.
#genuary #p5js
January 31, 2026 at 1:08 AM
#Genuary30 - Its not a bug, its a feature.
A standard flocking simulation, but with variable alignment, cohesion, and separation scaling. Sometimes they even go into the negative, indicated by changing background colour. Feature, not a bug.
#genuary #p5js
A standard flocking simulation, but with variable alignment, cohesion, and separation scaling. Sometimes they even go into the negative, indicated by changing background colour. Feature, not a bug.
#genuary #p5js
#Genuary29 - Genetic evolution and mutation
Using a genetic algorithm series of points are triangulated and coloured a match a photograph. Features from the best are combined and mutated.
Original photo and end result are in the thread.
#genuary #p5js
Using a genetic algorithm series of points are triangulated and coloured a match a photograph. Features from the best are combined and mutated.
Original photo and end result are in the thread.
#genuary #p5js
January 30, 2026 at 1:28 AM
#Genuary29 - Genetic evolution and mutation
Using a genetic algorithm series of points are triangulated and coloured a match a photograph. Features from the best are combined and mutated.
Original photo and end result are in the thread.
#genuary #p5js
Using a genetic algorithm series of points are triangulated and coloured a match a photograph. Features from the best are combined and mutated.
Original photo and end result are in the thread.
#genuary #p5js
#Genuary28 - No libraries, no canvas, only HTML elements
Using only vanilla JS, a grid of DIV elements are created and their colours changed by editing the style property.
#genuary #html #JavaScript
Using only vanilla JS, a grid of DIV elements are created and their colours changed by editing the style property.
#genuary #html #JavaScript
January 28, 2026 at 2:55 PM
#Genuary28 - No libraries, no canvas, only HTML elements
Using only vanilla JS, a grid of DIV elements are created and their colours changed by editing the style property.
#genuary #html #JavaScript
Using only vanilla JS, a grid of DIV elements are created and their colours changed by editing the style property.
#genuary #html #JavaScript
#Genuary27 - Lifeform
Reaction–diffusion reaction. This is an extremely speed up recording of the process. End renders in the thread.
#p5js #genuary
Reaction–diffusion reaction. This is an extremely speed up recording of the process. End renders in the thread.
#p5js #genuary
January 27, 2026 at 4:07 PM
#Genuary27 - Lifeform
Reaction–diffusion reaction. This is an extremely speed up recording of the process. End renders in the thread.
#p5js #genuary
Reaction–diffusion reaction. This is an extremely speed up recording of the process. End renders in the thread.
#p5js #genuary
#Genuary26 - Recursive Grids
Instead of going with a nice recursive rectangular grid I decided to go with triangles. Overall I really like the effect and will likely go back revisit it in future pieces.
#genuary #p5js
Instead of going with a nice recursive rectangular grid I decided to go with triangles. Overall I really like the effect and will likely go back revisit it in future pieces.
#genuary #p5js
January 26, 2026 at 4:59 PM
#Genuary26 - Recursive Grids
Instead of going with a nice recursive rectangular grid I decided to go with triangles. Overall I really like the effect and will likely go back revisit it in future pieces.
#genuary #p5js
Instead of going with a nice recursive rectangular grid I decided to go with triangles. Overall I really like the effect and will likely go back revisit it in future pieces.
#genuary #p5js
#Genuary25 - Organic Geometry.
Circular cells are grown and divided to somewhat mimic cell division. Marching squares and a lot of transparency add to the growth effect.
#genuary #p5js
Circular cells are grown and divided to somewhat mimic cell division. Marching squares and a lot of transparency add to the growth effect.
#genuary #p5js
January 25, 2026 at 1:23 PM
#Genuary25 - Organic Geometry.
Circular cells are grown and divided to somewhat mimic cell division. Marching squares and a lot of transparency add to the growth effect.
#genuary #p5js
Circular cells are grown and divided to somewhat mimic cell division. Marching squares and a lot of transparency add to the growth effect.
#genuary #p5js
#Genuary24 - Perfectionist’s nightmare.
Using randomGaussian() to introduce some small variance, what should be a perfectly aligned set of crosses becomes a perfectionist's nightmare.
#genuary #p5js
Using randomGaussian() to introduce some small variance, what should be a perfectly aligned set of crosses becomes a perfectionist's nightmare.
#genuary #p5js
January 24, 2026 at 1:35 PM
#Genuary24 - Perfectionist’s nightmare.
Using randomGaussian() to introduce some small variance, what should be a perfectly aligned set of crosses becomes a perfectionist's nightmare.
#genuary #p5js
Using randomGaussian() to introduce some small variance, what should be a perfectly aligned set of crosses becomes a perfectionist's nightmare.
#genuary #p5js
#Genuary23 - Transparency
255 transparent triangles move over slightly different paths creating areas of colour where they overlap.
The video encoding seems to get sluggish for some reason. I tried recording it several different ways without much improvement.
#genuary #p5js
255 transparent triangles move over slightly different paths creating areas of colour where they overlap.
The video encoding seems to get sluggish for some reason. I tried recording it several different ways without much improvement.
#genuary #p5js
January 23, 2026 at 2:49 PM
#Genuary23 - Transparency
255 transparent triangles move over slightly different paths creating areas of colour where they overlap.
The video encoding seems to get sluggish for some reason. I tried recording it several different ways without much improvement.
#genuary #p5js
255 transparent triangles move over slightly different paths creating areas of colour where they overlap.
The video encoding seems to get sluggish for some reason. I tried recording it several different ways without much improvement.
#genuary #p5js
#Genuary22 - Pen plotter ready.
Designed as an SVG, several non-intersecting paths are drawn avoiding random circular areas.
I'm not sure how well it would actually plot out as the closest thing I have to a plotter is an old Circut machine.
#genuary #p5js
Designed as an SVG, several non-intersecting paths are drawn avoiding random circular areas.
I'm not sure how well it would actually plot out as the closest thing I have to a plotter is an old Circut machine.
#genuary #p5js
January 22, 2026 at 10:40 PM
#Genuary22 - Pen plotter ready.
Designed as an SVG, several non-intersecting paths are drawn avoiding random circular areas.
I'm not sure how well it would actually plot out as the closest thing I have to a plotter is an old Circut machine.
#genuary #p5js
Designed as an SVG, several non-intersecting paths are drawn avoiding random circular areas.
I'm not sure how well it would actually plot out as the closest thing I have to a plotter is an old Circut machine.
#genuary #p5js
#Genuary21 - Bauhaus Poster.
A minimal Bauhaus style poster. The circular pattern was made using blendMode(DIFFERENCE)
#genuary #p5js
A minimal Bauhaus style poster. The circular pattern was made using blendMode(DIFFERENCE)
#genuary #p5js
January 21, 2026 at 2:11 PM
#Genuary21 - Bauhaus Poster.
A minimal Bauhaus style poster. The circular pattern was made using blendMode(DIFFERENCE)
#genuary #p5js
A minimal Bauhaus style poster. The circular pattern was made using blendMode(DIFFERENCE)
#genuary #p5js
#Genuary20 - One line
Maybe the most important line at the moment.
The main border between Canada and the USA is recreated using GPS coordinates mapped to the canvas. To keep it to a single line, the border separating Alaska and the Atlantic ocean portions are ignored.
#genuary #p5js
Maybe the most important line at the moment.
The main border between Canada and the USA is recreated using GPS coordinates mapped to the canvas. To keep it to a single line, the border separating Alaska and the Atlantic ocean portions are ignored.
#genuary #p5js
January 20, 2026 at 11:19 AM
#Genuary20 - One line
Maybe the most important line at the moment.
The main border between Canada and the USA is recreated using GPS coordinates mapped to the canvas. To keep it to a single line, the border separating Alaska and the Atlantic ocean portions are ignored.
#genuary #p5js
Maybe the most important line at the moment.
The main border between Canada and the USA is recreated using GPS coordinates mapped to the canvas. To keep it to a single line, the border separating Alaska and the Atlantic ocean portions are ignored.
#genuary #p5js
#Genuary19 - 16 x 16
A 16 x 16 grid is generated and filled with random colours quantized in steps of 16. The result is expanded to a full canvas creating a ghosted blur over the original grid.
#genuary #p5js
A 16 x 16 grid is generated and filled with random colours quantized in steps of 16. The result is expanded to a full canvas creating a ghosted blur over the original grid.
#genuary #p5js
January 20, 2026 at 1:57 AM
#Genuary19 - 16 x 16
A 16 x 16 grid is generated and filled with random colours quantized in steps of 16. The result is expanded to a full canvas creating a ghosted blur over the original grid.
#genuary #p5js
A 16 x 16 grid is generated and filled with random colours quantized in steps of 16. The result is expanded to a full canvas creating a ghosted blur over the original grid.
#genuary #p5js
#Genuary18 - Unexpected path.
A particle travels in a straight line but turns whenever a prime number of steps has been taken.
For extra geekiness, prime numbers are used for values in the code, such as 11 degree turns and colours which have prime red, green, and blue components.
#genuary #p5js
A particle travels in a straight line but turns whenever a prime number of steps has been taken.
For extra geekiness, prime numbers are used for values in the code, such as 11 degree turns and colours which have prime red, green, and blue components.
#genuary #p5js
January 18, 2026 at 4:28 PM
#Genuary18 - Unexpected path.
A particle travels in a straight line but turns whenever a prime number of steps has been taken.
For extra geekiness, prime numbers are used for values in the code, such as 11 degree turns and colours which have prime red, green, and blue components.
#genuary #p5js
A particle travels in a straight line but turns whenever a prime number of steps has been taken.
For extra geekiness, prime numbers are used for values in the code, such as 11 degree turns and colours which have prime red, green, and blue components.
#genuary #p5js
#Genuary17 - Wallpaper group
I kept it simple here, making a generator for p1 and p2. Random patterns are drawn, rotated, and translated, to maintain symmetry.
#genuary #p5js
I kept it simple here, making a generator for p1 and p2. Random patterns are drawn, rotated, and translated, to maintain symmetry.
#genuary #p5js
January 17, 2026 at 2:14 PM
#Genuary17 - Wallpaper group
I kept it simple here, making a generator for p1 and p2. Random patterns are drawn, rotated, and translated, to maintain symmetry.
#genuary #p5js
I kept it simple here, making a generator for p1 and p2. Random patterns are drawn, rotated, and translated, to maintain symmetry.
#genuary #p5js
January 17, 2026 at 12:12 AM