canvas Archives - Curvature of the Mind

New Feature – Download demo image

I’ve been revamping the site, working towards a more visual layout. Part of that has been going through old posts and attaching an image to every single one of them. Some of them just needed selecting an image from the content, and some needed an entirely new image generated from the demo code. In the past, that has meant capturing screenshots or uploading the image to a service like imgur.

I figured there has got to be a better way, so with a little bit of simple research, and adding some angularjs to the site, I’ve added a helpful download button to many of the javascript demos on the site. This includes the 3D Harmonic oscillator demo, and the Atomic Orbital demo as well.

While that makes things easier for me, it also makes the site much more useful in general. Now you can pick out an orientation for an atomic orbital and snap a quick shot of it however you want. Or you can build your own fractal and grab a copy of it.

I’ve also gone through the old catalog and updated pages making sure they all still work. A number of those early projects were one off simple demos. While neat, I don’t think they’ve lived up to their full potential because of the limits in parameterizing them and putting multiple copies on a single page. Now that I’m rewriting them using angularjs I’ll be able to integrate them much more richly into my writing.

I’m jonesing to take full advantage of much of the code I’ve written. I’ve only done two basic posts based on a javascript based geodesic solver I’ve written for Schwarzschild black holes. There is so much more I can do with that. I haven’t touched on the Doppler effect in the speed of sound demo, or added relativistic effects.

Related Images:

All filled in – Animated Generative circles #2

The stills don’t have anywhere near the punch that the ring rendering does, but the nebulous billowy cloud like effect is nice. I’m using the same code to pick the colors, just replacing stroke with fill. I’ll have to keep this in my back pocket and see if there is something I can pull this out for in the future.

$fractalcirclefill2$

$fractalcirclefill1$

$fractalcirclefill3$

Related Images:

Circular Cellular Automata

These are the same cellular automata I’ve been working with. This time I’ve just mapped them into a circular grid, which seemed to make sense as I’m using circular boundary conditions.

Related Images:

Connected components in cellular automata

This is a basic rendering just connecting cells if they are in the same state.Â It turned out kinda neat.Â I started with a ball and stick model, but the balls just added visual noise.Â I think I’ll try rotating a shaded ball next, but the transitions require comparing two models instead of just blending the two images. Â

Related Images:

A Random Walk Through Some Cellular Automatons

I wanted to investigate how closely various cellular automatons that differed by only one term were to each other, so I whipped up a demo that does a random walk through the parameter space of 1-d 2 bit automatons using a neighborhood of 5 pixels. Â This is the first one that popped up.

The next one is a automaton that differed by one parameter and is either off by one either above or below the example above.

As you can see the result is much more regular and I would have considered it completely different, not a close neighbor of the previous rendering. Â Another step:

This is more interesting, but is another close neighbor of previous two.

I decided to start over and in a little more controlled environment, I came up with these two.

And one of it’s neighbors.

As you can see, this part of the space has more closely related images. Â It appears to be close to what I would have expected. Â The more “binary” you get with the 2 value spaces and smaller neighborhoods the less related the images are, and the larger the pixel and neighborhood spaces the more “continuous” the behavior becomes. Â That doesn’t mean that the hard boundaries go away, and I’m sure many measures of the resulting spaces have a self similar structure, which would be interesting to investigate in and of itself.

My next plans involve, showing single pixel deviations in the initial state, and then building graphs of all the positions of the automaton spaces. Â I’d like to compare how the graphs change as you make the automaton space larger. Â I still have more predator prey stuff on the back burner too.

Related Images:

Chaos #1

I’m starting a new series based on chaotic dynamical systems.

Related Images:

A minor update – circles

I’ve changed the algorithm up a little bit using circles instead of lines. Â I like the additional focus point it adds to the composition.

Related Images:

Canvas Line Based Image Renderer

This is the second in a series of canvas rendering demos that I’m putting together. The first Â was from yesterday’s post using random colored circles. Â This one was inspired by an image I came across on pinterest.

Most images look pretty horrible with this approach, but objects that have relatively plain textures and stronglyÂ delineatedÂ boundariesÂ both end up looking pretty good.

Like yesterdays demo, you need to have an image on your system to upload to see anything.

Related Images:

HTML5 Canvas Image Effects

It helps when you actually upload the page for your demos. Â One of the down sides of scheduling posts before finishing them is that you might publish prematurely.

This is the first page I put together to play around with the combining the canvas and file upload controls. Â The page works by loading up the image and generating random circles using the center point of the circle to sample the color. Â Playing with the alpha level of the circle led to some interesting effects, but I didn’t prefer one setting over any of the others, so I set it to vary with time.

I’m trying to get it to preload an image from the site, but the canvas security and random errors I’m getting are making it not worth the effort. Â Long story short, you have to have an image to upload for this page to work, so when you navigate to it, click the button and upload an image.

Related Images:

Messing around with the canvas mask api

This is just a quick little demo using the mask API call. It ended up looking a little nicer than I thought it would, so I figured I’d show it.