Author: Sara Alameri

Weel 6 | Final Midterm: Glow Up Gallery: A Interactive Artwork Collage

Concept:

My project centers around the art of collaging. I have always loved collaging and scrapbooking ever since I first learned it in preschool. There’s something inherently captivating about the act of layering pictures over each other, creating a tapestry of memories and ideas. While some might perceive it as chaotic or haphazard, I see it as a unique form of art that allows for boundless creativity. In the past, I used to create physical collages on paper, but as technology evolved, I found myself drawn to the world of digital collage occasionally.

This got me thinking about a concept: What if there was a experience where people from could come together to explore their creative side through collaging? A place where individuals could take disparate images and meld them into stunning compositions. Collaging to me feels like painting with images with a way to convey emotions, tell stories and explore the depths of imagination.

The central idea behind my project is to provide an experience  for individuals to express themselves through collaging. It encourages users to dive into their artistic side, experiment freely with various images and styles, and chose their unique choices visually. It challenges users to push the boundaries of what’s possible with collaging, fostering innovation and unexpected compositions.

How it Started: Untitled Notebook (3)

How it ended up:

Coding:

As a beginner, creating my first interactive artwork/semi-game was an incredibly enjoyable and enlightening experience, particularly since I’m an avid gamer and I found it exciting. It was a journey marked by trial and error, as I grappled with new concepts and tools that felt foreign to me even though they weren’t. The initial stages were challenging; I found myself feeling stuck and uncertain about how to bring my project to life. To overcome these hurdles, I resorted to rewatching tutorials and revisiting the basics of using certain functions and processing tools, such as online resources like YouTube videos to gain insight and clarity. Seeking help from friends was also valuable, but what pleasantly surprised me the most was discovering that my aunt, an architectural engineer, was well-versed in P5. Her assistance was a game-changer. This project taught me that perseverance, a willingness to learn, and seeking help when needed and  challenges can turn into rewarding achievements as I am proud of myself

Highlight:

I dont have a particular code that I did struggle the most with, some might have been simpe while others did require alot of thinking. But if i could choose one it would be the checkPaintbrushHover. I would say I struggled the most with part as a whole, as I was very confused on how ‘dist’ work and had to watch videos to know how to amply it, but my implications were error but I achieved it at the end

function checkPaintbrushHover() {
 
  isHovering = false;  //  assume the mouse is not hovering over paintbrush
  if (currentPage === "startup") { // if the current page is 'startup'
    // calculate the distance between the mouse and the paintbrush 
    let d = dist(mouseX, mouseY, 120 + 50, 510 + 50);
    if (d < 50) { // if the distance is less than 50 pixels
      isHovering = true; // the mouse is hovering over the paintbrush
      return; // exit function 
    }
  } else if (currentPage === "boredImage") { // if the current page is 'boredImage'
    // calculate the distance between the mouse and the paintbrush 
    let d = dist(mouseX, mouseY, 120 + 50, 450 + 50);
    if (d < 50) { // if the distance is less than 50 pixels
      isHovering = true; // the mouse is hovering over the paintbrush
      return; // exit function 
    }
  } else if (currentPage === "main") { // if the current page is 'main'
    // calculate the distance between the mouse and the paintbrush 
    let d = dist(mouseX, mouseY, 490 + 45, 425 + 45); 
    if (d < 45) { // if the distance is less than 45 pixels
      isHovering = true;
      return; // exit function 
    }
  }
}

 

Reflection:

The projects concept is interesting and fun to me, as ive never gotten the chance to do something like this before. I do agree that I couldve done something even bigger and more creative but I do enjoy and proud of what I did and I find it creative and matches the theme of interactivity in an artwork. The mistakes I encountered throughout this project will be proved to be invaluable learning experiences for me,  to make me more confident in my ability I will be revisiting  as I continue to learn and grow.

 

Final work:

 

References:

Fonts: 

Images:

