Archives for February 2024

Code: https://editor.p5js.org/Sky-Falling/sketches/3TKCIzvzI

           https://editor.p5js.org/Sky-Falling/sketches/94ILyEatJ

Image: 

Description1: For the images stemming from the first code, they are composed of ‘lines’ twisted and rotated by scale and rotate function. The lines here do not refer to the ordinary straight line but the one moderated by myself, thanks to the noise function which give the effect of ocillation on the line. User may control 2 parameters to change the shape: density and shape. Note that the same shape does not necessary gives you the same shape if you use different densities. Density is used to control the interval between 2 lines(which are wildly rotated but the interval between them is still distinguishable). And you can try shapes and find out lots of types of shapes like spiral, triangle and rectangle. 

 

Description2: For the image apparently different from the others, it’s called worm tree. Each branch has the possibility of continue growing, dying and dividing. The possibility of these 3 events are continuously changing, as well as other factors like the thickness of branches and growth speed,etc. The more branches there are, the nutrition has to be divided into more parts so that the possibility of dying for each branch will significantly increase. What’s more, to avoid growing eternally, I put 2 constraints on the tree: time and maximum value of branches. To add some randomness, the tree will oscillate in x_axis direction at the amplitude proportionable to the branch’s thickness. 

 

Explanation of Code 1: (the worm tree is motion rather than background so it will be explained in Project A doc)

push();
translate(400,400);
brightness *= 1.02;
rotate(radians(shape*(10-density)*a));
Scale = y/400;
scale(Scale);
line_modified(-4000,y,4000,10);

y += 10-density;
a++;

pop();

 

This part basically repeatedly do the following process: draw a line at the given interval (10-density), rotate some angle, and then draw another line, then rotate the angle again. So each line will be rotated for different times based on their sequence and ultimately create a spiral shape. 

 

function line_modified(x1,y1,x2,scale)
{ strokeWeight(1.5);
stroke(0,brightness);
let t = 1;
let x = x1;
while(x<x2)
{
line(x,y1+scale*noise(x*oci,y1),x+t,y1+scale*noise((x+t)*oci,y1));
x = x+t;

}
}

To make the texture more like drawn by pencil, I moderate the line a little bit by adding some oscillation. You can control the smoothness of the line by changing the parameter “oci”.

Reflection:

1.  Computer is definitely better at performing rotation and scaling, which are pretty hard for human drawing as it requires large amount of calculation. But humans can naturally add some randomness to straight line and circle, resulting in a more natural texture. And it’s very hard to convert what’s in your mind onto the canvas for computer drawing, while it’s relatively easy for drawing by hand. Despite their distinctions in advantages, they both can work quite well on the job of making paintings. 
2.  I change the parameters ‘shape’, ‘density’ and ‘oci’ in the process, which control how much radius the pattern will rotate each time, how dense the pattern looks like and smoothness respectively. During the process, I noticed that when ‘shape’ is low, this pattern is spiral, while it’s getting high, you can clearly see many triangles or rectangles in this pattern. And from the aesthetic perspective, high density is recommended to match with smaller ‘oci’ and vice versa. 
3. I think the beauty of generative pattern lies in the mixture of order and randomness. When viewing the pattern as a whole, the pattern clearly follows certain rule and has a shape. For example, in my case, the pattern can be called a spiral as a whole. But when concentrating in a specific spot, you can see more details which has different property with spiral, like the oscillation on each line. Another important factor is color. An impressive pattern must use various colors, which should not be randomly selected but picked up in line with the overall theme of this pattern. Like you can’t use fluorescent green to fill the pattern of Saturn, but instead you may use it to fill a strange and hostile planet. 

ONE. Worms

Description: This piece is basically lots of worms of decreasing sizes laying next to each others. The inspiration of this work come from one of the previous lecture where Professor showed us how to use simple shapes like circle to create some complex visual effects. To add more radomness, I use the noise function to enable the worm to fluctuate up and down, and the fluctuation becomes even more severe on the right hand side, which is in line with the fact that worm also raise their head a little bit in nature condition. What’s more, variation of the worms’ shape and the whole process of the development adds even more fun. 

