fogbound.net




Sat, 20 Feb 2016

Anniversary Game

— SjG @ 10:17 pm

So, for our tenth anniversary, I thought I’d make something slightly more … dynamic … than your standard Hallmark card. I thought a simple JavaScript game might be fun.

Since everyone knows that a happy marriage is made of unicorns and rainbows, I figured I’d work with that. My first though was a single-level platform game. I looked at a number of JavaScript game frameworks, and they were all either much too simplistic or much to complicated for what I wanted to do. I spent too much time in the process of starting a game with a new framework, getting frustrated, and then abandoning it. Oh no! I was running out of time!

I decided to bail on frameworks, and just write a quick, simple, pure JavaScript game. I would use animated GIFs as sprites, and do the rest in Canvas. Seems easy.

I raided the usual sources for my assets. I needed a unicorn, so I gave a horn to the Wikipedia running horse animated GIF (which itself is derived from Muybridge’s photos) and knocked out the background. It looked pretty good on a white background!
ur
I then made some animating rainbow hearts, and I was ready.

After the initial stab at coding, unicorns would run back and forth, and rainbows appeared where the user clicked. If the unicorn was within the rainbow ring, I’d register the hit. I was well on my way.

Next, I added the score animations. I was impressed by how smoothly the animation all worked. On a reasonably recent machine, browsers keep up very nicely. Then I went and tested on iOS. Uh-oh. I’d not been very careful about browser size. I ended up recoding the CSS and dimension code to be more or less responsive. OK, seemed good. I added an explosion of hearts effect for when you hit the unicorn. Next, I found a nice source for sounds.

One of the problems I faced was that I was trying to develop the project while sitting on the sofa in the evenings. I’d come home from a long day of coding, and, well, start coding. But then Elizabeth would come home, and I’d have to keep switching windows to avoid creating suspicion. This is where the ability to disable the audio came in. Over the course of a week, I was able to polish it up enough for deployment. It’s far from perfect, but it was well received.

game-1

game-2

Play it yourself, or use the code to create your own game.

Some Lessons Learned:

  • Players will resize the window in the middle of a game. The code should probably trap for that, and do the right thing.
  • I expected players to launch a single rainbow at a time. In fact, there was a whole lot more clicking than that.
  • It might be faster to write a game from scratch, but seriously, take the time to learn a framework and use it. With any luck, it will handle all those weird edge cases, and probably have better support for odd platforms.
  • Sound in JavaScript is nasty, and not very portable. Again, use a framework (or commit to modern browsers, and use Web Audio API).
  • Responsive design is all good, but for a game, it might make sense to commit to a fixed size for playability.
  • Under iOS, things don’t work quite as you’d expect. This game should have been optimized, and used something like the touchAction style to improve playability. Better yet, I should have created a native version with PhoneGap.

Wed, 27 Jan 2016

Onion Texture in Javascript and Canvas

— SjG @ 9:23 pm

When I’m focused on other things and doodling, one of the textures that regularly emerges is a fill pattern of concentric irregular circles.

onions_1
(click to enlarge)

Now, doodling is a way of letting my mind idle. Why I’d want to automate that, I couldn’t say. But for some reason, I did.

So the question was: how do I draw a “sloppy circle,” or one that’s not exactly regular, especially if I want to then draw another similar circle inside of it, and so on.

I settled on the idea of picking a set of points around a circle, with roughly the same radius. If I just drew a line between these points, it would be a regular polygon, and not as gentle as I’d like. So, instead of lines, I needed gentle Bezier curves from point to point.

To get the Bezier control points, I need to create a tangent to the radial line, and put the control points for the curve on that tangent. But how far away from the original point? Better make it a variable!

So, with some playing, I was able to get reasonable values.

You can play with it yourself!

You can easily get results like these:
onions_2

onions_5

onions_3

onions_4
(click to enlarge any of them)

onion_exp_f

Mon, 29 Jun 2015

Failed Javascript Experiment, cont.

— SjG @ 4:38 pm

So I got a few questions about that Javascript experiment, so I thought I’d add some explanation. In the process, I added some features to it.

So what’re all those variables, I was asked. And what do they mean?

To start with, this whole experiment was based on a traditional Islamic tiling pattern. I don’t know the actual origin, but I’m sure it goes way back.

So, step 1, you tile a plane with equilateral triangles. The number of triangles that fit across our page is what I called “Spacing.”

exp-step1

Next, you draw a circle at each intersection of lines. The size of the circle is “Radius” — in this model, a radius of 100% means that the neighboring circles touch.

exp-step2

Last, you divide each circle into twelve equal pieces. Then, according to some predetermined pattern, you connect the points on neighboring circles. Here’s a traditional pattern:

exper-step3

The only other variables of interest are “Column Radius Growth” and “Row Radius Growth” which is the percentage by which the radius of each circle changes depending on the number of the column or row (starting in the upper left-hand corner).

This time around, I’ve added a few different connection patterns.


Fri, 19 Jun 2015

Failed Javascript Experiment

— SjG @ 5:47 pm

I was thinking about textures that are traditionally called Islamic or Moorish tilings.

