Post navigation

I have a new geometry toy, Tiles. It’s a thing that lets you play with aperiodic tilings, which are special tiles resist tessellating in a way that repeats itself.

You can swap between using kite and dart, and rhombus tiles, which are both kinds of penrose tilings.

I made it just because I wanted to play with these tiles. Originally I was looking for a way to try them out physically, by printing some and cutting them out, but eventually decided that it might be more fun to make it something I could share with other people.

Most my projects start out with me drawing things on paper, and then eventually I move to the computer to try and find an interface that can be used to recreate things I’ve drawn. But with these tiles, I didn’t get to try them out first, so I was far less clear on how it would work then I normally am at the start of my work.

The limitations of the tile’s joining rules allowed me to use very simple interface. Only one orientation is allowed for each tile shape per join, so each connection is a binary choice. Sometimes there is only one choice, or no choices, because one or both of the possible tiles would overlap with an existing tile, or a have an edge with an illegal join.

I found that even I’m just clicking around for fun, having limited choices makes placing tiles faster and more playful.

The interface, and lots of the code, is shared directly with Castles Made of Castles. Part of my aim with these two was to make a more modular code base that I could use for sciencevsmagic projects. So in theory it should now be easier to make new ones.

Today I’m releasing Castles Made of Castles – a building tool where the pieces are the same as the whole.

Castles Made of Castles was commissioned by, and first playable at, the Now Play This festival in London. Game events offering commissions or exhibitor fees are rare, so I’m really grateful for the opportunity. Since the festival it’s been waiting around for me to tie up a few loose ends, and now that Push Me Pull You is finished, I’ve found the focus to give it a proper release.

Castles mixes fractals and voxels. Like most of my work on this site, the idea came from some pencil and paper fractal castles I had drawn. Originally I envisioned something like a 3d version of my fractal machine; a bunch of sliders that controlled tower spacing, height or whatever. Once I started working on the algorithm I realized I just need a quick way to place blocks, and decided a minecraft/infiniminer style interface would be better.

Making another ‘sciencevsmagic.net’ project after so long was lots of fun. The work on this site is quite consistent, with very similar constraints, and I let that guide my design. It felt very natural to fill Castles out with click and drag, infinite zoom, undo/redo, random colors, and storing all the data in the URL.

If you make a nice castle, please post it in the comments.

Hi sciencevsmagic.net, sorry I haven’t updated my website for three years. I was making a videogame.

After you last heard from me, back in 2013, I got together with three friends and we decided to make a small videogame. We didn’t expect much. Mainly it sounded like a good excuse to hang out a bunch.

We had no formal experience in game development, or connections in the industry, but we had all been playing local-multiplayer games together and wanted to try making one for ourselves. After making Let’s Play: Ancient Greek Geometry I figured I probably knew *just* enough about programming that I could get a real time game to run.

Our idea was to make a 2v2 sports game in the vein of Ramiro Corbetta’s Hokra, but to really force the cooperative aspects by joining teammates up with a Noby Noby Boy style body. We called it Push Me Pull You.

Push Me Pull You, about one week in.

On New Years Eve 2013, after working on the game for a month, we showed it to some friends of ours and the reaction was really positive. So we made a website for the game and put some gifs up, hoping that someone would see it. People did, and off the back of those gifs the game was offered a spot at That Wild Rumpus and Venus Patrol Party at GDC 2014. Suddenly, without us quite understanding how, lots of people in the videogame industry knew about our tiny, silly sports game.

Looking back, it’s hard to tell how we went from summer project to playstation game but our biggest milestones were always these types of parties. For the first half of development we weren’t sure what the finished version of Push Me Pull You needed to be, but we always knew what we wanted to have in the game before the next big event.

Doing events told us that, given the right setting, the game could be really fun, but we could see that it was going to take a lot more to make the version of the game that worked in people’s homes. Our early showings relied a lot on having someone standing by making sure things went smoothly.

So when the opportunity arose to release our game on playstation, we decided we would take the plunge, make the version of the game that ran smoothly (almost) every time, and learn whatever we had to to make Push Me Pull You a full commercial release.

This last part took about two years, and relied on the help of lots of generous and talented people (especially the team at LoG and Dan Golding).

at release

If you want to hear more about the experience of making PMPY, there is a PMPY blog. I’ve written about the first couple days of development, making a camera system, and designing our UI.

A few weeks ago we released the game for computers (our final release) so the project is pretty much finished now. Our company, House House, will be making a new game together soon.In the meantime I’ve got a bit of a backlog of things I want to do with sciencevsmagic.net, and am hoping to get a few of those out to you really soon.

Introducing the Tessellation Kit. It’s a tool that lets you draw tessellations by pushing the edges of shapes into each other.

