Month: September 2022

The concept

Rugs have always amazed me. As a kid I remember zoning out and into the finite loops of perfection, thinking about the elaborate patterns, the subtle details, and the mesmerizing color palettes that bring so much life to our house. There is, however, one intentional, imperfect stitch in every traditional handwoven, otherwise perfect rug. Muslim artists honor the ‘Persian rug mistake’ as a reminder that only Allah is capable of creating perfection.

My generative artwork is inspired by rug patterns [which includes many unintentional flaws].

Code highlight

Lots of loops, lots of functions, and a little bit of OOP.

//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\
class Rectangle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.height = 500;
    this.width = 4;
  }
  
  move(m) { 
    this.m = m;
    rotate(angle);
    
    if (freeze_flag == 1) {
      rotate(angle);
      angle += m;
    }
  }
  
  show(fill_color, stroke_color) {
    this.fill_color = fill_color;
    this.stroke_color = stroke_color;
    fill(fill_color);
    stroke(stroke_color);
    rect(this.x, this.y, this.height, this.width);
  }
}

function Dandelion(x, y) { 
  
  // number of rectangles
  for(i=0; i<70;i++) {
    dandelion = new Rectangle(x,y);
    
    if(reverse_flag == 1) {
      dandelion.show("#87CEEB", 10);
    } else {
      dandelion.show("#f4c2c2", 10);
    }
    // you can control the speed of rectangles by changing the argument
    dandelion.move(0.0001);
  }
}

function draw() {
  if(reverse_flag == 1){
    background("#f4c2c2");
  } else {
    background("#87CEEB");
  }
  
  //this is where i want the rectangle to rotate from which is the center
  translate(width/2, width/2);
  // translate(300, 300);
  rectMode(CENTER);
  
  Dandelion(0,0);
  Dandelion(0,100);
  Dandelion(0,150);
  // Dandelion(0,200);
  // Dandelion(0,250);
}
//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\

Embedded sketch

Here is my pattern, using only rectangles.

Two of my saved patterns:

Reflection and ideas for future work or improvements

I would love to use more elaborate patterns by defining more classes of geometrical shapes and adding more layers/colors. I would also probably not use the move() function because when many layers are involved the constant movement of the objects are not very kind to the eyes. I think choosing a good color palette and getting the right width and height for the shapes would enhance the pattern significantly. There are lots of opportunities to make the work more interactive e.g. letting the user pick the geometrical shapes, control the size of different objects, try out different color combinations, etc.

This artwork got inspired by a sunset drive two days ago. The view looked so pretty so I thought of recreating it through p5.js.

I started with drawing the palm trees using while() to have them all line up in the same line. I drew the leaves using arcs and lines.

//palm trees 
  while (x < width) {
    stroke(149, 99, 71);
    strokeWeight(1.6);
    fill(136, 96, 77);
    rect(x, 53, 5, 45);
    noFill();
    stroke("green");
    strokeWeight(1);
    line(x + 5, 50, x + 20, 30);
    line(x, 50, x - 20, 30);
    line(x, 50, x + 20, 30);
    line(x - 3, 50, x + 15, 35);
    arc(x + 32, 70, 90, 70, PI, PI + QUARTER_PI);
    arc(x + 20, 70, 90, 70, PI, PI + QUARTER_PI);
    arc(x + 45, 55, 90, 100, PI, PI + QUARTER_PI);
    arc(x + 45, 55, 90, 120, PI, PI + QUARTER_PI);
    arc(x + 43, 50, 90, 40, PI, PI + QUARTER_PI);
    arc(x + 20, 70, 70, 40, PI, PI + QUARTER_PI);
    x = x + 50;
  }

I also wanted to create a sunset animation with a circle moving as the sun and the moon appearing slowly. To create a more night effect, I also added stars and it slowly disappears by dawn.

let sunX = 100;
let sunY = 50;
let sunset = 0;