Code:https://editor.p5js.org/Sky-Falling/sketches/Mh1hFPc3x

Documentation:

 

Explanation of code:

fluc = map(x, 100, 800, fluc_low, fluc_high);
ratio = map(x, 100, 800, 2, 1);
speed_x_revision = random(speed_x - fluc, speed_x + fluc);
speed_y_revision = random(speed_y - fluc, speed_y + fluc);
x = x + speed_x_revision;
y = y + speed_y_revision;

This part is to add some randomness to the original speed. To achieve the head-up(or down) effect, I use the map function to associate the amplitude of fluctuation with the x-coordinate. 

if (x >= width - r || x < r) {
y = y_begin + r;
y_begin = y;
x = 100;
speed_x = 2;
fill(random(255),random(255),random(255));
}

This part is to restart from x = 0 when one worm is done. It’s worth notice that color is randomnized every time and the y interval is associated with the radius of the worm to avoid the space being overcrowded.

 

TWO. Fireworks

Code:https://editor.p5js.org/Sky-Falling/sketches/bh7J8b0bw

Description: This is a math-intensive work as it combines lots of “imperfect” circles to simulate the effect of fireworks. On these layers close to the center, they normally just look like electron clouds composed of several colors. On the farther layers, the ‘dots’ on a normal circle are replaced by lines pointing away from the center. This is not a static image but reveals the whole process of the explosition of fireworks. You can feel the energy at the beginning is very strong so the origin spreads outward very quickly but the speed of spreading decreases immediately, and finally converges to be static. Although this is not a creature, at least in human’s understanding, I still find it impressive and present it here.

Video documentation:

 

Explanation of code: 

for(let i = 0; i<number; i++)
{ array[i] = [];
array[i][0] = (i+1)/4;
array[i][1] = color(random(255), random(255), random(255));
array[i][2] = random(0.05,10);
array[i][3] = array[i][2]*random(0.01,0.05);
}

This part is to randomly initialize the information of each layer. How many layer we will have is determined by the variable “number”. For the i-th layer, it has 4 factors that determine its final apperance: distance from the origin, color, density and length.

 

ranlen = noise(cita, index)*r1*r2;
r_revision = ranlen+r1;
r_revision_end = r_revision+ranlen*length;

stroke(color);
strokeWeight(1);
line(r_revision*sin(radians(cita))+400,r_revision*cos(radians(cita))+400,r_revision_end*sin(radians(cita))+400,r_revision_end*cos(radians(cita))+400);
cita = cita+dense;

 

This part draws each layer. Ranlen is the key factor that contributes to its randomness. r_revision and r_revision_end determine the length of the line and how far it’s to the center. The cita tells the direction of this line, which ultimately portraits a electron cloud like shape. 

 

step = step + 1;
index = 0;
speed = speed * 0.96;
r1 = r1+ speed;

This part control the iteration of the whole function. index means the layer the program is drawing. After drawing all layers for a specific moment, index will be reset to be 0 and wait for the next moment. As I said above, the speed of spreading keeps decreasing and the firework finally turns static. 

 

THREE. Sea snail 

 

Code:https://editor.p5js.org/Sky-Falling/sketches/MP_UlbmIQ

 

Image: 

 

Description: This project show a collection of patterns generated by similar rules. You can definitely call it “placed in order” in the sense that you can clearly tell which row and which column a specific pattern is at. But the location of patterns become wilder and more random as the index of row increases. What’s more, if you pay attention to the pattern itself, you may find the pattern is composed of many simple circles of increasing radius. But for patterns on the left or below side, the centers of circles start to ocillate and become different from each other, resulting into a less perfect pattern. The intention of this motion is to show how order can collapse with time and the beauty underlying such process.

 

Explanation of code:

for(let a = 1;a < 8; a++)
{ interval = map(a+b,2,20,6,10);
distortion_y = random(-map(b,1,8,0,25),map(b,1,8,0,25));
distortion_x = random(-map(b,1,8,0,15),map(b,1,8,0,15));
stroke(random(255),random(255),random(255));
component(100*a,b*100,interval_y*50);
}

 

