CCLab Mini Project 3: Generative Motion

#1 Rainbow Rain

Introduction

Raindrops fall from the rainbow change their color with the sky.

Let’s see the demos.

demo #1

demo #2

demo #3

 

Inspiration

Inspired by the cartoon “My Little Pony” I saw recently, I got the idea of “Rainbow Rain”. The raindrops fall from the rainbow and become colorful gradually which symbolized the upcoming good fortune and a better life.

Hopefully, this will bring happiness and courage to people who are in depression.

 

Analysis

In the project, the colors of the raindrops are random. To achieve the effect, I use random() to generate a value between (-0. 1, 0. 1) and add them to the original value. After that, I use cos() & map() to strict the value between (30, 230).

Here’s the code.

 

//speed of changing colors
aR += random(-0.1,0.1);
aG += random(-0.1,0.1);
aB += random(-0.1,0.1);

//map the value to(30,230)
R = map(cos(aR), -1, 1, 30, 230);
G = map(cos(aG), -1, 1, 30, 230);
B = map(cos(aB), -1, 1, 30, 230);

The positions of the raindrops are also random. I use noise() here. Then I utilize the theory of persistence of vision, set the background color as 15% transparent white. Although there’s only one raindrop, it seems like many of them.

The speed of the raindrop is also changing with the position. It’s accelerating gradually.

For the detailed code, you can click here or the link below.

 

#2 Rules

Introduction

Squares.

demo #1

demo #2

demo #3

Inspiration

Inspired by the “Schotter (Gravel) – Georg Nees ,1968″. 

The different squares sometimes cross the outer square, sometimes fit perfectly with the outer square. Symbolize the fact that we need to obey the “Rules”, but we need to break the “Rules” sometimes.

Also, the smaller the square, the closer it is to the center. This shows the weak awareness of the rules of some adults in society while the youth can usually obey the rules in the public space.

 

Analysis

In the project, I use random() to decide the distance of deviation. Also, the index is according to the length of the square.

For detailed codes, you can click here or the link below.

 

#3 Roses

Introduction

A Blossoming Rose.

demo #1

demo #2

demo #3

Inspiration

Similar codes with Rules

Every time the Rose would be different. However, every time the beauty of the rose is unique. This expresses the idea about no matter who you are, you can find your unique shining point.

You can press the mouse button to create the rose that only belongs to you.

 

Analysis

In the project, I use random() to decide the distance of deviation. The index is according to the diameter of the circle.

In addition, the color will become darker when the diameter becomes smaller.

For detailed codes, you can click here or the link below.

 

Reflections

Motion can really express many things. In addition, generative art is the best example to remind us to focus on the present. The difference is for every different artist who gets involved in this work.

Maybe the code is quite simple, but the effect it brings us is spectacular, impressive, and meaningful.

——————————————-More Info——————————————

Links

Rainbow Rain: https://editor.p5js.org/AndyHyprillion/sketches/4Pfx3tVXD

Rules: https://editor.p5js.org/AndyHyprillion/sketches/V3Mnde7g6

Rose: https://editor.p5js.org/AndyHyprillion/sketches/OXTSagIwY