Sound:

Videos:

  • https://www.youtube.com/watch?v=mVq7Ms01RjA
  • https://www.youtube.com/watch?v=1Osb_iGDdjk
  • https://www.youtube.com/watch?v=UvSjtiW-RH8
  • https://www.youtube.com/watch?v=asvnmtVjeEk         
  • https://www.youtube.com/watch?v=7A5tKW9HGoM
  • https://www.youtube.com/watch?v=bhAUIeVe0s4



Week 5 | Creative Reading Reflection: Computer Vision for Artists and Designers + Mid-Term Progress

Creative Reading Reflection – Computer Vision for Artists and Designers:

This article talks about computer vision, which helps computers understand pictures and videos using special math rules (algorithms). In the past, only experts and the military used it, but now regular people and artists can use it too, thanks to better software. It talks about examples like Videoplace and Sorting Daemon, these examples demonstrate how computer vision can be used in creative and thought-provoking ways to engage with audiences and address social issues.

In the second part of the article, it talks about simple computer vision techniques that beginners can use. These techniques include things like detecting motion, figuring out if something is there, and using brightness to find objects. These techniques are like the basic building blocks for making interactive systems that react to people or things in videos.

And it’s crucial to think about the physical environment when working with computer vision. It talks about how things like good lighting, using special lights, reflective markers, and picking the right camera parts can make computer vision work better.

A real-life example I can think of computer vision is Self-driving Cars. Also known as autonomous vehicles, they use computer vision technology along with many sensors like cameras,  LiDAR, radar, and GPS to understand and drive safely in their surroundings which also count as the physical environment of the car.

Mid-Term Progress:

My idea so far is baesd on an interactive digital collage artwork centered around a female portrait. Users would have the opportunity to add elements to the portrait, such as changing the color of the eyes, selecting different noses, or altering the mouth. These interactive dimensions could allow users to personalize and customize the artwork according to their preferences. The objective of creating a fun artwork that helps individuals express themselves and enjoy the creative process is a commendable goal. While the idea is still in its conceptual stage, it holds the potential to become an enjoyable and expressive digital art experience, especially if you continue to develop and refine it further.

This was last week when I wasn’t sure of the idea yet:

Untitled Notebook (3)

Code Design:

I still wish to attain the collage-style effect of pictures blending into each other, and I still aim to incorporate this into my project somehow

As of now, I think its better to start the project with the instructions page, even though proffesor Michael advised to start with thats hardest, but I dont think i can do that personsally. i can start with the first page and carry on with the rest.

  1. At least one shape – Most probaby added in the artwork to create a a even further collage style or added in the intsutrctions page not sure yet.
  2. At least one image – Main portrait would be images, multiple images will be added to my project.
  3. At least one sound – background music to give a vibe of a painter creating a portrait.
What I find Frightening:

I havent started with the main point of the project which is the portrait, but I do think thats the part where ill be struggling the most and as well the saving file output which will finalize the portrait, as im adding concepts and ideas that I havent done before, I have yet to look at videos to explain the ideas. In order to overcome this, I plan to attend an office hour with Proffesor Michael, and research concepts and ideas of how I can implement them.

Week 4 | Creative Reading Reflection: The Design of Everyday Things, The Psychopathology of Everyday Things + Generative Text Assignment

Creative Reading Reflection – The Design of Everyday Things, The Psychopathology of Everyday Things:

Imagine trying to open a door, use a smartphone or operate a microwave and it’s just frustratingly confusing. That’s what the text talks about when it mentions “poor design.” Poorly designed everyday objects can lead to inconvenience, annoyance, and even accidents.

The reason behind this frustration is that many designers, whether they are industrial designers or interaction designers, often overlook a critical aspect of their work: understanding the people who will use their products. They might focus too much on making things look sleek or fancy without considering how users will interact with them.