Just click on the canvas and drag the mouse around to extend a shape, and mathematics will take care of the rest. There a few buttons that let you change the shape of the tiles and the colors you are working with and a toggle for changing how the shape repeats.

Together they make it pretty easy to make something like this:

Despite it’s simplicity, it can do quite a lot. I used it to recreate this Alhambra tiling:

And this interlocking pattern that Wikipedia tells me is ‘painted porcelain, china’:

The color schemes are generated completely randomly, so I’m sorry if you have to go through a few duds until you find one you like. I quite enjoy the feeling of finding a nice one that’s completely unique, so I didn’t want to just provide a few preset themes, or a simple generator that didn’t provide enough variety.

If you start getting serious, you might want to know that there are a few hotkeys and hidden features:

• ~ or h hide the controls
• z undo
• x red****o
• e export to png
• -/+ zoom
• 1-5 operate individual controls.

Today I’m releasing Let’s Play: Ancient Greek Geometry. It’s a Compass and Straightedge tool/puzzle game written in JavaScript. I’ve always thought Geometric Construction felt like a puzzle, so to me this pairing was quite natural. Compass and Straight edge is a technique for constructing shapes out of circles, straight lines, and their intersection points. You can read the wikipedia here – but watch out, some of the gifs are spoilers for the game.

I know that there are a few Compass and Straightedge tools out there already, but none have the simplicity, accessibility or fun of a modern web application, so hopefully mine stands out.

As I said, it’s little bit Geometry tool, and a little bit puzzle game. Throughout development I was conflicted about which was more important. I wanted it to be simple and stripped back enough that you could use this as a go to Compass and Straight edge app, but to make the natural playfulness of geometry to be as visible and as tempting as possible.

In the end I tried to keep the two quite separate. The drawing area is completely free from outside influence, but there is also a “Challenges” box with achievement style goals. Hopefully this shows off the possibilities of construction and encourages people without getting in the way. If you are the type of person who prefers to make their own goals, you are free to ignore it all together.

Considering this is only my third programming project, and 8 months ago I barely knew what JavaScript was, I’m quite happy with how this project came out. In the next week or two I’m planning to post a few things about how it all works and the technical challenges I faced making it.

I’ve updated the Fractal Machine. It can now skew the motif asymmetrically and add arms that stick out. It also has a new “Auto” mode that dynamically adjusts the settings while the machine animates. Turning Auto on, and pressing H or ~ to hide the controls and pressing F11 for full screen is now officially the best way to watch the Fractal Machine from the couch. The controls have had an overhaul to fit all this new stuff in.

It should also be much faster, and cope much better when drawing a very detailed fractal that requires millions of lines. I’ve heard the old version had crashed a few peoples browsers, this new one shouldn’t do anything like that, even if you tempt fate by turning everything up.

I’ve finished my next project. It’s called the Fractal Machine.

It’s a geometry tool that draws base-motif fractals from five inputs.

If you are unfamiliar with them, fractals are shapes that exhibit self similarity at different scales. This particular type of fractal is created by substituting every line with a shape called the “motif” a number of times.

The Controls

The glyphs above show the controls working in isolation (at an angle of 60°), but the fractal machine’s complexity comes from the way in which they interact. Once these inputs are given, the fractal tries to dynamically resize itself in a way that highlights these relationships. So the length of a single line changes, but the overall size of the fractal and positions of analogous components should be relatively stable. Figuring out the trigonometry that made all this work turned out to be pretty fun.

I figure that some people will want to use this to explore human-scale geometric relationships, while other people will just want to turn on the animation, colors and trails and watch it like a music visualizer. Hopefully most people do a little bit of both and enjoy the way one builds into another. One of my favorite things about recursion is that it can let you see simplicity inside complexity.

If you want the quick tour, some shapes worth checking out include: The famous Koch Snowflake, something I’ve been calling the Koch Mirror, Sierpinski’s Triangle, Sierpinski’s Carpet, this great pentagon fractal, and this cube snowflake I found.

Unfortunately, javascript and canvas are still pretty slow when it comes to a hundred million lines at once, so sometimes the page can get pretty slow. If this gets frustrating, try turning a few of the controls down, depth in particular makes a huge difference.

If you find yourself staring at this for a decent amount of time, you might like to know that you can press H to hide the controls and use the keyboard instead. I’ll leave you to work out what buttons do what.

This has been my second ever programming project (the first being my logic grid/eca), and I’ve learnt a lot. For anyone out there interested in beginning to program, I really recommend JavaScript and canvas as a way to start. Just find a template for an html file with a working canvas, and draw some lines. The rest is actually easier than it looks.

pencil & graph paper

pencil & graph paper

pencil & graph paper

Post navigation