Blossom _Nature of code midterm

Blossom

Algorism:

FullSizeRender 4

Flowfield:

Background pixels update its location according to sin formula, the desired amount change of pixel location has been passed to flowfields as a vector. Which will be passed to vehicles as their desired velocity.

In the flowfields, each cell of the grid lives an arrow pointing in the direction according to the update of background pixels. The scale of the point has been maped between 0-5. So the steer force of the vehicles, which is calculated according to the desired velocity, could change its magnitude and direction according to a sin formula.

if you press “UP” key, you can see the change of the flowfields beneath the particles. The motion of the flowfields is updated over every frame.

ABB02DC6-571A-4F32-9120-227FE0CC15EC

Particles:

Particles of the vehicles

Prepare for this work:

The most challenging part of this work is to design the mechanism to simulate flowfields. need a way for a vehicle to look up its desired vector in the flow field, so what should I do to generate the desired vectors? I want to try to build some relationship between the background pixels and the flowfields vectors. Before this last version, I tried to take advantage of brightness, color of the locomotive pixels. I tried to calculate the average direction and amount vector on each [column][row], which does not satisfy me because the result is ambiguous, I can’t tell the law of the movement according to the effect.

B10FB811-F40A-48A0-9131-FC29BC514894

Finally, I tried to map the locomotion of the pixel displacement in the background with the desired velocity of the flow fields.

 

I tried out ways to manipulate the background pixels:

I also tried to distort the image by manipulating the color display.The Original photo is a masterpiece I searched on Google Image, which looks like this.

4}GT@F4H(J[RZH{}PKY7QJM

 

cat Firstly I load pixels and got the color from the image.For my first version, I took advantage of mouse location to control the alpha transparency of the pixels. Pixels will be lit up over distance to the mouse position.

 

A4440916-D668-4C2A-9AF3-72DD7DD4BB5C

Then I am thinking about to explore more on it. I set a threshold to differentiate layers of the image, the bright pixels who is above the threshold will move forward quickly and dark pixels will move forward slowly. As a result, the layers are differentiated.

 

How about delete the dark point and make it more like a post-impressionism color composition?

Then I am thinking about making it more interesting, I step back and reserved the original color, and let the light color transport according to the sin wave. I love the screenshot when you stop the video below at any point.

First of all, I choose a photo shot by Melanie Hoff, the original photo looks like this. The color of it is very fantastic, I am thinking of reuse these color to do a mathematical art.I get the pixels from the image and display them at the new location which is calculated by adding some amount to the previous location according to Sin formula.

6

Below is the effect screenshot when t equals to 25;

JCX2%`PDYVG$X22(]SK3R(Q

I changed a different photo and below is the effect screenshot when t equals to 15;

4143D2C3-62B3-44BA-95F1-F0BAB8544778

 

I am trying to build a texture that the pixels are mixed with each other, and below is the one that I update the pixel to near own location, which has a location shift with the neighborhood according to the sin wave.

B4C89DEB-1EF5-4777-ADD1-872326593501

Back to the first version of the math graphic, I changed a different photo and below is the effect screenshot when t equals to 40;

If ambitious, things will get more interesting to me, and the below result is the effect I used in this Blossom midterm project.

In this work, I distorted the pixels grabbed from the image.  I take advantage of the slope change rate of Sin formula and applied it to the whole pixels of the image. I will call this a remix of the artworks. I reserved the selected graphic components of the image according to the amplitude and frequency.

<img class=”aligncenter wp-image-651 ” src=”http://www.muqing.me/wp-content/uploads/2016/03/RNMKY5ZVW3R8GSDSC5ON.jpg” alt=”RNMKY5Z]VW{3R8GSDSC5&#96;ON” width=”620″ height=”694″ />

 

 

 

 

 

 

 

Leave a Reply