Experimenting With Motions
Sketch #1:
Description
I integrated two types of motions in this sketch: up and down sine wave motion, and left and right motion of lines. Besides the lines in the background, the brightness of the sketch relies on the position of the mouse. As you gently move the mouse further to the right, the background’s color slowly transfers from black to lighter shades until you reach the end side of the sketch, where the background completely transform to white color. The generative part of this sketch is the flickering of random colors of the moving circle, in which it portrays the behavior and the glow of fireflies in the dark. This randomness of color allows the sketch to be different and unique every time it is regenerated. Combining the lines, the controllable background, and the lines, it creates an illustration of a circular object/creature floating constantly up and down in the wind(the lines) within a changing environment.
Coding Process
The most time-consuming part of this sketch is the motion of the lines. It was hard for me to make the lines to move in different directions and still mange to form a harmonic pattern. Fortunately, by minimizing the variables and using the same values in multiple lines creates the effect that I desired.
Code
let y;
let m;
let x=0;
let c = 0;
let d= 200;
let e=0;
let se= 5;
let sc= 1;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(map(mouseX, 0, width,0, 255),90);
//lines
e= e+se // middle gold line
c=c+sc;
strokeWeight(10);
stroke(250, 208,0);
line(c,d,e,d)
stroke(252, 165, 3);
line(-c,250, e, 250);//last orange line
stroke(247, 229, 146);
line(width, 150, c, 150);// first yellow line
if(e==width || e<0){
se=-se;
}
if(c==width || c<0){
sc=-sc;
}
let m= map(sin(frameCount*0.1), -1,1,100,random(150,250));
fill(245, m, 29);
x = x+ 3
let y = map(sin(frameCount*0.1), -1,1,50,350);
circle(x, y, 50);
console.log(mouseX);
if (x>width){
x= 0;
}
}
Sketch #2:
Description
The motions in this sketch are the circles in sine waves with two of them floating vertically and others horizontally in pairs. The vertical and horizontal motions and the transparency of the background allows the circles to leave their traces as they move in a pattern, forming an illusion similar to a pair of snake-like creature slithering in the dark with the reflections from their glowing skin. The part that differentiate the overall pattern with the actual snake behavior is the constant change in color and the change of circle size. Here, the randomness of the size of circles makes the entire sketch to be unpredictable and generative.
Coding Process
This final result from combination of various elements and motion was something unexpected since I was trying to code an animation totally different from what I have right now. Initially, I wanted the the colorful circles to emerge from the dark every time the white circles intersect or get near each other. However, I failed to bring that imagination into reality; therefore I ended up with this version. During the meeting with Prof. Marcela, I noticed that the problem of my initial plan for the circle to emerge when the the white ones touch each other(under the condition if(x ==y)) is that the time the circles touch is too short that I was not able to see the colored ones emerge. Instead of using the condition if (x==y), professor suggest me to use something like if (abs(x - y) < 20) instead, in which it stretches enough time and space for the colored circle to emerge. This is the lesson I learned from the failure I made, and I am looking forward to use similar technique of coding in the future projects.
Code
let x=10;
let y=0;
let lx=0;
let s;
let a;
let b;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0, 10);
let m= map(sin(frameCount*0.1), -1,1,100,255);
let s = map(sin(frameCount*0.1), -1, 1, 20, 30);
fill(200);;
circle(x, y, s);
circle(y, x, s);
//x = width/2+100*sin(frameCount*0.1);
x = width/2+100*cos(frameCount*0.1);//same as sine
y=y+1;
noStroke();
fill(m, 105, 180);
circle(x-20, y-50, random(1, 40));
circle(y-50, x+=-20, random(1,40));
if (x>width){
x= 0;
}
if (y>height){
y=0;
}
}
Sketch #3:
Description
The circle in this sketch move in random directions with changing random sizes and colors; together with the transparency of the background, it makes the overall picture looks like the circle is in a fast process of reproducing and dying off just like the bacterias in the real world! If you look in closely, you will notice the stroke of the circle is also changing, but more like the rainbow colors that a prism reflects from a light source, and the border color of the circle is the same as the lines in the background that rotates in a circular motion. The circulating line made me to recall the sensors or the detector that are usually used in detecting special targeted subjects.
Coding Process
The coding process was smooth with this final sketch I made. This was due to the help of the class resources such as the slides and most importantly, the live code. I took what we have learn in the class and the given intriguing live code and combine them into a new collection of motions.
Code
let x, y;
let a, b;
function setup() {
createCanvas(400, 400);
x = width/2;
y = random(0, height);
console.log(y);
colorMode(HSB,100);
background(0);
}
function draw() {
background(random(0,225), 5);
x = x + random(-frameCount*0.01,frameCount*0.01);
y = y + random(-frameCount*0.01,frameCount*0.01);
stroke(random(100), 50,100);
a = width / 2 + cos(frameCount*0.1) * 150;
b = height / 2 + sin(frameCount*0.1) * 150;
line(width/2, height/2, a, b);
//noFill();
fill(random(30, 70), 73, 102);
circle(x, y, random(20,60));
if (x == width){
x =x- random(-frameCount*0.01,frameCount*0.01)*20;
}
if (y== height){
y =y - random(frameCount*0.01,frameCount*0.01)*30;
}
}