Week 2 – Art

Using For loops and some back and forth with shapes and values, I was able to produce this piece of art:

Below is the code for this project:

function setup() {
  createCanvas(600, 600);
}

function draw() {
   
      if (mouseIsPressed) {
        background(0);
        for(i=0;i<600;i+=10+mouseX/20){
          for(j=0;j<600;j+=10+mouseY/20) {
          fill(i/2,j/2,50)
          rect(i,j,15)
      
          stroke(i,mouseX,j)
          line(i,j,mouseX,mouseY)
          }
        }
      }
      else {
        background(0);
        for(i=0;i<600;i+=10+mouseX/20){
          for(j=0;j<600;j+=10+mouseY/20) {
          fill(i/2,mouseY,mouseX)
          rect(i,j,15)
      
      }
    }
  }
}

I decided to start with the For loop as that is the fundamental concept around which we were to build our program. After which, I decided on squares as my shapes due to their uniformity just being pleasant to look at for me. Once I had my rows and columns of squares, I started messing around with my values and variables, essentially experimenting what different effects I can achieve. I wanted to incorporate some sort of interactivity and decided to utilize the mouseIsPressed function in order to create some effect by clicking and holding the mouse. This led to me adding lines point to the cursor to give a sort of background light rays effect.

 

I am specifically impressed by how little lines of code it took me to create such a piece. I would initially think such an artwork would require many more lines of code but with some experimenting and utilization of functions, it took only around 30 lines.

There is definitely a lot more that can be done in order to improve this piece. I can definitely utilize different kinds of shapes and add more forms of interactivity. I look forward to seeing how I improve with time and what more I’ll be able to add in the future.