Author mannytan

arc experiment

I’ve been drawing circles with code for quite a little while now.
For the most part, I’ve been drawing them using a simple sinusoidal equation which I’ve used a ridiculous amount of times.


for(i=0;i<total;i++){
    var percentage = i/total*Math.PI / 180
    var xPos = Math.cos(percentage) * radius + offsetX;
    var yPos = Math.sin(percentage) * radius + offsetY;
    // do stuff with values
}

You don’t have to fully understand trigonometry (although it does help if you do). Plug in some values that change the parameters and you can easily modify code. However, once I started to create arcs, this proved to cause a whole mess of issues, the biggest when determining when to rotate clockwise vs counterclockwise. From my understanding, the sin/cos functions are smart enough to get a range from 0-360°. Once you go pass that, the values reset back to 0°. You can keep track of it using states but the values keep getting clobbered. It’s like the the tall man, small blanket problem. Covering your head makes your feet cold and covering your feet makes your head cold. I wasn’t smart enough to figure this out so I sat on it for a few months, then a few years, I’ve tried tackling this a few times but I’ve always ended up using a workaround instead.

Cut away to a month back. I was reading a post about drawing arcs and circles without using sine and cosine in the main loop. I believe the purpose was to skip trigonometry which can be processing intensive.

var da = (endPositionInRads - startPositionInRads); // distance angle
var ss = 45; // segmenet spacing
var rs = (Math.abs(da) / (Math.PI * 2) * ss); // real segments
var tm = Math.tan(da / real_segments); // tangent multiplier
var rm = 1 - Math.cos(da / real_segments); //radial multiplier

// first position uses sinusoidal
var xPos = Math.cos(startPositionInRads) * radius + offsetX;
var yPos = Math.sin(startPositionInRads) * radius + offsetY;
var tx; // transitionX
var ty; // transitionY
for (i = 0; i < rs; i++) {
    tx = -(yPos - offsetY);
    ty = xPos - offsetX;
    xPos += tx * tm;
    yPos += ty * tm;
    xPos += (offsetX - xPos) * rm;
    yPos += (offsetY - yPos) * rm;
    // do stuff with values
}

(The code is a little larger but it works)

I didn’t think much of it at first. I’ve actually used it before just for the sake of using it. Going back to the arc problem again, I realized that a simple way to not get the modulus 360° problem was to not use sine and cosines at all. Sure enough it worked and the results of that can be seen below.


(left image uses trig, right image just uses math)

I’ve been completely reliant on using sines and cosines for the pass decade that it actually prevented me from doing what I wanted to do. I think I’m going to revisit a few old experiments that I’ve never published due to code complexity and take a look at it from a different perspective. All the iterations can be found below.

version 01
version 02
version 03
version 04
version 05
version 06
version 07
version 08
version 09
version 10

nudibranch experiment


Audio by Daft Punk (“Recognizer” from Tron Legacy [SoundTrack]).


Nudibranch is an experiment inspired by the motions of a spanish dancer, a type of sea slug commonly found on coral reefs. They oscillate their fins symmetrically as well as rhythmically to travel through open water. This experiment is an abstraction of that motion.

In my previous experiment, I was writing code natively in Processing IDE. I’ve had some luck working with the FDT4 IDE for work related projects so I figured it was about time to plunge into the Eclipse framework. It was definitely a challenge getting everything setup but once it was, working in Eclipse was a breeze.


The first step was to create a simple following motion in 3d space using code I found while browsing through the processing forums. I implemented it to a simple chain script that I converted from 2d to 3d. While the mouse follow was technically working, the range I was receiving leaned towards the extreme causing weird jumps in animation. I instead opted for a simple motion that followed a osculating track.


In the balloon experiment, I was exposing much of the math calculations which overcomplicated the code. In this experiment, I used the toxiclibs libraries which handled much of the complex mathematics and saved me quite a bit of time and headaches along the way. The purple dots represent a scaffold for me to visualize the flapping motion. To quickly go over the construction, I’m building the nudibranch in terms of segments, like slices of a banana. Each slice points towards as well as follows it’s parent. I first parse and store all the points of all the segments and then draw those points later.


The next step was to create a simple oscillating line that protrudes from the center of each segment aka the fins. Using sinusoidal motion that’s offset by the segment id, I’m able to get the motion and cause a ripple effect that travels from the head to the tail of the nudibranch.


I added another scale and offset to each segment to make the flapping of the fins less rigid. I also started playing with the visuals creating line segments for better viewing.