The component function here means drawing a pattern on the approximate center determined by a and b with the radius determined by the row. The variable interval controls the rough interval between 2 consecutive circles.

 

 

for(let radius = r; radius>0; radius-=interval)
{
adj_y = map(center_y,0,800,0,70);
adj_x = map(center_x,0,800,0,70);

center_x_rev = center_x + radius*adj_x*noise(center_x,center_y,radius)/100+distortion_x;
center_y_rev = center_y + radius*adj_y*noise(center_x,center_y,radius)/100+ distortion_y;
interval = interval*0.9;

circle(center_x_rev,center_y_rev,radius);
}

 

From this part, you can see the distortion of the center of circle is up to 2 factors. distortion_x(y) is the inherent distortion of the pattern which is relevant to its index and remain the same for all circles within this pattern. In contrast,the other factor adj_x(y) is not the same among circles of this pattern, and its rough amplitude is also determined by the position of this pattern. 

 

FOUR. Project proposal

Both motion 1 and motion 2 will be employed in my midterm project. The story happens on an alien world which is quite hosile as tons of meteorolite keep impacting on this planet. Fortunately, this planet has a heavy atmosphere which prevents the meteorolite from crashing the land. When the meteorolite rubs with the atmosphere and falls apart, an explosion just like firework occurs. Even on such tough environment, there’s still one kind of worm-like creature survives. From a distance, their shape is similar to trees, which grow from only one main stem to be multi-braches. However,they are not plants but worms, whose strong vitality and adaptness are in line with the tone of this story. As the atmosphere of this planet is so thick that no light can get through its blockage, the only source of energy passed on this planet is the extremely bright light and dust produced by meteorolite’s rubbing with atmosphere. Such slight but vital form of energy support all the life on this brutal world. To make this project more immersive, users are able to interact with this interactive painting and control the explosion of meteorolite and the growth of this creature. What’s more, it will have 3-D effect by streching the creatures according to its y-coordinate. If it’s close to the audience, then it will be streched to a larger scale and vice versa. The texture of the ground where these things live on will also indicate 3-D effect.

 

Slide: https://docs.google.com/presentation/d/1ih391F2PTapU_3tXi9ejjbqH_uTVb_IlqgHeAa70kkw/edit?usp=sharing

Jared Tarbell began as a math and CS student and was already sophisticated at programming even before college. During his study, he realized how the complexity of the world could be divided into a set of simple rules, thus, he wanted to simulate some mysterious phenomena by computer, which shared a tremendous similarity in the sense that you only need to set a few simple rules to get a quite complex result. For his artworks, one can easily recognize that most of them are formed by multiple simple patterns interacting with each other. For example, in his work Substrate,  the only shape you can find is straight lines growing on each other. These patterns only have slight differences, which clearly give little aesthetic value on their own but when combined together and add some randomness, they can form a system which is quite stunning. In his interview he also mentioned that he prefers creating simple rules, and the real time-consuming part is how to adjust parameters to better display the system. So the key feature of his work may be “simple shape, simple rules, complex system”. One more feature is his preference for dark colors, especially earthy yellow, and avoidance of using colors of high contrast, which give the audience a feeling of calmness and peace. On his development of artistic features, Edward Tufte inspired him a lot and made him realize the power of art and finally become an artist himself.

(Substrate by Jared Tarbell)

 

In CC Lab, the concept of generative art is creating something artistic by just setting a few simple rules, adding some randomness and letting the computer do the remaining job. Tarbell’s works are in line with this concept as they start from very simple shapes and rules and evolve to be complex systems. 

His work inspires me to experiment with a set of simple rules and shapes at first, and gradually change parameters to see if some interesting patterns occur in my future project. To sum up, Tarbell began his career as a STEM student but later found his interest in generative art. I think the CS education he received played a vital role in inspiring him to develop his own art style, like creating a complex system by simple shapes and rules. And one thing I like about his projects is his delicate use of colors. They are dark and natural, creating a sense of flux with the pattern. You can feel these patterns are just like fluid or other things that exist in the real world and are simply quite comfortable to look at. From his artwork, I learned that compared with showing the complete system immediately, it’s more impressive to show the whole process of how the complex system evolves from simple shapes and randomness.