One simple pattern is built by placing circles on a staggered grid, placing points around their circumferences, and then connecting points to neighboring circles in a pre-defined pattern. Here’s one example:

basic-detail

I was thinking – hey, what if I vary the radius of those circles from row to row?

Three hours of clumsy Javascripting later, I found the answer:

pattern(click on image to see detail)

Unfortunately, it often takes hours of coding to learn that an idea’s not much good.

You can play with some of the variables yourself, or (horrors) look at the source code to see how it works.

Updated:
I couldn’t leave well enough alone, and have added a few features. And I’m getting slightly more interesting stuff now.
pattern2(click on image to see detail)


Mon, 25 May 2015

Half-toning and Engraving

— SjG @ 11:40 am

Consider a photograph or painting. We see a range of colors (or shades of gray) reflected that form an image. But since our eyes and brain are highly optimized for teasing coherent images out of what we see, a great deal of manipulation can be done to those colors and we will still see the original. Artists have exploited this capability for millennia, using areas of light and dark paints to hint at the details which our brains happily provide.

With the introduction of printing, techniques for “half-toning” emerged to convert a continuous image into a two-color (normally black ink and white paper) image that maintained as much as possible the appearance of the original continuous tone image. There are many photographic processes for making such conversions. I’ll discuss one simple example here, using digital instead of photographic techniques.

We start with an piece of a photograph. This picture is sepia toned and not extremely contrasty.
original

The first step we take is to convert the picture to purely gray tones. When we do this, we also adjust the contrast by shifting the the tones so that the darkest shade in the image is assigned to pure black and the lightest shade in the image is assigned to pure white, and all other shades are adjusted according to their position between the lightest and darkest shade.
gray

The second step involves superimposing a pattern over the picture. The pattern should have be a continuous repeating variation between light and dark — when we superimpose, we multiply the two images, so that the darker of the pattern or the photo dominates. In this case, I used simple straight lines, which are made with a sine wave luminance cycle between pure white and pure black.

screen

The remaining step is to look at each pixel, and decide whether it should be black or white. We do this by simply comparing it to a threshold. Is it lighter than, say, 50%? If so, then it’s white. Darker? Then it’s black. But 50% may not be the best place to position our threshold. We can try various thresholds to see how it comes out:

Here are a few observations that may be relevant at this point. At each of these steps, we made decisions which I glossed over. For example, when we adjust the contrast of this image, we chose a linear conversion. We could, instead, have used different curves to emphasize bright areas, dark area, or middle tones. We could have used histogram equalization which adjusts the image such that there are roughly the same number of pixels for each shade used (often used to bring out details).

Similarly, our overlay pattern needn’t go from pure black to pure white; by changing the ranges of this overlay pattern we are doing the equivalent of adjusting the tonal curves of the original image. We can also have a strong influence on how the final output looks. With a pattern that includes shades darker than our threshold, we will end up with the pattern throughout the final image (as in this case, our final image has lines across all parts of it). By having a pattern of only half maximum density, the lighter areas will not show the pattern:
screen-half

The overlay pattern can be many shapes other than lines (like concentric circles), and there can even be multiple overlays. Traditional newspaper half-toning uses two linear patterns like the one we used, but set at an angle with respect to one another, thereby creating diamond patterns. Newspapers chose this diamond pattern because the size of the pattern relative to the detail in the image determines how much detail winds up in the final image.

I tried to use the above techniques for generating 3D halftones or etchings. While it’s probably a project best suited for use with a laser cutter, I don’t have a laser cutter. I do, however, have a Nomad CNC router!

I wrote a short script that analyzes an image file, and converts it into a set of 3D ridges. My first approach looked at the image row by row, and created a groove with a thickness inversely proportional to the luminosity of the pixels in the row.

2015.05.25-12.18.41-[3D] 2015.05.25-12.03.47-[3D]
Result (click to view) Detail (click to view)

This works well in theory, but neglected to take into consideration some limits of my machine: the work area is 20cm x 20cm, and the smallest end-mill (cutting bit) I have is 1mm in diameter. This functionally limits my smallest detail to somewhere around 1.05mm. Add the fact that the wood stock I had on hand was around 8cm on its narrow dimension, and this results in an image that I can’t carve.

My next algorithm analyzes three rows of the image at a time. As it steps along the rows, it uses the average of the three pixels at each column (call them a, b, and c, where a is the top row). If the combined density is greater than 50%, a 1mm ridge is created. The ridge is thickened on the top by the average density of a + b, and thickened on the bottom by the average density of of b + c.

2015.05.25-12.13.16-[3D]

2015.05.25-12.09.26-[3D]
Result (click to view) Detail (click to view)

This algorithm provides something that’s within the resolution I can carve, but loses an enormous amount of detail. Furthermore, it requires harder wood than the birch plywood I tested on. I did some minor tweaking of the threshold, and here’s what I got:

Photo May 24, 12 07 22 PM

So at this point, I have a set of 0.5mm cutters on order, and need to track down some good hardwood stock to try carving. As always, details will be posted here if notable.