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
Leave a Reply