More fun with hexagons this week. I really like how there seem to be some organic peaks and valleys in the opacity, but I promise it's just random. Also some fun nudging to get our hexagons to pattern correctly. Use the Update Preview button to draw a new card!
Did you know that the interior angles of any given polygon add up
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.