Author: Hessa Alabbas

For this assignment, I wanted to explore more of generative text. After 3 different project ideas, I worked with a mirror image that displays motivational words in random order.

var adjectives = [
  "INDEPENDENT",
  "HUMBLE",
  "HAPPY",
  "AMBITIOUS",
  "DETERMINED",
  "DILIGENT",
  "RESILIENT",
  "CREATIVE",
  "PROGRESSIVE",
  "INNOVATIVE",
  "HARDWORKING",
  "SUCCESSFUL",
];

function preload() {
  photo = loadImage("mirror.jpg");
}

function setup() {
  createCanvas(360, 480);
  frameRate(1);
}

function draw() {
  background(220);
  image(photo, 0, 0);
  textFont("Magnolia", 18);
  fill("black");
  text("I AM", 165, 100);
  textFont("Magnolia", 14);
  fill("white");
  text(random(adjectives), 140, 340);
}

Reflection: it was relatively simple working with generative text. For future improvements, I would love to experiment generative art with text.

Exploring object oriented programming was fun and challenging. I struggled to find ideas on the artwork I want to do so I just started exploring with different shapes and playing with their movement using OOP. I started with small dots all around the screen jittering and thought of making them as stars. Then an idea of shining one of the stars’ light onto the ground sounded like a nice idea so I started playing with lines and their movement. I wanted to explore arrays and tried to incorporate that into the code which made the star light look nicer.

I wanted to incorporate a recursive tree and started exploring some codes online but I struggled to have something solid.

//star light movement
class movingLines1 {
  constructor() {
    this.x = random(width - width / 2);
    this.y = random(height - height / 2);
    this.z = 100;
    this.w = 100;
    this.speed = 2;
  }

  move() {
    this.x += this.speed;
    this.y += this.speed;
  }

  display() {
    stroke("#fff5dd");
    line(this.x, this.y, this.z, this.w);
  }
}

I am most proud of the star light as it took so much experimenting to get to the result I wanted. For future improvements, I would want to see how recursive trees work and incorporate that into the artwork.

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.

I defined my self-portrait as my identity and what I do and imagine my future to be. It was interesting to navigate through p5.js for the first time and trying to get around the different shapes and functions it has. Before trying to use the shapes, I made a rough sketch of what I imagined the portrait to look like.

I started experimenting with rectangles, lines, arcs and ellipses to sketch the buildings. It was a little tricky figuring out where to add in the stroke, fill, and stroke weight for the different elements in the sketch.

The buildings were easy to construct compared to the human face and body structure which contained more ellipses and arcs. In general, it was fun playing around it and I would love to work on more face features in the future.

https://editor.p5js.org/hessaala/sketches/QXn4IFHO1