Assignment 2: Art and Programming

Concept:

Upon watching the video: Casey Rears – Chance Operations, I was quite inspired by the idea of programming fractals. The idea of fractal art has always piqued my interest as it always jelled in between states of chaos and order and it just always looked so mesmerizing. Hence, I decided to go along my assignment by creating a fractal piece of art.

Code and Thought Processes:

When I thought of fractals, my mind instantly went towards shapes such as diamonds, stars and multi-polygon shapes. Hence, after several testing, I decided to create some star like shapes. Upon exploring, p5js does not have a shape for stars, hence, I created a function that would generate a star for me:

function star(x, y, radius1, radius2, npoints) {
  let angle = TWO_PI / npoints;
  let halfAngle = angle / 2.0;
  
  beginShape();
  for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * radius2;
    let sy = y + sin(a) * radius2;
    vertex(sx, sy);
    
    sx = x + cos(a + halfAngle) * radius1;
    sy = y + sin(a + halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

I used this function from https://p5js.org/examples/form-star.html, where it essentially constructs a star shape. The arguments are the x and y coordinates of the shape (which is at the center), and I would have two radius, one for the horizontal shape of the star and one for the vertical shape of the star. I would also have the number of points the star can be. I essentially map the points together to create a star using the unit circle from trigonometry and connecting them together using the vector function.

I knew I was going to overlap my crystals over each other, however I wanted them to have some movement, hence I made them rotate at different speeds. This way it gives this really cool effect where they each sometimes align or sometimes are completely chaotic. It fits well with that chaos/order theme I was going for so it was a great addition. To do this, I created another function called drawCrystals(spin) which would draw a bunch of crystals over each other where spin is just the number of crystals spinning.

function drawCrystal(spin) {  
  for(let i=0; i<spin; i++) {
    rotate(frameCount/-1000);
    
    if (fade<0) fadeAmount=0.005;
    if (fade>255) fadeAmount=-0.005; 
    fade += fadeAmount; 
    fill(0, 0, blue_shades[i], fade);
    
    star(0, 0, ((10*spin + 70) - 10 *i)/2.333, ((10*spin + 70) - 10*i), 4);
  }
}

The size of the shape (determined by the radii) is simply calculated through a series of incremented sizes so that they all look congruent rather than weird shapes and sizes.

I decided to also add a cool fade effect. It’s really awesome because the background is black so it looks like they disappear momentarily and then appear back to life. This fade effect was inspired from another sketch which is linked here: https://editor.p5js.org/remarkability/sketches/rtM08miUD however I tweaked the values so it would fit with my code.

I also filled them with different shades of blue to fill that diamond-ish colouring, plus blue looks cool and is one of my favourite colours.

Finally, in the draw function, I simply just pushed, translated to a random coordinate on the canvas and drew the fractal shape with a random number of fractals and then popped. I repeated this process several times until all the fractals kind of covered the screen. With this, I was happy with my finished product.

Final Sketch:

Overall Thoughts and Improvements:

Overall, I think i’m happy with how it turned out, it was essence I was looking for when I wanted to create my artwork. Although some improvements I could have added are:

  • Perhaps some sort of glistening effect on the fractals.
  • Perhaps a 3D rendering of the fractals.
  • A cool idea would be where the fractals could grow and shrink at random sizes and intervals.
  • Maybe it would be cool is the fractals could move about the canvas to give it some nice lively effect to the art.

Leave a Reply