Assingment 3: Seven Lives /ᐠ。ꞈ。ᐟ\

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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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);
}
}
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); } }
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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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;
}
}
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; } }
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

Week 2 – Reflection

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.

Assignments 2: Day and Night

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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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);
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);
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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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)
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)
 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

 

Assignment 1: Self Portrait

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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
//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);
//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);
//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.