Nourhane Sekkat’s Self-portrait – Introduction to Interactive Media

Overview:

In this project my main inspiration was my background and who I am since it is a self-portrait after all. I started off with the blue sky, radiating sun and moving clouds since I love summer but also because Morocco is always sunny and perfect weather. Then I added a red banner with a green circle in the middle of it as a reference to the moroccan flag in which I put my portrait that I made as similar to me as I could get it.

Highlight:

My favorite part about my portrait is the sun shining and the clouds moving it truly gives it life and dimension. Using previous knowledge, trigonometry and loops I was able to create an endless sky feeling as the sun rays expand and retract while the clouds are moving effortlessly through the screen.

Sun animation:

function drawSun(x, y) {
  // Sun circle
  fill(255, 204, 0); // Yellow color
  ellipse(x, y, 40, 40);

  // Animated Sun rays
  stroke(255, 204, 0); // Yellow color for rays
  strokeWeight(2);

  let rayLength = 30 + sin(frameCount * 0.1) * 15; // Creates the animation effect

  line(x - rayLength, y - rayLength, x - 60, y - 60);
  line(x, y - rayLength, x, y - 60);
  line(x + rayLength, y - rayLength, x + 60, y - 60);
  line(x - rayLength, y, x - 60, y);
  line(x + rayLength, y, x + 60, y);
  line(x - rayLength, y + rayLength, x - 60, y + 60);
  line(x, y + rayLength, x, y + 60);
  line(x + rayLength, y + rayLength, x + 60, y + 60);

  noStroke(); // Resetting the stroke for other drawings
}

Cloud animation:

// Moving clouds
  drawCloud(cloud1X, 60); // Cloud on the right of the sun
  drawCloud(cloud2X, 100); // Cloud below the sun
  drawCloud(cloud3X, 350); // Cloud at the bottom

  //Moves the clouds
  cloud1X += 1;
  cloud2X += 1;
  cloud3X += 1; 

  // Loop the clouds once they move off screen
  if (cloud1X > width + 30) {
    cloud1X = -60;
  }
  if (cloud2X > width + 30) {
    cloud2X = -60;
  }
  if (cloud3X > width + 30) {
    cloud3X = -60;
  }

........
function drawCloud(x, y) {
  fill(255);

  // Group of ellipses to form a cloud shape
  ellipse(x, y, 30, 30);
  ellipse(x + 20, y, 30, 30);
  ellipse(x - 20, y, 30, 30);
  ellipse(x - 20, y, 30, 30);
  ellipse(x + 10, y + 15, 30, 30);
  ellipse(x - 10, y + 15, 30, 30);
}

Reflection and ideas for future work or improvements:

The sketch successfully brings together elements of animation and interactivity, and overall bring out what I wanted to from the beginning a serene day in Morocco and who I am. While the current representation is visually appealing, there are several areas of potential enhancement:

-Day to night: I would love to create an aspect in which based on the time of day the sky and the sun changes color and position or even switches to a moon and the clouds change for stars.

-More similarity to me: I would love to be able to figure out how to add more details to the portrait since I do think it’s not as similar to me as I envisioned especially with the hair and other lack of characteristics that were due to not knowing how to manipulate the shapes in my favor.

Leave a Reply Cancel reply