The text also mentions that even simple things like stoves or washing machines can be overly complex, with too many buttons and settings. It’s like trying to pilot a spaceship when you just want to make some toast. These are instances where designers should prioritize simplicity and make sure that their products don’t overwhelm users with unnecessary features.

Ultimately, the key message here is that designers should put themselves in the shoes of the people who will use their creations. They should understand how we think, what we find easy or difficult, and what we need. This understanding should guide their design choices to create products that not only look good but also make our lives easier, safer, and more enjoyable.

Generative Text Assignment -Coldplay Lyrics Archive:

I created this assignment while listening to a Coldplay song, which ultimately led me to immerse myself in their entire discography. Coldplay’s lyrics are profoundly relatable and carry substantial meaning, which inspired me to develop a generative text program using Coldplay’s lyrics. My aim was to demonstrate that even when lyrics from different songs are combined, they can still cohesively convey a profound and meaningful message. It may not always make perfect sense, but the beauty lies in the words and the literary artistry that they create.

I opted for a text generative project rather than pursuing data visualization because I found it challenging to formulate a compelling concept within data visualization. While data visualization can be a powerful tool for conveying information, text generation allowed me to explore a different view, working artistic expression to convey meanings and to experiment with the beauty of words and literature

whenever you click: a new starry background and lyrics generate 🙂

Code:

I developed this code with the guidance of Professor Michaels, who provided a “roses are red” poem example. However, I simplified and extended it to incorporate a CSV file containing Coldplay lyrics instead of random words. This project presented some challenges, but thanks to the assistance of a friend and my perseverance through trial and error even if doesn’t make sense, I successfully completed the code. I also took care to ensure that the code is well-structured, easy to comprehend, and thoroughly explained by adding comments to elucidate each step of the process.

  let lyric_lines = []; 

  
  // loading the CSV file that has the coldplay lyrics
  function preload() {
  lines = loadStrings("coldplay_lyrics.csv");
  photo = loadImage("coldplaymeme.jpeg");
  
}
  // set up function to set up the canvas 
  // text size and position, and if it loops or not
  function setup() {
  createCanvas(300, 300);
  textSize(14);
  textAlign(LEFT, TOP);
  noLoop();
}

  // function to generate the lyrics
  function generateLyricPoem() { 
  let lyricPoem = " ";

  // randomly select lines from the CSV
  // file that has coldplay lyrics
  let coldplay_line1 = random(lines);
  let coldplay_line2 = random(lines);
  let coldplay_line3 = random(lines);

  // construct the poem with randomly
  // selected lines 
  lyricPoem = lyricPoem + coldplay_line1 + "\n";
  lyricPoem = lyricPoem + coldplay_line2 + "\n";
  lyricPoem = lyricPoem + coldplay_line3;

  // return statement to return the lyrics
  return lyricPoem; 
}

  // draw function to draw the lyrics + star background
  function draw() {
    
  background(0); // background color to black
  
  drawStars(100); // the number of stars
    
  // new variable of generateLyricPoem
  let drawlyric = generateLyricPoem(); 
  
  // filling, displaying and positioning + (x,y,h,w)
  // the text contain in drawlyric 
  fill(255);
  text(drawlyric, 20, 20, 360, 100);  
    
  // checks if the image has been loaded
  if (photo) { 
  image(photo, 85, 120,150,150);
  }
  
}

  function drawStars(howManyStars) {
  noStroke(); // no outline for stars
  fill(255); // sets color to white

  for (let i = 0; i < howManyStars; i++) {
    let x = random(width); // random x-coordinate
    let y = random(height); // random y-coordinate
    let size = random(1, 5); // random star size
    ellipse(x, y, size, size); // draw a star
  }
}


  // drawing a new canvas to generate 
  // a new poem on mouse click
  function mouseClicked() {
  draw(); 
}

 

Reflection:

I faced numerous challenges throughout this project, often relying on trial and error to find solutions. At times, I questioned whether my approach aligned with the requirements for the generative text homework assignment. To clarify my understanding, I’ve scheduled a meeting with Professor Michael to seek guidance and discuss my progress.

 

 

Week 3 | Creative Reading Reflection: The Art of Interactive Design Ch. 1 + Object-Oriented Programming Assignment

Creative Reading Reflection – The Art of Interactive Design Ch. 1:

In “The Art of Interactive Design” by Chris Crawford, the concept of interactivity is redefined as a two-way conversation, challenging conventional understanding. Crawford criticizes the misuse of interactivity and highlights its subjective nature, emphasizing the importance of user-centric design. In a tech-saturated world, prioritizing active involvement and meaningful engagement is crucial. Interactivity, according to Crawford, empowers users, giving them a voice  in digital and outside interactions. This perspective aligns with user-centric design principles, where the user’s experience is important to aim and empower users by enabling meaningful choices.

However, I couldn’t help but think disagree with his idea of subjectivity. The nature of design and interactivity is subjective, and what one person considers effective or meaningful interaction, another may not. Disagreements can arise due to these differing subjective interpretations.

Object-Oriented Programming Assignment –  Memories:

I was inspired to create this assignment by a song called “Memories.” I’ve been captivated by the song, and the album cover served as my inspiration for this project. It led me to envision moving clouds, similar to those depicted on the album cover.

without Class:

With class:

 

Code:

I encountered significant challenges while working on this code. I faced numerous errors, and I had to go through various video tutorials and review my notes extensively to make progress. I even sought assistance from Professor Michael. Despite the difficulties, I eventually grasped the overall concept and aimed to simplify it for my future reference and understanding. Also the longest code I have ever done.

I benefited greatly from Professor Michaels’ Object-Oriented Programming class code, particularly the example titled ‘A Simple Bouncing Ball.’ This example provided me with understanding  the concept of classes and featured a very well explained code and result. Professor Michaels’ active guidance after the class to explain and show me how to add a class to my code also significantly contributed to my learning experience.

// variables for cloud
let cloudX1, cloudX2, cloudX3, cloudX4;
let cloudY;

// cloud speed
let cloudSpeed1, cloudSpeed2, cloudSpeed3, cloudSpeed4;

// variables for sun
let sunX;
let sunY;

// variable for font
let font1;

// font function / preload the custom font
function preload(){
  font1 = loadFont("GentyDemo-Regular.ttf"); 
}

function setup() {
  createCanvas(400, 400);
  cloudX1 = random(width);
  cloudX2 = random(width);
  cloudX3 = random(width);
  cloudX4 = random(width);
  cloudY = random(50, 150);

  cloudSpeed1 = random(1, 3);
  cloudSpeed2 = random(1, 3);
  cloudSpeed3 = random(1, 3);
  cloudSpeed4 = random(1, 3);
  
  sunX = width / 2;
  sunY = height / 2;

}
 

function draw() {
  background(135, 206, 250);

  // position of clouds
  drawCloud(cloudX1, cloudY);
  drawCloud(cloudX2, cloudY + 60);
  drawCloud(cloudX3, cloudY + 120);
  drawCloud(cloudX4, cloudY + 180);

  // movement of clouds
  cloudX1 = cloudX1 + cloudSpeed1;
  cloudX2 = cloudX2 + cloudSpeed2;
  cloudX3 = cloudX3 + cloudSpeed3;
  cloudX4 = cloudX4 +cloudSpeed4;

  // reset clouds when they go off-screen
  if (cloudX1 > width) {
    cloudX1 = -50;
    cloudY = random(50, 150);
    cloudSpeed1 = random(1, 3);
  }
  if (cloudX2 > width) {
    cloudX2 = -50;
    cloudY = random(50, 150);
    cloudSpeed2 = random(1, 3);
  }
  if (cloudX3 > width) {
    cloudX3 = -50;
    cloudY = random(50, 150);
    cloudSpeed3 = random(1, 3);
  }
  if (cloudX4 > width) {
    cloudX4 = -50;
    cloudY = random(50, 150);
    cloudSpeed4 = random(1, 3);
  }
  
  // sun drawing
  fill('yellow');
  ellipse(200, 400, 200, 199);
  
  
  
  // font color, text and position
  fill(255,255,255,150);
  textSize(77);
  textFont(font1);
  text('Memories',200, 200);
  textAlign(CENTER);
  
}