fill("yellow");
  circle(sunX, sunY, 50);

  //sun moving
  if (sunY < height + 20) {
    sunX = sunX + 3;
    sunY = sunY + 1;
    sunset = sunset + 3;

 //moon
fill(255, sunset);
circle(460, 30, 40);

The final result:

I really liked playing with loops and variables (global & local). For improvements, I would like to add more background objects (clouds, grass..) and play with more functions and loops.

Before working on my assignment I decided to keep practicing with loops to get myself comfortable with it. Once I did I began brainstorming some ideas and after doing research for inspiration I committed to an idea.

As a background, I  used a for loop to add a pattern of multiple small lines to give a sort of grainy feeling to this piece of work. After I accomplished this, I used Jeff Thompson’s video on youtube to help me with the animation of the squares. I placed the larger square in the center and had a global variable ‘angle’ that made the shape continuously rotate. After this, I created two rings of squares around the initial square. However, instead of keeping it in the center, I made it move around as well as rotate. I’m not going to lie this wasn’t intentional I was just experimenting and I ended up liking it. This is the piece of code I’m most proud of:

// ring of squares rotating
 for (let a=0; a<radians(360); a+=radians(30)) {
   push();
   translate(140,140);   
   rotate(a);   // rotate each by 30º
   translate(0, 80);  // puts it around the center square
   rotate(-angle);  // rotate the other way
   fill(random(0), random(255), random(255), random(255));
   rect(0,0, 25);
   pop();
 }

 for (let a=0; a<radians(360); a+=radians(30)) {
   push();
   translate(140,140);   
   rotate(a);               
   translate(0, 120);             
   rotate(-angle);                 
   fill(random(0), random(255), random(255), random(255));
   square(0,0, 20);
   pop();
 }

My sketch:

Improvements for next time:

– What I wanted to do but couldn’t achieve in this assignment was change the colors by mousePressed. So next time I’d really like to achieve this.

-I’d also think I should slow down the framerate a bit as the colors are changing too quickly and could cause a headache if you look at it for a long time.

Concept 

My initial design wanted to consist offer piece that is resembled modern art. I was trying to find loop designs to inspire what I had in mind. I decided to go with this piece of art since the lines dropping from the top kind of symbolize a cage. While the rain that flows shows the idea of gloominess that I was going for. the ball in the middle is vibrant and is just going back and forth Finally escapes the screen. The ellipses on top and on the bottom are constantly Still in the background I placed randomly put ellipses.  so while the majority of the painting remains constant there is always something in the background that’s different for every individual.

Methodology 

Firstly, I created the function for the ellipses I used in the background. Then I use the draw function to create both the lines and the rain. Additionally, I created the moving ellipses and give it the coordinates on where to start and stop and I did not want it to blend in with the background rather to create a line to show its path I kept in the print code I used to just give a bit of word play to the art piece

Things I Could Improve On

I initially wanted the rain pattern to go fall not only they diagonally to the right but also the diagonally to the left. I also wanted the major ellipses in the middle to have an opposing one falling from top to bottom. I was thinking of also making more ellipses Forming an X shape but I thought that would ruin the piece.

Concept:
For this assignment, I practiced a lot with the new features and made different digital artworks, just to try and play with all the different features and possibilities of loops. Thus, looking at different patterns, I remembered stained glass windows. Stained glass is a special kind of monumental and decorative art. .Stained-glass windows can be considered transparent paintings, drawings, patterns made of glass or on glass.
In the process of getting to know “loop” I discovered the random() function (which is my favorite due to its unlimited possibilities). Before getting to the idea itself, I played around with different shapes and “for” loops.

I tried to recreate like a stained glass picture. As a base, I took an autumn illustration from the internet and uploaded it into my code, after which I created something similar to a stained glass painting using the “for” loop. There were some tutorials from “The Coding Train” and a couple of other sources that I found helpful(https://www.youtube.com/watch?v=ig0q6vfpD38
https://www.youtube.com/watch?v=V56cH9R_X4k).

Reflections&future improvements:
I think that this task helped me a lot to understand correctly the work of for loop, random(), role of each variable and the importance of deep analysis before work. With more experience and practice, I hope to create similar interactive patterns with animations. For example, so that different stained-glass windows change when clicked. In the next works, I want to learn more advanced animations, like creating moving waves (in the form of patterns. )

Concept

In this assignment, I decided to come up with a simple work of art that represents in some way a great board game that I like to play. Whenever I play chess, I feel that I get detached from this world and find myself in a completely different place. In that new place, I try to find the best strategies to win the game and while doing so I get drowned in my thought. Therefore, I believe that this drawing would show part of the experience I face while playing chess.

In the above drawing, I used squares of a repeating nature to be able to design a chessboard. On top of this board, I added a series of circles with a common center across the different parts of the chessboard. I wanted through these circles to visualize the kind of thought process and confusion that a chess player faces during the game. These circles form a whirlpool which is like what happens to me when my opponent plays a strong move in the game that puts me into a whirlpool of confusion.

Furthermore, I added these wavy-looking lines to the drawing to make it more appealing. I believe that these lines represent the line of thought of a chess player who tries to think about his next five moves before playing his current move. In addition, these lines look like a sound wave that is usually used as a means of communication between two people. This is because I find chess as a way for people’s minds to communicate without them even talking. I was very happy to be able to come up with these wavy lines, you can find the code for these lines attached below.

To draw the lines in this way I used two nested for loops and I began by drawing a point, the x-coordinate of this point increments by a value of 5 each iteration. While the y-coordinate is dependent on the x value as I used a sin function to control the position of the points in the next iterations. Using only one for loop I would have been able to come up with only one wavy line. However, to come up with these lines along the whole canvas I decided to use another for loop that controls the vertical translation of the sin function.

Possible Improvements

I was so satisfied to come up with this artwork and was not expecting it to look this way when I first thought about it. However, I believe that this drawing needs a bit more work to look better and more satisfying for the viewer. I feel that by looking at the drawing for a long time the viewer might find it confusing. Therefore, to make it look better to the eye I might decrease the number of lines intersecting each other in the drawing. In addition, by adding animation to the waving lines and being able to come up with spiral-looking whirlpools instead of circles I might be able to deliver my message in a better way.