Creative Coding Lab | Mini Project #4

Project Title: Firework

           We learned how to use for loops and use them to create repetitive shapes. The following artwork shows different shapes of one basic code when I gave variations on some parts of the code.

click here to see the result: 

https://editor.p5js.org/GwangunKim/collections/kO6w8tFbJ

Progress

1. Spiral

This is the first code I wrote to make a spiral. 

let a = 0
let f =0
let r = 10
let radius = 200
let count = 100
function setup() {
  createCanvas(400, 400);
  colorMode(HSB,100);
}

function draw() {
  background(0);
  translate(width/2,height/2);
  
  for(i=0;i<count;i++){
   a=f
   f=i/count
   dist=f*radius
   x=cos(a*TWO_PI*4)*dist
   y=sin(a*TWO_PI*4)*dist
   circle(x,y,r)
  }
  
}

Then, when I changed the value of “a” from “f” to “PI/2”, there appeared more spirals on the canvas:

To make it more fireworks on the canvas, I made a function called Spiral and called the function on the “setup” function:

let a = 0
let f =0
let r = 10
let radius = 100
let count = 100
let size;


function setup() {
  createCanvas(400, 400);
  colorMode(HSB,100);
  
}

function draw() {
  background(0);
  translate(width/2,height/2)
  
  
  push()
  Spiral(0,60,1)
  pop()
  
  push()
  Spiral(90,-70,0.5)
  pop()
  
  push()
  Spiral(-100,-90,0.8)
  pop()
  
  
  
}

function Spiral(xPos,yPos,size) {
  translate(xPos,yPos);
  
  scale(size)
  ccolor=100
  for(i=0;i<count;i++){
   a=i/PI
   f=i/count
   distance=f*radius
   x=cos(a*TWO_PI)*distance
   y=sin(a*TWO_PI)*distance
   fill(ccolor)
   circle(x,y,r)
  }
}

And this is the version when I put the color using “i”, which increases linearly.

2.Snowflake 

To make a different shape of firework, I created a snowflake using for loops:

function setup() {
  createCanvas(400, 400);
  background(0);
  translate(width/2,height/2);
  angleMode(DEGREES);
  colorMode(HSB,100)
  let branch=6;
  let angle = 60
  
  
  for(i=0;i<branch;i++){
    let x=cos(angle*i)*i*20;
    let y=sin(angle*i)*i*20;
    
    for(j=0;j<branch;j++){
      rotate(60)
      circle(x,y,10)
      fill(random(0,100),100,100);
      
      for (k=0;k<6;k++){
        rotate(60)
        circle(x+15,y+15,15)
        fill(random(0,100),100,100);
        
      }
    }
 }
  
}

function draw() {
  
}

And the following result came out when I changed the angle of rotation from 60 to 30:

3. Square

This is the last shape, a square, of firework:

function setup() {
  createCanvas(400, 400);
  background(0);  
}
function draw() {
translate(width/2,height/2)
angleMode(DEGREES)

  for(i=0;i<7;i++){
    for(j=0;j<7;j++){
      rotate(90)
      square(i*10,i*10,10)
      push()
      rotate(60)
      square(i*10,i*10,20)
      pop()
      
    
  }

 }
}

When I gave a change on the angle of rotation and the color of the shape, the result came out like this:

 

Reflections

          1. Coding does not allow you to draw exactly what you want all at once. You have to approach the desired position and shape mathematically and find the appropriate values. Also, in the process of making modifications, you do not erase the parts you want to remove directly. Instead, you continually delete and modify the code, progressing in steps.

           However, both drawing by hand and writing code require creativity, and they share similarities in terms of drawing a certain shape repeatedly and filling it with color.

         2. Generative patterns that possess diversity and complexity are more intriguing and captivating. Patterns should exhibit intricate compositions or subtle variations among elements to captivate the viewer’s interest. Appealing patterns can be achieved through variations in the size, rotation, direction, or combination of shapes. While complexity is desirable, it is important for different shapes to harmonize and achieve balance to enhance the overall beauty. Focusing too much on complexity alone may tire the viewer’s eyes and make the image appear messy. Therefore, pursuing diversity within a framework of harmony and balance is key to creating excellent generative patterns.