Task:
Develop a simple sketch utilizing display and transformation functions in p5. This exercise is to practice the functions we have learned.
Final Product:
Progress:
I first started this assignment by creating a basic rectangle that rotates around the center, I then improved it by creating two more rectangles, each with opacity and different rgb values for the strokes and fills.
initial code:
stroke(0,10,200,90);
fill(0,0,255,90);
translate(width/2,height/2);
rotate(radians(frameCount));
rect(0-50,0-40,100,80);
translate(-width/2,-height/2)
stroke(200,200,10,70);
fill(255,255,0,70);
rect(width/2,height/2,100,80);
stroke(200,0,0,70);
fill(255,0,0,70);
rect((width/2)-100,(height/2)-80,100,80);
I then wrapped the whole code with a push and pop function, and made that its own function called spin().
after creating the spin function, I used a for loop to call the spin function multiple times. Increasing its speed every iteration of the loop.
I can iterate the for loop as much as I want, so I can also make a very complicated flower. This is what the code looks like for 20 loops
The color is random, but it keeps updating and flashing since the random value for the color is generated within the draw() loop of the p5 code. I want the colors to be random, but stay as it is. So I created a array list at the top of the code to store the random values, I also limited the range of randomness so that the flower can be variations of the same color
code:
var alist= [];
function setup() {
for (let num = 0; num< 100;num+=1) {
r = random(205);
g = random(30);
b = random(255);
append(alist,[r,g,b]);
}
this is a blue flower, I decided to make it more visually appealing by expanding the range of red rgb value, to add a hint of purple.
Final Code:
var hi = [];
function setup() {
for (let num = 0; num< 100;num+=1) {
r = random(205);
g = random(30);
b = random(255);
append(hi,[r,g,b]);
//console.log(hi);
}
createCanvas(400, 400);
background(0);
stroke(0,10,200);
strokeWeight(20);
fill(0,0,255);
ellipse(width/2,height/2,100,100);
}
function draw() {
//console.log(frameCount%100);
background(10);
push();
//strokeWeight((frameCount%100));
//radians 0,pi
//degree 0,360
//stroke(10,200,10,80);
//fill(0,255,0,80);
//ellipse(mouseX,mouseY,80,80);
stroke(0,10,200,90);
fill(0,0,255,90);
translate(width/2,height/2);
rotate(radians(frameCount));
rect(0-50,0-40,100,80);
//pop();
translate(-width/2,-height/2)
stroke(200,200,10,70);
fill(255,255,0,70);
rect(width/2,height/2,100,80);
stroke(200,0,0,70);
fill(255,0,0,70);
rect((width/2)-100,(height/2)-80,100,80);
for (let num = 0; num< 20;num+=1) {
//r = random(255);
//g = random(255);
//b = random(255);
//spin(num,hi[num][0],hi[num][1],hi[num][2]);
}
}
function spin(x,r,g,b){
push();
//strokeWeight((frameCount%100));
//radians 0,pi
//degree 0,360
stroke(r,g,b,90);
fill(r,g,b,90);
translate(width/2,height/2);
rotate(radians(frameCount*x));
rect(0-50,0-40,100,80);
translate(-width/2,-height/2)
stroke(r,g,b,70);
fill(r,g,b,70);
rect(width/2,height/2,100,80);
stroke(r,g,b,70);
fill(r,g,b,70);
rect((width/2)-100,(height/2)-80,100,80);
pop();
}
Reflection:
I think it is cool how simple it is to generate cool looking visuals through code. The random element generated by the computer looks very natural to me, even more natural than the choices made by an artist. I had some trouble with p5 syntax, but I was able to find really convenient documentation of p5 syntax on its website. I am looking forward to learning more and creating more in p5 and ml5.