February 2009 Archives

(Processing) Tangled strings

| No Comments | No TrackBacks
Here are somes spin-offs from code-driven paint brush project.
The outlines in the photos were traced with lines that looked like tangled strings, which resulted in rather abstract pictures.



(Processing) Animated paintings

| No Comments | No TrackBacks
I tried applying an automatic paintbrush to movies, having Processing capture each frame and reproduce it with touches like in an oil painting.
I especially liked the short piece made from a movie of fireworks. The combination of sound and color is kind of nostalgic and reminds me of the best days of the summer.

Fireworks from kynd on Vimeo.

Three Spanish dogs from kynd on Vimeo.

(Processing) code generated Bob Ross

| No Comments | No TrackBacks
I suddenly remembered Bob Ross when playing with my semi-auto painter made with processing, which has been much improved these two days. Well, I used to watch Bob's video with my friend a lot when I was a art student. We never wanted to imitate his method but I recall it was quite fun wacthing him finish his canvas in every 30 min episodes.



landscape02 (Code generated Bob Ross)

landscape01 (Code generated Impressionist)

(Processing) code generated Gerhart Richter

| No Comments | No TrackBacks
code generated Richter


(Processing) Code generated paint brush 2

| No Comments | No TrackBacks
I'm still playing with paint brushes made with processing. codeBrush

A sketch from a project to buid a 3D rendering package just for learning porpose.
The camera(or point of view) can be rotated with the arrow, q and w keys.

sample movie and scripts

(Web-service) NY times released article search API

| No Comments | No TrackBacks
'Finally! We are pleased to announce the initial release of the New York Times Article Search API. ' Great!

(Processing) Code generated paint brush

| No Comments | No TrackBacks
Ever since I saw Erik Natzke's inspiring works, I've been thinking of simulating paint brushes by myself with processing.
These are my trial runs. The model in the portrait is from my photo I took in Buenos Aires, a guy who was playing Bandneon in a old cafe near the center of the city. The others are also based on photos though they look more abstract. Actually, it was quite easy to start doing. I wrote the first working code in about thirty minutes but improving it will be (as always) a long long series of trial and error. I still need to take more time to brush up the technique.

Try dragging the points.

The dot product is a powerful vector operation and one of its most handy usage is to compute an angle between two lines.

The dot product in 2D

A·B = a1 * b1 + a2 * b2 = ||A|| * ||B|| * cos(θ) 
  • A and B are 2D vectors and A = [a1 a2], B = [b1, b2]
  • ||A|| represents is the the magnitude of vector A
  • θ is the angle between A and B

In the sample movie, the line AB represents the vector A and CD represents the vector B

sample movie and scripts

Try dragging the points A and B. The line perpendicularly intersects(CD) is depicted using normal vector of AB

The normal vector in 2d is obtained by exchanging x and y-components and multiplying -1 to the y-component.

sample movie and scripts

This sample demonstrates two ways of ratating coordinate around a center point

The first example(P1 and C1) is straight forward while the second(P2 and C2) is more versatile and can be more efficent when treating more than one point in the same angle, in that case sine and cosine need to be computed only once before applied to each coordinate calculation of the points.

// P1 and C1 
var angle:Number = Math.atan2(P1.y - C1.y, P1.x - C1.x);
var radius:Number = Point.distance(C1, P1);
P1.x = C1.x + Math.cos(angle + vr) * radius;
P1.y = C2.y + Math.sin(angle + vr) * radius;

// P2 and C2
var distX:Number = P2.x - C2.x;
var distY:Number = P2.y - C2.y;
P2.x = Math.cos(vr) * distX - Math.sin(vr) * distY + C2.x;
P2.y = Math.cos(vr) * distY + Math.sin(vr) * distX + C2.y;

In action script 3, the Matrix class's rotate method works in the same way as the second example.

sample movie and scripts

The angles of a triangle(OAB) can be computed if the length of three sides are known using transformed version of cosine formula. Note that the angle between line L and OB is also needed to obtain actual angles of the segments.

Low of cosines

OAB = 
Math.acos((OA * OA + AB * AB - BO * BO) /
(2 * OA * AB));

Math.acos((OA * OA + BO * BO - AB * AB) /
(2 * OA * BO));

Math.acos((AB * AB + BO * BO - OA * OA) /
(2 * BO* AB));

See 'Law of cosines - Wikipedia' for more about cosine formura.

sample movie and scripts

This sample demonstrates how trigonometry and pythagorean theorem work, which are essencial to deal with distances and angles in 2D or 3D space. Try dragging the point P.

Pythagorean theorem

OP = Math.sqrt(handle.x * handle.x + handle.y * handle.y);


sin(AOC) = AC;
cos(AOC) = OC;
sin(AOC) = AC / OC;

note that the direction of the Y-coordinate in Flash is opposite of Cartesian coordinates.

See 'Trigonometry - Wikipedia' for more about trigonometry and 'Pythagorean theorem - Wikipedia' for Pythagorean theorem.

sample movie and scripts

The law of cosines is a statement about a general triangle which relates the lengths of its sides to the cosine of one of its angles.

The formula can be used to compute the angles of a triangle if the three sides are known. Try dragging points A, B and C.

Law of cosines

Math.pow(CA, 2) = Math.pow(AB, 2) + Math.pow(BC, 2) - 2 * AB * BC * cos(ABC);

ABC = Math.acos((AB * AB + BC * BC - CA * CA) / (2 * AB * BC)); 
BCA = Math.acos((BC * BC + CA * CA - AB * AB) / (2 * BC * CA));
CAB = Math.acos((AB * AB + CA * CA - BC * BC) / (2 * AB * CA));

See 'Law of cosines - Wikipedia' for more about law of cosines.

sample movie and scripts

This is a simple model to demonstrate how to simulate gravity.

In this example, gravity is not mutual but the circle A is fixed in a place and the circle B flies around it under the effect of gravity. The product of the first three terms(G * m1 * m2) in the Newton's law is simplified and set to 10, which is enough for rough simulation like this.
Try dragging A to change the orbit of B.

Newton's law of universal gravitation (in AS3)

F = G * m1 * m2 / Math.pow(r, 2);
  • F is the magnitude of the gravitational force between the two point masses
  • G is the gravitational constant (6.674 × 10−11 N m2 kg-2)
  • m1 is the mass of the first point mass
  • m2 is the mass of the second point mass
  • r is the distance between the two point masses

See 'Newton's law of universal gravitation - Wikipedia' for more about law of universal gravitation.

sample movie and scripts

(Flash) Math and (Quasi) Physics in AS3

| No Comments | No TrackBacks
Some basics of math and physics are essential if you want to create a motion that looks natural.
Even when using  papervison or Box2D, that we can use without knowing what they actually do,, understanding the logics behind can be helpful.

'Math and (Quasi) Physics in Action Script 3'
is a series of my sketches about math and physics aimed to clarify my knowledge and techniques I've been using for a long time in a sort of blind way.

There are only four articles so far but I mean to add pages as my study proceeds.