Embedded Files
Project Link
Project Link
https://editor.p5js.org/kw3508/sketches/hPXkiBKSf
https://editor.p5js.org/kw3508/sketches/hfg2M05NN
https://editor.p5js.org/kw3508/sketches/euXkvR0MV
https://editor.p5js.org/kw3508/sketches/AZ4HsdPm7
https://editor.p5js.org/kw3508/sketches/bUtnMtKet
https://editor.p5js.org/kw3508/sketches/sbIm2_ntt
Introduction
Introduction
For Project A, my creature will move around and interact within its habitat. In my story, my creature is Smoke born in magma, thus the environment will share some similarities with magma, featuring black and red as theme colors.
In this mini-project, I tried to explore the digital landscape for my creature, using repetition (loops) and transformation functions. For this step, I mainly focused on static patterns rather than motions by exploring how scale, (a)symmetry, rotation, displacement and changes in color can contribute to an intriguing pattern.
Demo/Visual Documentation
Demo/Visual Documentation
Coding
Coding
The rotation
The rotation
Translate(), rotate(), push() and pop() always go together. In these patterns, this has been practiced multiple times.
push();
translate(i,j);
//scale(f)
rotate(angle);
rectMode(CENTER);
strokeWeight(d);
stroke(r,0,0);
// noStroke();
// fill(r,0,0);
line(0,0,s*f,s*f);
pop();
Gradient Color
Gradient Color
With map function, the color of the elements on the canvas can change according to their position. In order to have the center highlighted while the two sides fade away, I mapped the "r" with different conditions.
I forgot to "let r" as a global variable and it didn't work. Jiapei helped me out:)
if (i < width / 2) {
r = map(i, 0, width / 2, 0, 250);
} else {
r = map(i, width / 2,width, 250, 0);
}
...
stroke(r,0,0);
Lines
Lines
Line seems like a very simple shape but during this exercise, I found that the strokeWeight, opacity and rotation of lines can really make very complicated shapes.
strokeWeight(d*0.1);
stroke(r,0,0);
Save Images
Save Images
Might be "cheating" but when I was playing with dynamic background, I felt it was a good idea to save a frame out of the moving image. However, each frame is saved as a png file in that case which almost killed my laptop. Thus, adding a condition in front of this action helps same one frame that I want.
if(mouseIsPressed == true){
saveCanvas('background', 'png');
}
Findings & Lesson Learned
Findings & Lesson Learned
Lesson Learned:
So far I'm not able to draw very realistic magma, however, as Marcela told me, that's not what p5js is good at. What I can learn from this exercise is how motion and limitless changes can be embedded in the background and convey not the details but the essence of magma.
To be more specific, I learned how the most basic shapes together, through duplication, rotation, and other techniques can create such complicated images.
I experimented with many functions but almost one-third of the result was surprising to me and I just kept adjusting the surprise into something easy to my eyes. I initially felt anxious that not everything was under my control. However, I guess that can be interpreted as the freedom I wanted the code to have as Sol LeWitt did with his instructions.
Some future improvements:
Though the rotation and size can be differentiated by their position utilizing map function, they are still duplicating the same pattern in a way. I hope in the future I can make some things that are independent to some extent and develop their own track, though following universal instructions.
Reflection Prompts
Reflection Prompts
How is drawing by hand from observation different from programming the computer to draw for you? Can you think of some commonalities as well?
Difference: Drawing by hand requires me to picture everything in detail and "print" them on paper with my hand while computer drawing can automatically develop one shape into a whole filled picture with my instructions. But so far, it's easier to make a single change to one item when drawing by hand than drawing with a computer since the universal instructions control the whole screen.
Commonalities: I think both drawing by hand and drawing with a computer require creativity from me. Even though computers can generate images indirectly with my instructions, I need to initiate all the designs and ideas. Also, the necessary process of drawing including iteration and composition are involved in both of the two different drawings.
What properties have you manipulated in the repetition? Describe your observations and visual outcomes during the process.
I'm not sure if I'm getting this question right but I think during the repetition, many elements can be altered in unexpected ways. For example, just different opacity, with overlapping and repetition, many majestic patterns can occur. More relevant to what we learned this week, the rotation and size directly cause very different outcomes on the image.
What I have observed during the process is the existence of negative space. I learned this concept in my choreography class, which also applies to this project. A huge part of the new patterns created by different opacity, rotation and size originated from the "negative space" between shapes. Not only do shapes themselves matter, but the background also contributes to the patterns.
What makes a good generative pattern?
I think a good generative pattern should follow a well-structured manner and keep developing into new patterns. Not sure if it's too advanced but during the process of development, I hope the pattern can follow a certain rhythm. During the recitation, the videos played on the screen were so intriguing that they all moved following the music, which really satisfied my expectation of good visualization with simple patterns. And I do believe there are more hidden rhythms aside from music and sound so I think a good generative pattern should have its own pace and rhythm which can be at least satisfying and easy to the eyes.
Page updated
Report abuse