ThreeJS Experiments

Lately, I have been on a mission to acquire deeper knowledge of ThreeJS.  Unfortunately, the documentation is a bit scarce.  Fortunately, there are many examples to dissect.  In this post I’ll cover a few that I’ve been messing around with.

Ultimately, these “experiments” may find their way into Dex.  However, for now, they remain that; visual experiments.

Concentric Circles

In this visual, I imagine a dataset such as:

X, Y, F1z(X,Y), F1mag, F2z(X, Y), F2mag(X,Y) …

X and Y pair would be mapped to F1, F2, … Fn where F1z(X,Y) would represent the z coordinate in three-d space.  F1mag(X, Y) would represent the magnitude, or length of the line segment protruding orthogonally from a spherical surface onto which the line segment is mapped onto.

F1 would map to the innermost sphere, F2 onto the next spherical surface, and so forth.

Working with a base demo found in mrdoob’s repository:

This version has only minor modifications to the base example.  Mainly color changes.

concentric_spheres1

Next, I took out the rotational stuff, it was making me motion sick.  Instead rotation is a function of mouse location.  I also mapped the shells going from innermost to outermost to: red, white, blue, green, yellow.

concentric_spheres2

In the third example, I changed the auto-rotate to engage only when the left mouse is pressed down toward the edge of the screen.

concentric_spheres3

And lastly, for this group of visualizations, I changed the auto-rotate factor to rotate faster when closer to the edge of the screen, and slower when in the middle.  Again, the left mouse button must be pressed when rotating.

concentric_spheres4

Glowing Sprites, Tweening and Spherical Coordinates

One thing is certain, visualizations can really pop out in WebGL.  ThreeJS makes is pretty attainable.

In the first demo, particles cluster towards the center in a cube, then fall apart and tween off the screen.

glowy1

Next, a random stream of particles will be generated, then particle generation will follow the mouse.

glowy2

Last, but not least, we map the particles to a spherical coordinate system where:

x = r * sin(theta) * cos(phi)

y = r * sin(theta) * sin(phi)

z = r * cos(theta)

This visual is similar to the first group of visualizations.  It will create three energy shells and map the values to the shell in which it belongs.  It’s pretty and kind of fun to play with.

glowy3

Hope you enjoyed, this.

– Pat

Advertisements

About patmartin

I am a coder and Data Visualization/Machine Learning enthusiast.
This entry was posted in General. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s