function drawCloud(x, y) {
  fill(255);
  noStroke();
  ellipse(x, y, 50, 40);
  ellipse(x + 50, y + 10, 50, 40);
  ellipse(x + 30, y, 50, 40);
}

// class for clouds
class Cloud {
  constructor(cloudsx, cloudsy, cloudsspeed) {
    this.cloudsx = cloudsx;
    this.cloudsy = cloudsy;
    this.cloudsspeed = cloudsspeed;
  }

  move() {
    this.cloudsx = this.cloudsx + this.cloudsspeed;
    if (this.cloudsx > width) {
      this.cloudsx = -50;
      cloudY = random(50, 150);
      this.cloudsspeed = random(1, 3);
    }
  }

  display() {
    fill(255);
    noStroke();
    ellipse(this.cloudsx, this.cloudsy, 50, 40);
    ellipse(this.cloudsx + 50, this.cloudsy + 10, 50, 40);
    ellipse(this.cloudsx + 30, this.cloudsy, 50, 40);
  }
}

// variables for clouds
let cloud1, cloud2, cloud3, cloud4;
let cloudY;

// varibales for sun and font
let sunX;
let sunY;
let font1;

// loading the custom font
function preload() {
  font1 = loadFont("GentyDemo-Regular.ttf");
}


function setup() {
  createCanvas(400, 400);
  cloud1 = new Cloud(random(width), random(50, 150), random(1, 3));
  cloud2 = new Cloud(random(width), random(50, 150), random(1, 3));
  cloud3 = new Cloud(random(width), random(50, 150), random(1, 3));
  cloud4 = new Cloud(random(width), random(50, 150), random(1, 3));
  sunX = width / 2;
  sunY = height / 2;
}

function draw() {
  background(135, 206, 250);

  // display and move clouds
  cloud1.display();
  cloud1.move();
  cloud2.display();
  cloud2.move();
  cloud3.display();
  cloud3.move();
  cloud4.display();
  cloud4.move();

  // sun drawing
  fill('yellow');
  ellipse(200, 400, 200, 199);

  // fonts color, text, and position
  fill(255, 255, 255, 150);
  textSize(77);
  textFont(font1);
  text('Memories', 200, 200);
  textAlign(CENTER);
}

Reflection:

As I mentioned, I faced significant challenges throughout this assignment, and by “a lot,” I truly mean a substantial amount. This was my very first attempt at creating a moving and dynamic assignment, and I take pride in the thought and concept behind it, as well as the progress I made in developing the code. While I did seek assistance and revisited videos and notes, it’s all part of the learning process. It might be a simple project, but furthermore I am proud of achieving it.

 

Week 2 | Creative Reading Reflection: Eyeo2012 – Casey Reas + Computer Art Loops Assignment

Creative Reading Reflection – (Eyeo2012 – Casey Reas):

Casey Reas’ video explores the evolution of serendipity and artistic expression from early 20th-century rebellious art movements to their current recognition in the art world. He delves into the complex relationship between serendipity and creative structure, emphasizing their impact on art.

Reas also discusses the significance of grid-like images in contrast to chaotic generative art, highlighting Rosalind Krauss’ critical perspective and emphasizing their importance both in aesthetics and metaphorically. He touches on how humans perceive order emerging from randomness and the concept of symmetry.

Additionally, Reas, a significant contributor to the development of Processing, explores the philosophy of art and technology. He argues that computers, although known to be organized, can surprisingly create random and chaotic art, linking these concepts to nature and science.

