Flashy Programming

Particle Shells

Nat — Fri, 16 Jul 2010 17:39:46 +0000

This sketch is by far, one of the simplest ones I’ve ever made. All it is is a bunch of particles displayed as circles and attracted to each other as though they are connected by springs. This alone is pretty boring to look at for more than a few seconds, but, if you plot every point that every particle is ever at, it ends up a lot more interesting.

So first of all, adding one particle doesn’t display anything. Two particles basically draws a line. Three seems to always draw a rounded square thing. Four becomes some weird, symmetrical, amorphous thing. It’s only after adding five or more particles that it becomes more interesting and complex. Try it out for yourself!

Check it out here:

Particle Shells (Chrome only)

Particle Shells (Everything else)

Click to add a new particle at the mouse’s position. ‘c’ deletes all the particles and ‘v’ clears the screen.

Crystals

Nat — Fri, 18 Jun 2010 18:51:58 +0000

After a afternoon of staring, mesmerized, at Jared Tarbell’s amazing work, I was inspired to try to remake Substrate. Well, by the time I finally figured out how to detect when points intersect lines, I had sort of forgotten what Substrate looked like. As a result, I started tinkering with the particles and their angles.

The program is fairly simple, it is comprised of particles displayed as points on the screen. The screen is not cleared after each frame so the points, when moving, look like lengthening lines. This was pretty simple to put together. The next thing to do was limit the particles’ movement to make them look interesting. Basically, they stop moving if they hit one of the window’s boundaries or if they hit of the other lines on the screen. To check for the latter, each particle checks to see if there are black pixels “in front of them.” This makes the lovely intersecting look which, in my opinion, makes Substrate so nice.

So, here it is!

Click to create new particles. Use the UP and DOWN arrows to increase or decrease the angle at which new particles spawn (just try it and it will make more sense).

Crystals (Chrome only, I think)

Crystals (Not Chrome only)

Panels

Nat — Tue, 18 May 2010 21:27:05 +0000

This is a little program I put together in a few minutes the other day. It’s basically just a bunch of rectangles set on a grid in 3D space. They all have position, color, and rotation properties that can be changed. The current form has them rotating according to a perlin noise field. So…here it is.

Panels – Unfortunately my lack of html skills makes it so that this link only seems to work in Chrome( the best browser ever), so if you don’t have Chrome, you should try this other link.

Panels

focus

Nat — Thu, 13 May 2010 03:42:04 +0000

Here’s a little flash game I put together in about three days. Its called focus and basically it’s just a little arcade style game. You play as the little red ship at the bottom of the screen and you shoot the little green ships whizzing all over the place.

Here it is: focus.

How to play:
Arrow keys to move. Space bar to shoot. You can get hit 100 times before the game is over.

Boids + Perlin Noise Flow Field

Nat — Tue, 23 Mar 2010 06:02:33 +0000

So its been a while since I posted anything because I’ve been working on a new game, Harry the Fat Cockatoo. I will post more on that later. For now, I threw together a little boids applet. This one is in Processing unlike my first try in Flash so its a heck of a lot faster. Also, in this one, the boids are accelerated by a perlin noise flow field, or vector field. This adds the illusion of water or wind currents. Well, thats about it so here is the applet.

Boids - Hold down the mouse to create a repulsive forces around the mouse.

If that link doesn’t work, try it here.

Unfortunately my lack of HTML skills still hinders me from being able to embed Processing sketches in order for them to work in all browsers (currently they only seem to work in Chrome). If anyone can help me out with that it would be very appreciated.

Here’s a short video of it.

Electron Microscope

Nat — Mon, 01 Feb 2010 06:52:11 +0000

Here’s a little applet I made last weekend. It’s basically just kind of cool looking, nothing really special as far as math and programming go. When you click, it creates a few particles that move out radially from wherever the mouse was clicked. The particles slowly shrink while wobbling a little bit. This makes a growth-like effect. The reason I call it electron microscope is because the growths have the same alien-like look of many images created by means of an electron microscope. This applet was inspired by Anthony Mattox’s Anemone.

Here it is. Electron Microscope.

If the applet does not work there, try it out here ( I’ve been having some trouble recently with the html code for embedding my Processing sketches).

To create a new growing thng, click anywhere.

To reset, tap the shift key.

Node Garden | Update

Nat — Mon, 18 Jan 2010 04:42:34 +0000

After reading more about Node Gardens at Levitated.net, I decided to change up the functionality of my earlier version. In this version, the nodes attract each other when they get close enough but when they get too close, they begin to repel (like a real spring). Also, the nodes will bounce off each other like physical objects. Finally, the bigger circles change their velocities at a slower rate than the smaller ones, in order to simulate inertia.

After some tests, I noticed that because of the inertia code mentioned above, the larger circles tend to stay on the outer edges of the “blobs” that form, while the smaller circles stay in the middle sections. To take advantage of this, I made the bigger circles lighter in color than the smaller ones.

Here is the final product: Node Garden 2

Holding down the mouse button will create a repulsive force from the mouse pointer.

Starry Night

Nat — Tue, 05 Jan 2010 00:41:53 +0000

After a visit to the Griffith Observatory, I decided to attempt the creation of an applet that would procedurally create an artificial version of the pictures taken by telescopes like Hubble. And here’s what I came up with.

Basically, I defined two types of space objects: stars and galaxies. The stars are composed of two sub objects: A simple ellipse and what I called a “streak,” which is just two triangles that share one side and are mirror images of each other. Every star has between 3 and 5 of these “streaks,” in order to make them look like they are very bright. The galaxies are a bit more mathy. They use a couple of trigonometric functions. First I started with mathematically creating a circle of points. Then, I changed the circle a bit in order to have the radius of it go from 0 to some other number, which resulted in a spiral shape. After that, I made the points’ positions slightly random to create a cloud-like look. All that work amounted to a single “arm” of a galaxy. To make more “arms”, I just had to duplicate the first “arm” and rotate it.

The next step was to create thousands of these stars and galaxies and position them randomly on the screen. Using the “random()” function in Processing resulted in an unnatural distribution of the stars and galaxies. What I did instead was a little more complex but much better visually. I used the “noise()” function to decide how many stars and galaxies should be made in each part of the screen. This way, the stars and galaxies appear to be formed into clumps, with some areas denser than others.

Finally, here is the applet:

Starry Night

Note: Each new image takes about 10 to 30 seconds to create. To make a new image, tap any key.

Visualizing Perlin Noise

Nat — Sun, 27 Dec 2009 01:22:57 +0000

This applet uses Processing’s “noise” function. Basically, it generates a bunch of randomly positioned particles. Every particle has a horizontal and vertical velocity component, xv and yv. When each particle is updated, xv is set to cos( noise(x,y)*TWO_PI) and yv is set to sin( noise(x,y)*TWO_PI ). What this is translated to is:

1. Choose a number from perlin noise between 0 and 1.

2. Multiply it by 2π in order to have a new number between 0 and 2π.

3. Take the sine or cosine of that new number depending on whether it is for xv or yv.

So this is what you end up with when you plot a point everywhere the particles go.

Perlin Force

Click to add 500 new particles. Tap any key to clear the screen and generate a new set of perlin noise values.

These are some shots of the basic applet described above along with a few variations that can be produced by modifying the xv and yv values.

Gravitational Motion

Nat — Sat, 19 Dec 2009 03:11:10 +0000

This is a gravity simulator in which the colored points move towards the mouse pointer as though attracted to it by gravity. There is also a little fading effect I added so that the paths of the points are a bit more defined.

You can see it in action here:
Gravitational Motion

Click to add particles and press any key to clear the screen of all particles.