Author: Mariam Al Khoori

Concept:

In this project I wanted to create something cute and there’s nothing cuter than cats! So, adding the saying “cats have seven lives” I implemented it by adding my very own drawing of a cat that appears within seven clicks. After clicking seven times the background restarts.

Cat speedDraw

Highlight of Code: 

Using this class code I have set the randomness of my images to follow a certain pattern within a limited sized canvas.

class Cat {
  constructor(x, y, img) {
    this.x = x;
    this.y = y;
    this.img = img;
    this.angle = random(TWO_PI);
    this.speedX = random(1, 3);
    this.speedY = random(1, 3);
  }

  update() {
    this.x += this.speedX * cos(this.angle);
    this.y += this.speedY * sin(this.angle);

    if (this.x < 0 || this.x > width) {
      this.angle = PI - this.angle;
    }

    if (this.y < 0 || this.y > height) {
      this.angle = -this.angle;
    }
  }

  display() {
    imageMode(CENTER);
    image(this.img, this.x, this.y);
  }
}

In this set of codes I was able to put together the idea of clicking the screen seven times to make the program alternate between a random image of both my drawings. When making the eighth click the program restarts.

function mouseClicked() {
  if (numClicks < maxClicks) {
    let catImage = catImages[numClicks % 2]; // Alternate between cat images
    let cat = new Cat(mouseX, mouseY, catImage);
    cats.push(cat);
    numClicks++;
  } else {
    // Reset after 7 clicks
    cats = [];
    numClicks = 0;
  }
}

Reflection and Ideas for Future Work:

This work took me so long and probably the ones with the most errors. I keep forgetting to add my class codes. I also had a problem with uploading my images without adding any additional local programs as suggested in different websites. After resizing my images and going through my code multiple times I finally got it running.

Edit: https://editor.p5js.org/mariamalkhoori/sketches/6hPD6jbgn

In Casey Reas’s video, he discusses how destruction leads to a work of art. He showcases how he himself applied such concept into his work through computer programming. He sees that Form+Behaviour=Elements: it is that decision making will allow everything from randomness, but it will slowly come together.

His approach to this kind of art is quite impressive. He is able to form something from randomness or of chaos into something that one might think is an interesting set of shapes or patterns.

Through this it is clear that Casey Reas encourages not only artists but programmers to be as creative as they can with their work. To allow themselves to create a piece of art out of what they initially started with.

Concept:

In this assignment I tried to add the change of day and night as well as the weather. Using basic shapes and sort of complementary colours for each time, I managed to hint at small elements that might resemble what happens during the day or night. I also didn’t try to stick into one biome; you can imagine this being anywhere.

Highlight of Code: 

I’m proud with how I manged to successfully bound the day and night while changing several colours elements.

function draw() {
  background(145,164,176);
  
  fill(203,199,172);
  circle(x,150,100);
  fill(198,178,87);
  circle(x,150,50);
  ellipse(50,352,200,150);
  triangle(399,242,400,400,0,400);
  
  
  if(x>width){
     changeDirection = true
     }
  else if (x<=55){
    changeDirection = false
  }
//(day)
  
  if (x>=55 && changeDirection == false){
    x=x+1.5

  }
  // (night)
  else if (changeDirection == true){
    x=x-1.5
       fill(125,135,142);
        background(42,53,69);
      circle(x,150,100); 
    ellipse(50,352,200,150);
       triangle(399,242,400,400,0,400);
    fill(78,110,168);
  circle(x,150,70);
    fill(146,152,163);
    circle(x,150,50);

As for my clouds I thought it was better for them to go through the frame and appear from the other side.

 a = a + speed; //make the cloud 1 move 
  if (a > width) { 
    a= -400;
  }
  b = b + speed/2;//make the cloud 2 move
  if (b > width) { 
    b= -200;
  }
  
  noStroke();
  
//draw first cloud
  ellipse(a,100,200,80) 
  ellipse(a+200,80,100,80)
  ellipse(a+50,120,150,50)
  //draw second cloud
  ellipse(a+300,135,170,90)
  ellipse(a+50,130,90,70)
  ellipse(a+100,170,100,80)
  noStroke()
  fill(180)
  //draw third cloud
  ellipse(b+130,170,150,70)
  ellipse(b+120,160,150,30)
  ellipse(b+150,190,100,50)
  ellipse(b+150,130,80,50)
  

 

Reflection and Ideas for Future Work:

I really wish I would spend way less time trying to figure out how to do several things and make them all appear smoothly within one frame. I also want to work with more complex shapes which might get me into animation.

EDIT: https://editor.p5js.org/mariamalkhoori/sketches/7jcUCFfj6

 

Concept:

In this sketch I mostly wanted to have as much fun as I wanted to with it. From getting the face structure the way I wanted to adding neutral toned colours that could be eye pleasing. Adding the change of colours was the final step of the whole process, which I thought was the most fun part.

//clothes
fill(mouseY,193,117,135);
rect(202,306,129,24);
fill(mouseX,205,202,184);
rect(163,282,10,23);
rect(240,282,10,23);
quad(158,292,245,293,265,319,138,319);

//earring
fill(mouseY,225,125,186);
circle(156,228,5);
circle(246,228,5);

//bow
fill(mouseX,227,34,80);
circle(173,190,10);
triangle(175,190,186,180,186,196);
triangle(170,189,159,180,159,196);

A highlight of code that I’m particularly proud of:

I’m quite proud of how I put together the face and hair. I enjoy drawing and learing anatomy, so trying a different way to practice certain positions was a little challenging. However, I managed to place the shapes in the positions and areas I felt was right.

Embedded Sketch:

 

 

Reflection and ideas for future work or improvements:

Hopefully I would get to practice more on the rest of the body. Maybe work harder on trying to animate or move my sketches smoother. I also wished I worked on the size of the canvas and adjust it before starting.