| layout |
|---|
default |
Hi there! I'm an artist and maker living in Los Angeles, you can visit my main website at wolfCatWorkshop.com.
This is a collection of sketches where I explore coding that creates images I find interesting and that can sometimes result in a physical object being made. I'm always learning so somments and suggestions are welcome.
Makevember is a challenge to make one thing everyday in November. There is a longer manifesto you should read but in short it proposes:
Every day in November make a thing – if you can’t do it every day then do what you can, but the idea is to push yourself to work daily and with less procrastination. Do not attempt to put your ducks in a row first.
In 2017 I made a bunch of little handcranked machines I documented here but in 2018 I wanted to get a little bit out of my confort zone and explore some creative coding. You can also find some of these images and what I did with them on my twitter or instagram.
I'm only posting screen grabs here so click on the image or link to see the actual sketch.
A simple set of overlaping grids, the color palette here is inspired by old school risographs. I also drew a second shape with a slight offset and transparency to simulate the charming missalignment of those machines.
//palette
yellow = color(255, 232, 0);
mediumBlue = color( 50, 85, 164);
fluorescentPink = color(255, 72, 176);And the results of this sketch seemed good for some papercraft, replicating the colors on the screen is never an easy task.
I struggled a bit with the bezierVertex function to make the blinking eyelids, but I did it at the end. The palette was inspired by baby mario from "Super Mario World 2: Yoshi's Island", I found this color wheel on the gamecolor wheel instagram account.
//palette
brown = color('#49443e');
blackish = color('#080603');
redOrange = color('#f4401e');
darkOrange = color('#f69004');
offWhite = color('#f3e7df'); And some more papercraft to complement it:
My gif export was a little clunky, check out the sketch page for a better experience. I started by trying to recreate the classic overlapping circle pattern on a hexagonal grid but when I started changing the radius of the circles crazy patterns began to emerge. I added a slider to navigate them by multiplying the radius by a certain amount. The starting point of 1 is with the circles tightly packed on the hexagonal grid, but this is an arbitrary choice on my part.
As a bonus I ended up laser cutting my favorite variation (radius multiplier 2.5), here is an SVG file if you are interested in cutting your own.
A simple pattern navigator that works by placing polygons on a square grid. You can change the radius and the number of sides with some sliders. I wanted to add SVG export so I'm using this p5 SVG library, it requires and older version of p5js so I couldn't use the same technique for placing the SVG canvas inside a DIV that I used on the other sketches so the page doesn't look as neat, but the SVG download works.
I think the most amusing patterns are made by the octagons. Polygons with a larger number of sides are very close to a circle, and some of the other ones like triangles and hexagons probably look better on a hexagonal grid.
I also cut something with my favorite variation, here is an SVG file for this one.
I wanted lots of eyes. I think a sort of monster is kind of taking shape everytime you redraw the canvas. Same palette as day 2.
//palette
brown = color('#49443e');
blackish = color('#080603');
redOrange = color('#f4401e');
darkOrange = color('#f69004');
offWhite = color('#f3e7df'); 
Another "pattern explorer" using only radial symmetry and ellipses. This time I used the quicksettings library for the user interface, boy does it make life easy if you want lots of sliders and buttons, it looks fairly clean too.
And here is the object I made, since this sketch uses a lot of TWO_PI it seemed fitting:
Quite similar to day 4 except now I'm placing the polygons on a hexagonal grid. Hexagons create really pretty patterns and there are some interesting shapes that come out of non-multiples of 3 like pentagons and heptagons. Still using quicksettings.js for the user interface.
To create the distance for placing things on a hexagonal grid (or triangle grid if you wish) I'm using this idea:
Given a circle with radius(r), the horizontal distance between circles is the diameter(d). Every other row is horizontally offset by the radius(r) and vertically offset by the sine of 60 degrees scaled by the diameter(d). Then I use a nested for loop to draw 2 shapes per x and y positions, effectively using a square grid to draw a hexagonal grid. There is probably a better way, but this is what my brain came up with. Simplified code looks like this:
var radius = 20;
var diameter = radius * 2;
var yOffset = sin(TWO_PI/6) * d; //vertical offset
//notice that 'x' moves by diameter, and 'y' by twice the vertical offset
for (var x = 0 ; x <= width; x+= diameter){
for (var y = 0; y <= height; y+= yOffset * 2){
ellipse(x, y, diameter);
ellipse(x + radius, y + yOffset , diameter);
}
}Heptagons on a hexagonal grid are not super common so I cut this strange thing:
This one draws a leaf shape on a rectangular grid. You can select shape size, angle, horizontal offset and vertical offset. I also added a checkbox to toggle a simple animation (the shape size oscillates using the sine function).
The objects you can make using this particular pattern generator resemble UFOs:
This sketch allows me to draw a series of concentric arcs with custumizable offsets. It's useful for cutting bendy shapes like the one depicted. Bonus: I used a recursive function! For a video of how the cut paper behaves look at this post.
This sketch creates a sort of halftone effect using crosses. The crosses are drawn on a grid where every row is offset from the previous one and there is a line of symmetry through the center of the canvas. I'm using perlin noise to change the cross sizes to give them a smooth transition. Unfortunately the SVG library seems to take a fair ammount of resources so I didn't animate the transition, but it's quite amusing if you wanna give it a try.
I don't think this piece of paper was very interesting but it might have its uses designing speaker grills:
Dipping my toes into a random shape generator that overlaps shapes drawn at random into a grid. I did only ellipses, lines and points to keep it simple and get familiar with the format.
Perhaps the resulting papercraft cube I made can summon hellish creatures. To create the cube I used the excellent template maker site to download a simple box and then added the images from the sketch using Illustrator.
Drawing polygons on a grid with some overlapping lines between the center of each polygon and its vertices. The idea was to make them cuttable while highlighting the triangular insides of each polygon. Another exploration on the shape generator with some symmetry added to it.
I was certainly ambitious with the size of my cuts since a lot got burned, but the accidental dial-like look was still amusing.
I've been making pretty rigid grids so far so I was thinking it would be nice to make a sort of "woobly" grid. This is the incarnation at is very basic. I'm drawing quads because I can specify a random variation for each point. Going crazy on the random values creates an amusing animation.
And it's possible to get interesting looking paper grids out of this one:
This one was inspired by this Tweet and a paper.js sketch. I expanded the idea just a little bit by making it possibe to choose the number of sides.
I didn't have a lot of time but I made a symmetric grid where the rectangles are a tiny bit bigger than the spacing and are generated at random, this creates some interesting trails in an otherwise very "space invaders" looking animation.
I was exploring four corner symmetry. Nothing too fancy since I had a long day at work. But the trick here is to draw the same rectangle four times, for left/right symmetry use x and (width -x); and for top/bottom use y and (height-y).
rect(x, y, size, size); // top left
rect(width - x, y, size, size); // top right
rect(x, height - y, size, size); // bottom left
rect(width - x, height - y, size, size); // bottom right
I was reading the wikipedia entry on sine and I found the angles for which the values of sine are particularly simple. We can use that simplicity when writing code to calculate the ratio of certain grids, like a hexagonal lattice that can be constructed out of quadrilaterals which are √3 times as high as wide.
The basic code I wrote to draw that quadrilateral (or rhombus) is:
//draws a rhombus with center at x, y and a given height; the width is √3 times the height
function hquad(x, y, hheight){
let h = hheight/2; //half the height
let w = h * sqrt(3); //half the width
quad(x, y - h,
x + w, y,
x, y + h,
x - w, y);
}And the grid can be drawn with two nested for loops that follow a spacing of the same proportions. This image might clarify the idea:
More explorations of the hexagonal lattice with √3. The size of the shapes is proportinal to the distance from the focal point.
This was an exercise in using objects that I could update with a button. I create a Node class, and a couple of arrays, populate them in setup() and use them to draw a "donut" shape. They have an update function that changes their location by a random ammount. I'm not sure why would you want a crooked donut but here it is. Palette is from this image by cosmic nuggets. Colors extracted using palettegenerator.com and I created the GIF with ezgif.com which is my favorite all around gif tool so far.
//palette
background = color('#94F3F9');
fill = color('#4DDAED');
stroke = color('#33A3BD');
I think the crooked donut acquires and interesting look when made into an object. We are too used to the ragged edges of the random function on screen but there is something delicate about them on paper.
I wanted to implement a version of Truchet tiles. So nothing complicated except for an excuse to practice some object oriented programming.
You have to make them slightly smaller for cutting but these tiles also create an interesting grill:
With a small modification the previous sketch turned into the quarter-circles version of Truchet tiles.
The random islands created by this version have their own creative merits:
The deadline for another project I had to complete was looming over me so I couldn't code for the last days of november. But if you are a fan of My Neighbor Totoro you should see this piece I made.
Nonetheless I feel I packed some good experiments for a month. I wanted to use p5js because it's so easy to open a browser window and start coding, it also makes the sketches easily shareable. The downside here being the ability to export digital fabrication files (such as SVG's). Zenozeng's library does the trick but one has to dig for older versions of p5js and it will slow things downs and break sometimes (also watch for the ellipse function, you have to specify both width and height otherwise things don't work). If the only goal was to get usable PDF's using the desktop version of Processing might be a better choice.
If you are looking for SVG capable javaScript platforms there are many other options to explore such as maker.js, two.js, openJScad, paper.js, dig into PDFKit to get a very processing-like feeling to SVG construction or use Autodesk's Creative Platform in Tinkercad. Althought it was tempting to go in these directions I stuck with p5 for this round, well, except for this experiment using Tinkercad blocks.
Thanks for looking!