Personally, I share Reas’ perspective on machines being an ideal platform to explore the complex relationship between chance and order. His examples show how chance and order coexist within code and machines, even revealing patterns within chaos. In conclusion, Casey Reas’ video provides inspiring and thought-provoking insights into the interplay of chance, order, and technology in art.

Computer Art – Random Circle Poppers:

I was feeling confused and struggling to come up with a project idea. After some thought, I decided to create something simple yet visually captivating. The result was a colorful circle collage. It might seem unconventional, but it held a special significance for me. I used to have an inexplicable fear of multiple colored objects, and this project was my way of confronting that fear. Surprisingly, I found the combination of vibrant circles to be not only pleasing but also artistic. It reminded me that art can be found in the most unexpected places, even in something as seemingly mundane as a collection of colorful circles.

let circlesNumbers = 10; // Change this to the desired number of circles

function setup() {
  createCanvas(400, 400);
  background('white');
  frameRate(5);
}

function draw() {
  for (let i = 0; i < circlesNumbers; i++) {
    r = random(0, 200);
    g = 0;
    b = random(300);
    x = random(600);
    y = random(400);

    noStroke();
    fill(r, g, b, 95);
    circle(x, y, 35);
  }
}

Reflection:

 I tried to use the new “for” function we learned in class, but I had trouble understanding how to use it in my project. I did my best to learn it and include it my project somehow. I don’t consider myself an intermediate in coding yet, but I enjoy expressing my artistic ideas and learning more along the way.

 

Week 1 | Self-Portrait Assignment: Luna 🐈‍⬛

Portrait:

Concept:

For this assignment, I attempted my first-ever p5.js project, creating a self-portrait of my beloved cat, Luna. As a beginner, I relied on tutorials and lecture notes to learn how to craft different shapes and apply colors effectively.  This project marked the beginning of my journey into coding, and I enjoyed the challenge of capturing Luna’s character on the canvas.

Code:

This is my code. I’ve aimed to keep it well-organized while providing step-by-step explanations for clarity in understanding the outcome.

function setup() {
  createCanvas(400,400);
  background('orange');
 
}

function draw(){
  
  //luna's head
  fill('gray');
  noStroke();
  ellipseMode(CENTER);
  ellipse(200, 200, 150, 150);
  fill('');
  
  //luna's body
  fill('gray');
  noStroke();
  arc(205, 320, 150, 150, PI, TWO_PI);
  rect(130, 320, 150, 150);
  
  
  //luna's left ear
  fill('gray');
  triangle(160, 140, 180, 80, 200, 140);
  fill('white'); triangle(170, 135, 180, 85, 190, 135);
  
  
  //luna's right ear
  fill('gray');
  triangle(240, 140, 220, 80, 200, 140);
  fill('white');
  triangle(230, 135, 220, 85, 210, 135);
  
  //luna's eyes + puplis
  fill('white');
  ellipse(170, 180, 35, 35);
  ellipse(230, 180, 35, 35);
  
  fill('black');
  ellipse(170, 180, 20, 20);
  ellipse(230, 180, 20, 20);
  
  //luna's nose
  fill('pink');
  triangle(200, 190, 195, 200, 205, 200);
  
  //luna's mouth
  stroke('black');
  strokeWeight(2);
  noFill();
  arc(200, 220, 80, 40, 0, PI);

  //luna's left whiskers
  line(150, 200, 110, 195);
  line(150, 210, 110, 205);
  line(150, 220, 110, 215);
  
  //luna's right whiskers
  line(250, 200, 290, 195);
  line(250, 210, 290, 205);
  line(250, 220, 290, 215);

}

Reflection:

This code was a journey filled with challenges. It took time and dedication to overcome errors, and I spent hours reviewing tutorials and lecture notes. Despite the difficulties, I’m proud of the final outcome.