I added the mesh fills soon after and proceeded to fine tune the parameters I created to mimic the look and feel of a nudibranch. I had quite a bit of fun modifying the parameters via the controlP5 sliders so I exposed it to the viewer and added quite a bit more which included motions related to audio, as well as the ability to randomize and animate across all parameters.

This was the basis for the nudibranch video which randomly changed form and shape over time. It may not look like a nudibranch any more but the essence is still there. Feel free to download the latest mac and pc desktop apps to view the ful experience.

HTML5’s new Logo

I took it upon myself to make the new html5 branding more interesting.

yeah it’s built in flash 🙂

View it here or if you would like to convert it to a proper html5 logo, you can download the source.

Edit : Yes it’s on purpose, yes it’s ironic and yes I’m being a dick about it.

balloon experiment

Written images is an upcoming book comprised of artists creating a series of code generated images. The content of each printed book is a random selection of those images, making each book unique. One of the available ways to submit work was to use processing as a medium. I’ve had some minor success manipulating coordinates in 3d space with my previous flash projects so I assumed it would be easy to do it again in processing.

My idea was to create a randomly generated balloon animals, looking specifically at how the joints are connected from segment to segment. Each segment  has a specific length and a specific rotation which would be nested into the next segment until the dog shape emerges. It seemed simple and straightforward enough until I started rotating each balloon segment in 3d space. I assumed all rotations would be easy to create using only the base x,y,z axis rotations but boy was I wrong. Once I started nesting the segments it became harder and harder to predict where the rotations would end up. There was no easy way to solve this and the deadline was fast approaching so I had to shelf the project until I solve the rotation issue.

Without getting into the details, because frankly I still don’t completely understand them. There are a few ways to do rotations in 3d space. There’s Euler angles, matrix transformations, axis angle rotations and quaternion rotation. After testing every option, quaternion rotation seemed to be the solution. I’m slowly understanding quaternions which I learned from this book and this wikipedia article.

The first thing I did was to randomly distribute a set of points that had no dependency with it’s previous segment. The white lines below represents the segment length and random position.

The violet and green lines represents the start and end 3d tangents of each segment respectively. Getting a 3d tangent aka a cross product is a little tricky only because it requires 2 vectors. I only had 1 so I arbitrarily created another one ( you can barely see it as a small white line extending from each segment corner). After normalizing the cross product and multiplying it by a radius I was able to get the violet and green dots that cap the lines.

Using the quaternion solution above, I was able to get a rotation around the off axis created by the segment line. I distributed the angles in relation to an arbitrary total number of points used to generate a circle and then connecting the front and back points to create a cylinder. I now have enough data to connect the lines using a bezier segment. Each line of a segment is comprised of 2 bezier curves, one from the front and 1 from the back. adjusting where the control points of the bezier are position govern the ‘shape’ of the segment.

This is starting to look good but there was an issue with the segment edges. When I linked a segment, the cross products theoretically should be a mashup of the front and back of two segments. Currently there is no mashing going on so i needed a simple way of averaging of 2 vectors.

My first instinct was to use a SLERP which I will not describe because frankly i couldn’t get it to work. Instead I copped out and used a basic LERP which kind of works well enough to be passable. I think if I started to get serious about creating a balloon shape I’ll probably have to switch over. For now it works well enough. You can see the resulting LERP as the red dotted lines that orbits the joint between two segments.

The next step is to systematize all the arbitrary controls into a unified control panel. ControlP5 made it really easy to add controls to the shape without having to create a radically new interface. PeasyCam made it easy to rotate the balloon in 3d space. I’ll still need an easy way to modify each point manually but currently i’m happy with just using a random spread.

I added a few different views to make it more interesting and a randomizer button that repositions the segments over time. There’s still quite a few more things i’d like to add like audio input and video export but I’m happy with the result so far. Maybe if written images 2 rolls around I can resubmit this to the project.

In the meantime please enjoy the progression of work here.
(Source and local version are also available).

new redesign

I’ve redesigned my site yet again. This iteration focuses more heavily on a blog format which I hear are all the rave these days. Although I’ve had some practical experience editing javascript, html and css, I’ve always felt a little uneasy when writing from scratch. So I’ve decided to use Khoi’s and Allan’s Basic Math’s template and slowly rework the code to something that fits my tastes. I’ve also switched to wordpress because it seems to offer a simple way of encapsulating everything I need in a blog without having to use an external blog service.