Author: Amer AlZarouni

For this week’s assignment, we were tasked with either making some sort of data visualization, or creating a generative text output. I decided to make a visualization of the population of some of the major cities of the UAE on a map of the country.

I started by retrieving a map of UAE from Google Images, uploading it to my sketch, then loading it in the setup and resizing it to fit my canvas. To obtain the canvas coordinates of each city I used the following function to print mouse location to the console (which I commented out in the final sketch):

print(mouseX, mouseY);

Afterwards, I used ChatGPT to obtain an estimate of each city’s population (to save time) along with the coordinates I obtained earlier to create an array with each city’s position and population:

let cities = [
  { name: "Abu Dhabi", x: 440, y: 240, population: "1,480,000" },
  { name: "Al Ain", x: 625, y: 285, population: "656,000" },
  { name: "Madinat Zayed", x: 333, y: 335, population: "10,000" },
  { name: "Dubai", x: 575, y: 150, population: "3,380,000" },
  { name: "Sharjah", x: 600, y: 135, population: "1,400,000" },
  { name: "Khor Fakkan", x: 730, y: 140, population: "33,575" },
  { name: "Ajman", x: 610, y: 130, population: "500,000" },
  { name: "Fujairah", x: 720, y: 170, population: "230,000" },
  { name: "Dibba Al Hisn", x: 720, y: 105, population: "26,395" },
  { name: "Umm Al Quwain", x: 620, y: 115, population: "80,000" },
  { name: "Ras Al Khaimah", x: 670, y: 85, population: "350,000" },
  { name: "Ar Rams", x: 690, y: 70, population: "16,000" }
];

Instead of a traditional for loop, I used a forEach loop that I had seen online to draw a point for each location in the array and display the population when the user’s mouse hovers on each point, and this was my final result:

Looking to the future, I guess I could use a better map and add more cities with more accurate population estimates.

For this assignment, we were tasked with using either a for loop or a while loop to make a simple work of art. I decided to make a UAE flag with some clouds moving in the background using loops.

I started by randomizing 5 starting positions for the clouds to make them different every time the program is run.

let cloudPositions = []; // Array to hold the positions of clouds

function setup() {
  createCanvas(800, 600);
  
  // Create 5 clouds at random positions and add them to the array
  for (let i = 0; i < 5; i++) { 
    cloudPositions.push(random(-50, width - 50));
  }
}

After that I used another for loop to move the clouds in the using the drawCloud() function I wrote:

fill('white');
for (let i = 0; i < cloudPositions.length; i++) {
  drawCloud(cloudPositions[i], 100 + i * 80); // Drawing each cloud at a different vertical position
  cloudPositions[i] += 1; // Moving the cloud to the right
  if (cloudPositions[i] > width) { // Reset cloud position after moving off screen
    cloudPositions[i] = -100;
  }
}

For reference, this is my drawCloud function, it uses multiple ellipses to make a cloud shape:

function drawCloud(x, y) {
  ellipse(x, y, 60, 60);
  ellipse(x + 20, y - 20, 70, 70);
  ellipse(x + 40, y, 50, 50);
  ellipse(x + 60, y - 10, 60, 60);
}

Overall, this is my final art piece:

Looking to the future, this artwork seems very plain, I could add some more elements such as a sun or some buildings.

For this assignment, we were tasked with creating a generative artwork using Object-Oriented Programming. I wanted to use something we use everyday in our culture to create my artwork, and took inspiration from the Emarati Ghutra (Ghitra):

I tried to use its some of its colors (white, and the different shades of red) and shapes (zigzags, diamonds, checkered squares, etc) to create my artwork.

I created a class for the Ghutra elements, consisting of a constructor, display function, and changeColor function to change the color on mouse click.

class GhutraPatternElement {
  
