Canvas Cards is a gallery of card designs created with javasript canvas. Updated every week in 2019, each card includes an editable code block so feel free to tweak and make your own designs. Created by Luke Patton and hosted by Glitch. If you'd like to know more about the project, I wrote a retrospective detailing my process and tools. I've also put up a standalone card builder that makes it easier to play around.
The cards are licensed under The Anti-Captialist Software License. You can freely use any of the code and images here, even to make your own decks, but they can never be sold or profited from. The cards are not and will not ever be available as NFTs or other crypto assets.
52 weeks, 52 canvas cards. As we come to the end of our project, I'm breaking the rules one more time by using an external library.
We're using a library to generate 2D Simplex noise, a gradient noise algorithm that will produce smoothly random values for our x and y values. We use that randomness to distort a sampling of points along a circle to produce the wavy curves you see to the left. You can alter the frequency and magnitude values to alter how often and drastic the curves are.
To achieve the full effect, we just stack a bunch of shrinking, distorted circles on top of each other. Use the Update Preview button to draw a new card!
This is the penultimate card of this project, so I figured it was time to break the rules a little bit and make an animated card. This week I read a lot about brownian motion (check it out on wikipedia) and decided to set a bunch of little walkers loose in our canvas. You can add more walkers by editing the walkerCount variable and stop/start the animation by clicking on the canvas.
I was honestly a little suprised it took me this long to get around to this visual effect, most commonly known as rhombile tiling. For such a simple looking effect, there's a lot of ways to implement it and we're doing it a little bit cheaty.
Instead of calculating pure 60° rhombi, we're tiling hexagons and the subdiving them to make little rhombus slices. People have been making this pattern since at least the 11th century, so they've developed all sorts of clever ways to do the math.
Datamosh is by far the most complicated card we've put together, fully implementing some pixel sorting functions. Pixel sorting is an effect created by rearranging pixels in columns or rows based on some criteria like brightness or amount of a color.
We're reading all the image data into a giant array where every four values represents a pixels R,G,B and alpha values. From there we add them all up and compare to a neighbor to see if it meets a threshold. When this effect is magnified across the entire canvas we get these great lines of sorted pixels.
You can change the threshold, strength, number of loops and image in the first function to create your own outputs. Have fun!
Sometimes it's a very simple piece of math that sparks an idea and this week it was just the very simple equations for finding a point on a circle. What happens if you find more than one point? What happens if you find points on just a section of a circle? All of these questions stack up to make a neat little image. You can adjust the numbers on your own, and click Update Preview to see more variants!
Last night was the third Plotter People NYC meetup, and I got a short explainer on modern spirographs from Artem. I remember them from the little plastic gears in my grandparent's house and it turns out they're still fun in the digital world. I love the tiny variants, I thought it looked like a little coral reef or collection of germs. You can play with the radius of the circle and ratio to make your own graphs.
I never made it to a sufficiently advanced math class to learn about fractals. But thanks to Sher Minn I was able to learn about the Sierpiński curve. It's wonderful! It's a space filling curve, which I understand to mean that it can calculate how to fill a space no matter how many times you subdivide it. This leads to some beautiful patterns, which I've stacked on top of each other here. You can play with the iteration depth of the main function to see different patterns.
Don't let your dreams be dreams. Yesterday you said tomorrow. So just do it. Make your dreams come true. Just do it. Some people dream of success. While you're gonna wake up and work hard at it. Nothing is impossible.
This isn't the most complex card, but I couldn't help but take advantage of the Halloween spirit. We are using strokes on boxes as a easy way to get curved corners, much cheaper than having to calculate arcs ourselves.
One of the most fun things to do with this project is create a sort of illusion of complexity. Why make a real sorting algorithm when you can just add random numbers? I think this is a pretty fun effect and we get to use some older methods for gradient styles. Use the Update Preview button to draw a new card!
Runic scribbles are easy, if you can take apart some polygons. Here we're drawing segments on a pentagon with a connector in the middle. Each line connects to it's neighbor and has a chance to be visible. Change the number of sides in the drawGlyph function see different shapes and patterns!
This concept was originally "what if you had a maze and it was squiggly?" but has evolved a bit into this looping pattern. We're still using linear interpolation to space our items evenly across the canvas and make sure our tiling is seamless. Use the Update Preview button to draw a new card!
I've finally gone down and solved an outstanding issue with the
site, the way canvas renders on Retina devices. Now by using
scale I can effectively double the resolution of the
card, ensuring it looks crisp on all screens. Use the Update
Preview button to draw a new card!
When I was in school I was never any good at math. I got Cs every year from 6th-12th grade and barely scratched the surface of trigonometry and statistics. One of the things I like about this project is that I get to learn all that stuff now, in a way that's practical. Use the Update Preview button to draw a new card!
Happy Area 51 day everyone. I was having some more fun with grid positioning and absolute values. I consider this to be the set up for a pretty cool idea coming down in a couple weeks, so stay tuned. Use the Update Preview button to draw a new card!
My wife does has been doing macrame, which is a type of loose weaving with knotted ropses, usually for wall hangings, plant holders, table settings, etc. Some of the knots and designs are quite interesting, so I tried to adapt some of them for a cardback, using the Vertical Double Half-Hitch knot.
You ever get an image stuck in your head and it just won't leave? I saw some graffiti using this shading effect and figured I had to play with it myself. We're using a lot of lessons we learned earlier to makde some interesting sizes and placements. Use the Update Preview button to draw a new card!
Chronos is the first truly dynamic card, deriving it's presentation from the current time. Each of the inner rings is mapped to the current second, minute, hour and day. Another happy accident, I'm really pleased with the result and keep coming back on different days to check out the variations. Change the values in the drawRing functions to make your own!
The past week or so I've been switching more and more of my environments to pastels so it obviously was going to carry over here. This design started as something totally different but I discovered this pseudo-MagicEye and ran with it. You can use the count and margin variables to tweak and the Update Preview button to draw a new card!
This design actually comes from some other canvas ideas I hade been noodling with, but I encountered this happy accident to arrage a bunch of little candy-colored tiles. Check out the functions for drawing the box sides and choosing colors!
I've been enjoying some optical illusions recently, especially with concentric circles that provide a sort of hypnosis vibe. We're doing some technically more difficult stuff than is neccesary here, but it allows us some fun experimentation with changing the widths and gradient colors of the bands. Try it yourself!
Another math/stitching inspired card. We're picking an equidistant number of points on a circle and connecting them all to each other. This design is sometimes called a Mystic Rose. Try changing the number of sides to see more results!
Who knew that math could actually be fun. Here we're just drawing circles, squares and lines but sometimes that's all you need. Really digging the sort of runic/alchemy vibe.
A few more experiments with 2D arrays, this time with flexible sizes. We can use some simple variables and loops to put a set of randomly sized pills in our rows. Use the Update Preview button to draw a new card!
This card was inspired by a CodePen I saw, @jiangyijie27's infinite circle animation. We use the hard-light blending mode to create some fun duo tones by drawing one of our rectangles on top of the circle. Use the Update Preview button to draw a new card!
I picked up a book of constellations in a museum gift store this week and was immediately drawn to how they had realized the celestial sphere. I took it as a challenge to create my own night sky of stars, see if you can make any constellations of your own. Use the Update Preview button to draw a new card!
This week I went to the Plotter People meetup in NYC for generative art and drawing robots. What a blast, and I got to read part of a book about sewing mathematical patterns. So what we have here is a circle of equal chords, where each point is connected to a point 11 or 15 places away. Change up the values yourself to see different circles!
If you wrap the golden ratio around a circle, the angle of the smaller section is called the golden angle. It's about 137° and turns out it's very cool. It's often studied in plants and the theory of phyllotaxis, that leaves segment themselves according to this angle. Here we're using the golden angle and some clever colors to create a perfect spiral.
I was sick this week so we're reaching into the drafts folder a bit for a simple excercise that has some pleasing results. Linear interpolation allows us to make a perfect grid relateively easily and cycle through it with random colors. Use the Update Preview button to draw a new card!
One of the most confusing parts of canvas I've learned so far is the global composite operation. It's like blending modes in photoshop, and there's a ton of nuanced ways to use them. Here we're punching circular holes in a grey rectangle to reveal a gradient behind it. Also featuring linear interpolation for positioning our circles.
Welcome to summer everyone! I feel like I know almost nothing about canvas filters, but they seem quite powerful and are gaining support rapidly. Here we're just stacking slightly blurrier and more transparent circles to create our effect.
Did you know that the interior angles of any given polygon add up
to 180 * (n-2) where n is the number of sides? That's
something that I learned this week when thinking about hexagons.
Use the Update Preview button to draw a new card!
Ok you'll have to trust me on this one that I was experimenting with something much more complex, but I ended up just being struck with the aesthetics of this simple idea. We'll explore some new tricks soon but for now I'm just enjoying this.
Won't you be my neighbor? This is probably the most complicated card to date, we're drawing lines between neighboring points in 2D arrays. I made sure to leave lots of comments detailing how each function works. Use the Update Preview button to draw a new card!
No fancy to this one, I was just refining how to make grids and took the opportunity to make something pretty. We are using some `globalCompositeOperation` stuff to get a nice overlay effect. Use the Update Preview button to draw a new card.
I saw @RavenKwok's work with K-D trees on Twitter recently and was mesmerized. I don't know enough yet to create my own trees, but I was able to create a similar effect with some simple rectangles. A good experiment for achieving a look in as few lines as possible. Use the Update Preview button to draw a new card!
I'm back from the museums and back to reading MDN documentation. This is a fairly simple idea that I think get a lot of benefit from good color choices. The most advanced thing we're doing is using gradients to turn our rectangles into star trails. Use the Update Preview button to draw a new card!
The exhibition was so striking that I couldn't just choose one piece. In the SUW/UW Series, Hilma was very interested in reflections, duality and other symbols. We've replicated that in code by drawing our own equalaterial triangles and using overlay blending modes to save some lines of code.
I finally got to visit the Hilma af Klint exhibit at the Guggenheim, and loved her later geometric work. My reproduction isn't nearly as hypnotizing to look at, but a simple and fun exercise.
In the spirit of old Windows screensavers and circuit boards, lets draw some lines. Using some tricky double strokes, we can create an overlapping, but never touching effect. Use the Update Preview button to draw a new card!
Like the stripes they're named after, this card has a sort of slippery, hypnotic effect. Drawing the line groups on a grid is a little tricky, and I feel like I could have done it smoother. Use the Update Preview button to draw a new card!
Math is kinda hard, and so are string literals. I wanted to experiment with mathematically creating colors and color gradients. The results are some very pretty stepping stones, which I thought looked best in a circle.
I wanted to experiment with clipping masks in canvas, and it ended up looking like really big pixels. Reminiscent of leaning in to an old iMac, I decided to lean in to the RGB aesthetic. Use the Update Preview button to draw a new card!
A jump in complexity here. This sketch utilizes a lot of nested loops to iterate deep into some squares. Whenever we draw a square, we make a decision to subdivide it and draw more, and again a second time. This way we get a drill-down, spiraling sort of look. Use the Update Preview button to draw a new card!
No cool story here, just some fun shapes. The interesting stuff we're doing here is probably the helper functions that pick a random item from an array and pick a random whole number from a range. We'll be using these a lot in later cards I imagine. Use the Update Preview button to draw a new card!
Science is the new Rock and Roll. Inspired by a screenshot of the Nowhere Men comic that a coworker had lying around. The only tricky thing here is drawing half an ellipse to cover the front of our sphere and create the halo effect.
Charlie Brown confirmed wavy. This one started out a little different, without overlapping the half circle shapes. But it's kind of a cool effect when you can stack them together to make these wavy lines. Changing the step value will show more of the original idea.
I saw some branding recently that used these covers overlaid to make the letter K. It was pretty cool so I adapted some of the shapes here for something more abstract. We do manually place each trapezoid and it has a rigid width, so lots of room for improvement here.
A geometric pattern inspired by old art deco buildings around New York City. Created by drawing concentric lines and shapes with simple step intervals.
I named this one Vertigo before going and looking at the poster again, but I like the rectangle theme. Start with a small rectangle in the center, increasing it's size, rotation and distance to the next rectangle with each step.
Victor Vasarely was a Hungarian-French artist frequently credited as the grandfather of Op Art, an abstract style that gives the viewer impressions of movement, hidden images, warping, vibrating patterns and more.
Our code is little more complex here, we've created a function that will return an array to us, each item is an object coordinates and a boolean value for rotation. We use this information to move our origin point to where we need to draw each square. This makes it easier to rotate our chosen squares since canvas rotations happen from the origin point.