Author: Yahia Beethoven

I know it is a bad pun but I couldn’t help noticing it (bee in beeto).

I really liked the examples we dealt with in class, and for my assignment I decided to try to mix some of the different functions in these examples in addition to others to have a unique product.

So I made use of the geomerative with circle class file, the bounce logic, the drawing of a hexagonal polygon, and the logic of drawing a grid.

I decided that my theme would be that of bees and that the idea of having things vibrating in place fits it well. I looked up the color palette of a beehive, and I made the text particles bounce off the borders if they hit them. This was how it looked at first.

Then I decided to increase the speed so it fits the theme more, increased the size proportionally, added the hexagon grid classes, and adjusted the friction, initial speed, and the numericals involved with bringing the hexagons back home.

This is how the final things looks like where the background randomly changes color just as it would be in real life.

https://youtu.be/17Bj16mcsKQ

The main code drawing on everything:

import geomerative.*;
RFont font;
RPoint[] pnts;
Hexagon[] hexas;
int amountPerPoint;
int index;
HexGrid g;
color[] mainpallet = {  #985b10, #6b4701};
int rad, nwide, nhigh, shade;

void setup() {
  size(1000, 640);
  
  RG.init(this);

  font = new RFont("Raleway-Regular.ttf", 280, RFont.CENTER);
  pnts = getPoints("Bee_to");
  amountPerPoint = 4;
  
  rad=20;
  nhigh = (height/((rad*3)/2));
  nwide = int(width/(sqrt(3)*rad))+1;
  
  g = new HexGrid(nwide, nhigh, rad);
  g.display();
  
  hexas = new Hexagon[pnts.length*amountPerPoint];
  
  index = 0;
  
  for (int i = 0; i < pnts.length*amountPerPoint; i += amountPerPoint) {
    for (int j = 0; j < amountPerPoint; j++) {
      int k = i + j;
      hexas[k] = new Hexagon(width/2 + pnts[index].x + random(-2, 2), height/1.65 + pnts[index].y + random(-2, 2), random(8, 18));
    }
    index++;
  }
  
  
   
}

void draw() {
   background(107,71,1);
   
   shade = int(random(0,1));
   g.display();
   
   for (int i =0; i < hexas.length; i++) {
     hexas[i].seekHome();
     hexas[i].update();
     hexas[i].display(6);
     hexas[i].checkEdges();
   }
   
   for(int i=0; i < 5 ; i++)
  {
    Hbackground selected = g.getHex(int(random(nwide)), int(random(nhigh)));
    selected.setFillColour(mainpallet[int(random(2))]);
  }
}

void mousePressed() {
  for (int i = 0; i < hexas.length; i++){
    hexas[i].xSpeed = random(-30, 30);
    hexas[i].ySpeed = random(-30, 30);
    hexas[i].seek = false;
  }
  //delay(200);
}

void mouseReleased(){
  for (int i = 0; i < hexas.length; i++) {
    hexas[i].seek = true;
  }
  //delay(200);
}

RPoint[] getPoints(String str) {
  RCommand.setSegmentLength (20);
  RCommand.setSegmentator(RCommand.UNIFORMLENGTH);
  RGroup grp;

  grp = font.toGroup(str);
  grp = grp.toPolygonGroup();
  return grp.getPoints();
}

Individual hexagons in background:

//this code was inspired from this website http://louisc.co.uk/?p=2554

class Hbackground {
 float centx;
 float centy;
 float radius;
 float angle = TWO_PI / 6;
 boolean fill = false;
 color c;
 
 Hbackground( float x, float y, float r ){
 centx = x;
 centy = y;
 radius = r;
 }
 
//The draw function will define the fill values and calculate the coordinates
 void display() {
   if(fill)
     fill(c);
   else
    noFill();
   
  
   beginShape();
     for (float a = PI/6; a < TWO_PI; a += angle) {
       float sx = centx + cos(a) * radius;
       float sy = centy + sin(a) * radius;
       vertex(sx, sy);
     }
     
     stroke(137,104,0);
     strokeWeight(4);
   endShape(CLOSE);
 }
 
 void setFillColour(color col)
 {
 fill = true;
 c = col;
 }
}

Grid of hexagons in background:

//this code was inspired from this website http://louisc.co.uk/?p=2554

class HexGrid {
  Hbackground[][] grid; //Our 2D storage array of Hexagon Objects
  int cols, rows;
  float radius;
 
  //Class Constructor required the grid size and cell radius
  HexGrid(int nocol, int norow, int rad)
  {
    //Define our grid parameters
    cols = nocol;
    rows = norow;
    radius=float(rad);
 
    //2D Matrix of Hexagon Objects
    grid=new Hbackground[cols][rows];
 
    //Lets assign the inital x,y coordinates outside the loop
    int x = int(sqrt(3)*radius);
    int y = int(radius);
 
    //These two nested for loops will cycle all the columns in each row
    //and calculate the coordinates for the hexagon cells, generating the
    //class object and storing it in the 2D array.
    for( int i=0; i < rows ; i++ ){
      for( int j=0; j < cols; j++)
      {
        grid[j][i] = new Hbackground(x, y, radius);
        x+=radius*sqrt(3); //Calculate the x offset for the next column
      }
      y+=(radius*3)/2; //Calculate the y offset for the next row
      if((i+1)%2==0)
        x=int(sqrt(3)*radius);
      else
        x=int(radius*sqrt(3)/2);
    }
  }
 
  //This function will redraw the entire table by calling the draw on each
  //hexagonal cell object
  void display()
  {
    for( int i=0; i < rows ; i++ ){
      for( int j=0; j < cols; j++)
      {
        grid[j][i].display();
      }
    }
  }
 
  //This function will return the hexagonal cell object given its column and row
  Hbackground getHex(int col, int row)
  {
    return grid[col][row];
  }
 
}

Individual hexagons making the text:

class Hexagon {
  float x, y, homeX, homeY;
  float xSpeed, ySpeed;
  float hWidth;
  boolean seek;
  char letter;
  float dirX, dirY;

  Hexagon(float _x, float _y, float _width ) {
    homeX = x = _x;
    homeY = y = _y;
    xSpeed = ySpeed = 0;
    hWidth = _width;
    seek = true;
  }

  void update() {
    x += xSpeed;
    y += ySpeed;
    xSpeed *= .95;
    ySpeed *= .95;
  }

  void display(int npoints) {
    float angle = TWO_PI / npoints;
    beginShape();
      fill(246,224,0);
      stroke(249,201,1);
      for (float a = PI/6; a < TWO_PI; a += angle) {
        float sx = x + cos(a) * hWidth;
        float sy = y + sin(a) * hWidth;
        vertex(sx, sy);
      }
      strokeWeight(2);
    endShape(CLOSE);
  }

  void seekHome() {
    if (seek) {
      dirX = homeX-x;
      dirY = homeY-y;
      dirX*=.009;
      dirY*=.009;
      xSpeed+=dirX;
      ySpeed+=dirY;
    }
  }

  void checkEdges() {
    if (y>height - hWidth) {
      ySpeed *= -1;
    }
    if (y< hWidth) {
      ySpeed *= -1;
    }
    if (x>width - hWidth) {
      xSpeed *= -1;
    }
    if (x< hWidth) {
      xSpeed *= -1;
    }
  }
}

 

Still hooked up by the mobile app game Rolly Vortex since last week’s assignment, I decided to take a shot at creating the game.

I started out by trying to create the grey hoops which give the feeling of you being inside a vortex. I struggled with making them because I wanted to create white spaces between each of them, and because I wanted each hoop to restart from the middle after it expands more than the height of the screen. I wanted to do 3D where the z-dimension increases but I wasn’t comfortable enough at the start.

This was how they looked before fixing the distances between each of them, their thickness, and how they restart.

This is the better version where the hoops actually look like a vortex and are quite similar to the game.

I then started to create the ball and I wanted it to be 3D so a sphere instead of an ellipse. But I struggled at first with making sure the ball doesn’t enter the center of the vortex and did it manually, which was still unsuccessful.

I then did the blocks, where I started out by creating them using rectangles and moving their z-coordinate towards the screen to give the feeling of a vortex. However, after so many trial and error, I realized that the pushMatrix() and popMatrix() are quite dangerous if not used properly and that I had so many issues because of them. or example, I couldn’t move the blocks properly while moving the ball as in the video.

After many attempts I was finally able to create 3D boxes which get closer to the screen and to successfully move the ball without touching the center and to properly make a collide function that checks if the ball touches any block. I was able to end and restart the game without errors and to keep score while playing and at the end of the game.

The code for the overall game:

Hoop[] hoops;    //list of grey vortex circles
float x, y, z;
Ball ball;       // ball of the player
ArrayList<Block> blocks;    //array list of obstacle blocks
boolean gameOn;      //condition under which the game operates
PFont f;         //text for ending game
int score;        //score of user, increases with each block block they


void setup () {
  
  size(1280, 720, P3D);
  
  hoops = new Hoop[200];    //instances of the three main classes
  ball = new Ball();
  blocks = new ArrayList<Block>();
  
  blocks.add(new Block(60));    //initial theta in argument
  
  gameOn = true;
  score = 0;
  
  f = createFont("Arial",72,true);
  
  for (int i =0; i < hoops.length; i++) {      //creates the continuous hoops
    hoops[i] = new Hoop();
  }
  
  
}

void draw () {
  
  background(255);
  
  if (gameOn == true) {
    
    for (int i = 0; i < hoops.length; i+= 20) {      //draws the hoops and calls the related functions
      hoops[i].drawHoop(i*10);
      hoops[i].update();
      hoops[i].checkEdge();
    }
    
    ball.drawBall();          // draws the ball
    
    for (int i = blocks.size()-1; i >= 0; i--) {       //draws block for each element in the array list
      Block block = blocks.get(i);
      block.drawBlock();
      
    }
    
    if (frameCount % 60 == 0){                      //creates instances of the blocks of number between 1 and 6 randomly
      for(int i = 0; i < int(random(1,6)); i++) {
        blocks.add(new Block(int(random(1,12)*30)));
        
        if (gameOn == false) 
          {break;}
        
      }
    }
    score = blocks.size();          //updates the value of score to be number of elements in array list
    
    for (int i = blocks.size()-1; i >= 0; i--) {            //checks if the ball collided with any block, if true the game stops
      if (ball.checkCollide(blocks.get(i).posX, blocks.get(i).posY) == true) {
          gameOn = false;
       };
    }
    
    textAlign(CORNER);
    textFont(f,24);
    fill(0);
    text("Score: "+ score,width -120,height -30);        //score text bottom right
    
    
  }
  
  else {
    textFont(f,72);               
    fill(#000080);
    textAlign(CENTER);
    text("GAME OVER!",width/2,height/2 - 30);
    textFont(f,24);
    fill(0);
    text("CLICK ANYWHERE TO RESTART",width/2,height/2 +30);      //game over text
    
    textAlign(CORNER);
    textFont(f,24);
    fill(0);
    text("Score: "+ score,width -120,height -30);      //final score text
    
    
    
  }
}

void mouseClicked() {
  if (gameOn == false) {
    score = 0;
    gameOn = true;
    for (int i = blocks.size()-1; i >= 0; i--) { 
      Block block = blocks.remove(i);
      block.drawBlock(); 
    }
  }
}

Code for the Ball() class:

class Ball {
  float ballWidth, ballHeight;
  float locX, locY;
  color ballColor;
  float speed;
  int radius;
  PVector m;
  PVector circle;
  float z;
  float easing = 0.95;

  
  Ball() {
  
    locX = width/2;
    locY = height/2;

    ballWidth = 100;
    ballHeight = ballWidth;
    
    speed = 15;
  
    ballColor = color(random(255), random(255), random(255)); 
    
    radius = 150;
    
    z= 0;
  
  }
  
  void drawBall() {
     //idea inspired from ellipse constraint code from https://forum.processing.org/one/topic/ellipse-constrain-shape.html
   
    fill(#F5F5F5);
    noStroke();
    m = new PVector(mouseX, mouseY, z);      //vector of movement of ball
    circle = new PVector(width/2, height/2, z); //vector circle around which ball is constrained
    ellipse(circle.x, circle.y, radius, radius);     //circle of cosnstrain
    

    if (dist(m.x, m.y, circle.x, circle.y) < radius) {
      m.sub(circle);
      m.normalize();
      m.mult(radius);
      m.add(circle);      //constrains movement of ball to be everywhere except at a distance from teh center of the vortex
    }
    locX = locX + (m.x - locX) * easing;
    locY = locY + (m.y - locY) * easing;     //sets the x and y coordinates such that the ball is updated properly and doesn't disappear or enter middle 
    
    noStroke();
    lights();
    pushMatrix();
      translate(locX, locY - 30, z);
      fill(ballColor);
      sphereDetail(36, 36);
      sphere(30);
    popMatrix();      //draws the 3D sphere at the updated location
    //z+= 0.5;
  }
  
  boolean checkCollide(float posX, float posY) {

    if (dist(locX, locY - 30, posX - 30, posY + 25) < 55) {    //if ball touches the x,y coordinates of the block it collides and returns true to end game
      gameOn = false;
      return true;
    }
    
    else {
      return false;
    }
  }
}

Code for the Block() class:

class Block {
  float blockWidth, blockHeight, blockDepth;
  float locXB, locYB, locZ;
  color a, g, b;
  float posX, posY;
  float theta;
  float speed;

  Block(int _theta ) {
    
    locXB = width/2;
    locYB = height/2;
    locZ = 0;
  
    blockWidth = 60;
    blockHeight = 50;
    blockDepth = 30;
    
    a = int(random(255));
    g = int(random(255));
    b = int(random(255));    //randomized color
    
     posX = width/2;
     posY = height/2;
     theta = _theta;
    
    speed = 6;    //speed of shift
  
  }
  
  void drawBlock() {
   fill(a, g, b);
   noStroke();
   pushMatrix();
     
     translate(posX, posY, locZ);
     rotate(radians(theta));      //rotates blocks before moving
     posX += speed*sin(theta);    // horizontal shift
     posY += speed*cos(theta);    //vertical shift
     box(blockWidth, blockHeight, blockDepth);
     
     locZ+= 8;      //z-dimension shift towards the screen

   popMatrix();
   
  }
}

Code for the Hoop() class:

class Hoop {
  float outerHoopWidth, outerHoopHeight;
  float innerHoopWidth, innerHoopHeight;
  float locXH, locYH;
  float speed, acceleration;

  Hoop () {

    locXH = width/2;
    locYH = height/2;

    outerHoopWidth = 100;      //width of circle
    outerHoopHeight = outerHoopWidth;

    speed = 5;

  }

  void update() {
    
    if (outerHoopHeight + 400 == height) {
      speed = 10;
    }
    
    outerHoopWidth += speed;
    outerHoopHeight += speed;
    
  }

  void checkEdge() {
    if (outerHoopHeight + 300 == height) {    //if hoop is out of screen then restart it at the middle of the screen
      outerHoopWidth = 200;
      outerHoopHeight = 200;
    }

  }

  void drawHoop(int xFactor) {

    float circle1w = outerHoopWidth + xFactor;    //xFactor is to space out the different hoops

    float circle1h = outerHoopHeight + xFactor;

    noFill(); 
    stroke(#F5F5F5);
    strokeWeight(55);
    ellipse(locXH, locYH, circle1w, circle1h);
    
    
    
  }
}

 

 

At first, I couldn’t think of any ideas and I considered doing something similar to the mobile app game “Rolly Vortex”.

But then I realized this is more of a cool game rather than an interesting art piece and that I can save the idea for a later more complex project.

I didn’t go far but rather kept the idea of things spiraling and a sphere bouncing around by a cartoon-chalk-like implementation of our solar system.

I decided to use the random function heavily to create somewhat of a dynamic outer space background.

 

 

 

 

 

I then improved the functions to make them seem more random, made the screen bigger in size, allowed the planets to randomly change color, and made the sun orange-yellow.

I also made use of the beginShape() function to draw the asteroids (celestial objects) which fly about around the planets and I made them more than the planets since that is the case in real life with their smaller size.

I also chose a color spectrum for the planets that is somewhat possible in real-life to make them more recognizable. I decided to not really make the colors exactly like real-life nor the number of planets because that is unnecessary and would create traffic on the art piece.

I created some stars which place randomly around the plane, and which are the background that give the sense of outer space in the first place. The planets also move about randomly but at a small scale, and the asteroids move around much further than them.

https://vimeo.com/460059157

int seed = 0;
int checkerWidth = 80;
int checkerHeight = 80;
float r = 0;
float g = 0;
float b = 0;

void setup() {
  size(640, 550);
  rectMode(CENTER);
  
}

void draw() {
  background(#414a4c);
  
  if (frameCount%10 == 0) {
    seed = frameCount/10;
  }
  
  randomSeed(seed);
  translate(width/2, height/2);

  
  for (int k = 0; k < 720; k++) {
    float x = random(-width, width);
    float y = random(-height, height);
    pushMatrix();
      strokeWeight(1);
      stroke(255);
      fill(255);
      ellipse(x, y, 3, 3);
    popMatrix();
  }
  for (int i = 0; i < 360; i += 1) {
  
    float x = random(0, 10);
    float z = random(80, 125);
    pushMatrix();
      rotate(radians(i));
      strokeWeight(3);
      stroke(#FDB813);
      line(x, 0, z, 0);
    popMatrix();
  }
  
  for (int j = 0; j < 360; j+=60) {
    
    float x = random(120,150);
    float y = random(120, 150);
      r = random(64, 253);
      g = random(60, 190);
      b = random(0, 40);
    pushMatrix();
      rotate(radians(j));
      strokeWeight(2);
      
      stroke(0);
      strokeWeight(0.5);
      fill(r, g, b);
      ellipse(x, y, 40, 40);
     popMatrix();
  }
  
  for (int j = 0; j < 360; j+=random(40,60)) {
    
    float x = random(160,180);
    float y = random(160, 180);
    pushMatrix();
      rotate(radians(j));
      strokeWeight(2);
      stroke(0);
      strokeWeight(0.5);
      fill(#93928c);
      beginShape();
        vertex(x, y);
        vertex(x+random(10,20), y-random(10,20));
        vertex(x+random(20, 25), y-random(5, 10));
        vertex(x+random(25,35), y);
        vertex(x+random(20,25), y+random(5,10));
        vertex(x+random(10,15), y+random(15,20));
        
      endShape();
     popMatrix();
  }
}

 

I feel like with the knowledge of OOP and classes furthermore in the course, I will be able to master Java much more and achieve much more complex goals I have in mind.

I struggled at first to actually start doing anything that is meaningful because I like to plan things ahead and foreseeing how the coding will go is quite difficult. I took inspiration from my Snapchat Bitmoji, knowing it’s just for ideas not copying.

I made some quick research on Processing’s Reference pages and decided that the beginShape() might be a very suitable method for drawing the face, hair, and eyes (basically figures I thought would require complex drawing to be perfected).

I tried out the function and this is what I was able to do before realizing that the shape of the face can just be an ellipse for the sake of simplicity and because beginshape() will take a very long time to draw a curved shape.

 

 

 

 

 

 

 

I then started to master the small operations that I code for each part of the portrait, and I drew a very detailed eye which contains the eye itself, the brown iris, the white sclera, the pupil, and dark brown eyebrows.

Even though the eye was on point, I realized that making the portrait realistic will just make it weird and ugly so the rest of the face should just be more cartoon-like.

I drew a simple nose with just one outline from the right and some detail at the bottom, and I made a very simplistic but appropriate slightly-smiling mouth. The main function used was the “arc” function and I also struggled at first to understand how the radian angles calculations were carried out but I got things right simply by very long trial and error.

After completing most of the face, I decided to draw the hair using the beginShape() function which I struggled with earlier, and it turned it to be extremely useful for irregular shapes. By now, I was almost blindly typing numbers and automatically making calculations of dimensions and distances.

I made the ears using another arc function, and I decided to make the background a still photo of something that represents me; squash. I played squash for 5 years and even though I stopped playing years ago, I adore the sport and still play for fun until today.

Lastly, I decided to make use of the clicking of mouse function in a simple creative way where if you click the mouse the colors of the eyes and the clothing randomly change simultaneously.

 

//Assignment 1 Yahia Beethoven Tayel self portrait

//Initializing the variables before any function
//In case the image doesn't load
int backgroundColor = 255;
//dimesnions of the portrait
float x;
float y;

//randomized variables for the color of the clothes when mouseclicked
float r = 0;
float g = 0;
float b = 0;

float r1 = 96;
float g1 = 49;
float b1 = 1;

//setting up the plane on which the portrait is drawn
void setup() {
  size(500, 640);
  x = width/2;
  y = height/2;
  PImage img;
  img = loadImage("squash_background.PNG");
  img.resize(500, 640);
  background(backgroundColor);
  background(img); 
}  

//the main draw function that makes the face
void draw() {

 
//draws neck
fill(241, 194, 125);
stroke(205, 133, 63);
rect(x - 43, y+180, 90, 60);

//draws the face
strokeWeight(3);
fill(241, 194, 125);
stroke(205, 133, 63);
ellipse(x, y, 6.5*x/5, 7*y/6);

//draws the hair
strokeWeight(3);
fill(45, 23, 13);
stroke(0);

beginShape();
vertex(x/4 + 24, y - 25);
vertex(3*x/8, 2*y/3);
vertex(x/2, y/2.3);
vertex(5*x/8, y/3);
vertex(3*x/4, y/3.75);
vertex(7*x/8, y/4.45);
vertex(x, y/4.5);
vertex(x+10, y/4.7);
vertex(9*x/8, y/4.45);
vertex(5*x/4, y/4);
vertex(11*x/8, y/3);
vertex(3*x/2, y/2.3);
vertex(13*x/8, 2*y/3.2);
vertex(x+3*x/4 - 24, y - 25);
vertex(13*x/8 - 20, 2*y/3 +20);
vertex(3*x/2 - 30, y/2.3 +55);
vertex(11*x/8 - 5, y/3 +60);
vertex(5*x/4 +15, y/2.3 +55);
vertex(11*x/8 - 10, y/3 +50);
vertex(9*x/8 +15, y/2.3 +25);
vertex(9*x/8 - 15, y/2.3 +35);
vertex(x- 15, y/2.3 +33);
vertex(7*x/8, y/2.3 +30);
vertex(5*x/8 +30, y/2.3 +25);
vertex(5*x/8 +15, y/2.3 +20);

vertex(x/2, 2*y/3);
endShape(CLOSE); 


//draws the eyes
strokeWeight(4);
fill(255);
stroke(0);

ellipse(3*x/4, 4*y/5, x/3.5, y/8);
ellipse(5*x/4, 4*y/5, x/3.5, y/8);

//draws the iris
strokeWeight(3);
fill(r1, g1, b1);
stroke(0);

ellipse(3*x/4, 4*y/5, x/7, y/9);
ellipse(5*x/4, 4*y/5, x/7, y/9);

//draws the pupil

fill(0);
stroke(0);

ellipse(3*x/4, 4*y/5, x/13, y/15);
ellipse(5*x/4, 4*y/5, x/13, y/15);

//draws the white spot
strokeWeight(1);
fill(255);
stroke(255);

ellipse(3*x/4 + x/38, 4*y/5 - y/25, x/25, y/40);
ellipse(5*x/4 + x/38, 4*y/5 - y/25, x/25, y/40);

//draws the eyebrows
strokeWeight(1);
fill(43, 29, 14);
stroke(43, 29, 14);
arc(3*x/4 - 3, 4*y/5-y/10, x/3, 13, HALF_PI+QUARTER_PI + 0.4, TWO_PI+QUARTER_PI/2 +0.4);
arc(5*x/4 -3 , 4*y/5-y/10, x/3, 13, HALF_PI+QUARTER_PI, TWO_PI+QUARTER_PI/2 - 0.4);

//draws the nose
noFill();
stroke(205, 133, 63);
strokeWeight(4);

//arc(x+12, 5*y/6 + 10, 7, y/2.5, 0, HALF_PI);
arc(x-18, 5*y/6 + 75, 7, y/2.5, PI, PI+QUARTER_PI+0.5);
//took the two nostrils idea from aysha of this class
arc(x - 23, y+30, 21, 21, HALF_PI-QUARTER_PI/3, PI+2*QUARTER_PI);
arc(x+16, y+30, 21, 21,  -HALF_PI, HALF_PI+QUARTER_PI/2);
arc(x-3, y+40, 30, 21,  0, PI);

//draws the mouth
noFill();
stroke(0);
arc(x, y+95, 95, 21,  0, PI);
strokeWeight(7);
point(x+47.5, y+95);
point(x-47.5, y+95);

//draws the ears 
strokeWeight(3);
fill(241, 194, 125);
stroke(205, 133, 63);

arc(x/4 + 26, y - 10, x/4, y/3.5, HALF_PI, PI+HALF_PI );
arc(x+3*x/4 - 26, y - 10, x/4, y/3.5, -HALF_PI, PI-HALF_PI);


//draws shoulders
fill(r, g, b);
stroke(0);
beginShape();
vertex(0, 2*y);
vertex(x/4, y+240);
vertex(x+3*x/4, y+240);
vertex(2*x, 2*y);
endShape();

} 
//functions that are called when the mouse is clicked to randomly change the colors of both the eyes and the clothes simultaneously
void mousePressed() {
   r = random(255);
   g = random(255);
   b = random(255);
   
   r1 = random(255);
   g1 = random(255);
   b1 = random(255);
}

 

I learned a lot through this simple assignment and I look forward to future assignments which will help develop my skills in programming much more.