  // Setup the constructor with the required attributes to draw the shapes
  constructor(x, y, size, color, shapeType) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.color = color;
    this.shapeType = shapeType;
  }

  // Display function to draw the shapes based on the attributes passed to the constructor
  display() {
    fill(this.color);
    noStroke();
    
    // Diamond Shape
    if (this.shapeType === 'diamond') {
      beginShape();
      vertex(this.x, this.y - this.size);
      vertex(this.x + this.size * 0.8, this.y);
      vertex(this.x, this.y + this.size);
      vertex(this.x - this.size * 0.8, this.y);
      endShape();
    }
    
    // Checkered Squares
    else if (this.shapeType === 'checkered') {
      rectMode(CENTER);
      rect(this.x, this.y, this.size, this.size);
    } 
    
    // Zigzags
    else if (this.shapeType === 'zigzag') {
      let numZigs = 10;
      let zigzagWidth = this.size / numZigs;

      beginShape();
      for (let i = 0; i < numZigs; i++) {
        let x1 = this.x + i * zigzagWidth;
        let y1 = this.y + (i % 2 === 0 ? -this.size : this.size) * 0.5;
        vertex(x1, y1);
  
        let x2 = this.x + (i + 1) * zigzagWidth;
        let y2 = this.y + (i % 2 === 0 ? this.size : -this.size) * 0.5;
        vertex(x2, y2);
      }
      endShape();
    }
  }

  // Function to change color on mouse press
  changeColor() {
    // Change the color only when the mouse is pressed
    if (mouseIsPressed) {
      this.color = random(colorPalette);
    }
  }
}

I used ChatGPT to generate the color codes for the different shades of red I used to avoid having to manually sample each color and waste time:

let colorPalette = [
  '#FFFFFF',    // White
  '#FF0000',    // Red
  '#990000',    // Dark Red
  '#FF6666',    // Light Red
  '#CC0000',    // Medium Red
];

Overall, this was the result:

Looking to the future, there are definitely many things I can change to improve this artwork and make it more aesthetic. Additionally, there seems to be a bug in my code that changes the shape color multiple times per each mouse click instead of just once.

Having recently watched Casey Reas’ video, it’s fascinating how he navigates through concepts like art, randomness, order, chaos, algorithms, and aesthetics. One key takeaway that stood out to me is how randomness, when guided by certain rules or parameters, can lead to order – a concept that reminded me of an old game called “The Game of Life.”

In this game, lights follow a simple algorithm: if they’re lonely or surrounded by too many others, they go out; under ideal conditions, a new light emerges, creating a continuous cycle of life and death. Upon further exploration, one can realize that specific conditions, or parameters can play a crucial role. These act like guidelines, turning what might seem like randomness into a more structured and even aesthetically pleasing pattern. Imagine it as a kind of artistic recipe: the right mix of chaos and order, with a sprinkle of algorithms, can result in something visually appealing. It’s like making sense out of what initially seems like randomness, and that’s pretty cool.

In a nutshell, Reas’ video taught me that even in the seemingly chaotic world of art and algorithms, there’s an underlying order waiting to be uncovered. It’s like solving a puzzle, understanding how randomness can actually contribute to creating beautiful and ordered patterns.

Overview
For my first assignment, I was tasked with creating a self-portrait using p5 code. I used the different shape functions available within p5 to draw my portrait, such as: ellipses for the face and body, rectangles for the glasses, ghitra, and part of the tarboosha, triangles for the nose and other part of the tarboosha, and a curve for the mouth. I used a picture of myself from Flag Day as a reference image.

Code Highlight
I do not particularly favor any part of my code in specific, but if I had to choose one part, I’d choose the glasses, because it was more time consuming to align the different parts together:

// Draw Glasses
strokeWeight(3);
fill(GlassesColor);
rect(100, 90, 40, 25, 5);
rect(160, 90, 40, 25, 5);  
line(140, 98, 160, 98);
strokeWeight(1);

Reflection
This is an extremely basic drawing with no special functions or complexities. Looking to the future, I definitely have the ability to make a more accurate representation of myself while adding some interactive elements to make the portrait more fun.