Author: Adeliya Aitpayeva

Concept

I decided to create a switch that would be initiated by two cups touch. I was inspired by the “Emotions & Design: Attractive things work better” reading, as it focused on the affect and the emotional connection to the product. Then I thought of the importance of tea drinking in the Kazakh culture and how there is a clinking glasses ritual that makes you celebrate the moment. I believe that this ‘Cheering’ process is the one that bonds people and creates special atmosphere in the room. So, I wanted to highlight how special this moment is by lightning up the LED when cups touch.

I just attached the foil on two cups and connected it to the wires to the foil and arduino board. I used two LEDs of different colors to portray two different people and their lightning connection.

Coding

Arduino File on Github

void setup() {
  pinMode(11, OUTPUT); // led pin
  pinMode(2, INPUT);  // foil pin
  digitalWrite (2, HIGH);
}

void loop() {
  int cuptouch = digitalRead(2);

  if (cuptouch == LOW) { 
    digitalWrite(11, HIGH); 
  } else {
    digitalWrite(11, LOW);
  }
}

I don’t think there is a particular thing I am proud of about my code because the code is similar to what we did in the class. At first of my setups of the circuit, I forgot to add the digitalWrite function in the code, which made my circuit fail. But then I added it and the cups touching worked as a switch on to the circuit.

Setup

Reflection

I think that I could further work on how the clinking of glasses is portrayed on the breadboard: maybe the LEDs don’t light up immediately, but with a pace, which will remind of growing mood of the person.

I feel like my project could present a great potential to the experience of customers in coffeeshops, where people connect with each other while having cups of coffee. It could bring coffeeshops customers higher level of interaction with the products and a desire to come back to light up another LED with their cups.

Also, I would like to work on how aesthetically wire and foil is attached to the cup/glass (again coming back to Don Norman’s work). There are different designs of cupholders, and I think I could make one that would be created from metal or have foil attached more gracefully. Moreover the wire can be connected in a more hidden way and maybe incorporated to the coffeeshop tables, so that cups are kind of wired to the tables, but are still usable.

Her Code Got Humans on the Moon

I’ve heard about Margaret Hamilton and known her for this famous photograph, but I wasn’t familiar with her work specifically. And now reading the article, I am fascinated by the amount of dedication and commitment she put in development of the software as well as the scale of her creation and it’s very disappointing that not many people are familiar how she started the software engineering as a field.

I liked that in the article it was emphasized that we should approach coding by planning out and thinking through all possible mistakes and failures that could happen in the process of using the product. No one believed Margaret Hamilton’s saying that human error could happen among astronauts, but it did in one of the most unfavorable moments for the team. In the same way I feel like this attentiveness to details and thinking of possible outcomes beforehand helps to build usable and friendly product for the user, so that when the user fails, the application doesn’t fail as well.

Also I was shocked that copper “ropes” could store words.

Emotions & Design: Attractive things work better

The main takeaway for me from this article is about the importance of the impression and emotion that the user is left with after using the product. And basically that’s the reason why Don Norman buys three teapots, because each of them provides him an affect value. This kind of resonates with the idea of arts and also the teachings of my theater class that I’m taking this semester: everything falls to what kind of emotions artwork prompted you to. Hence, one of the ways to cause feelings in the person is by beauty and aesthetics of the product. That’s why attractive things work better, when you feel great you do great.

One of the things I noted for myself was that according to the Don Norman, design preferability depends upon the occasion, context, and above all, mood, hence people buy different things to suit different circumstances, which ultimately leads to overconsumption and waste.
Also I didn’t know that our choices and affective signals are so much biologically driven, because the way I thought about it was that it cannot be impacted in any way and it was purely intuitive.

Also, I believe that many people have a conviction that attractive things are less usable. I think it is a belief that was instilled to me by my community because too bright and vivid things were less desirable to have. But, the article completely proves otherwise. Overall, the trend described by Don Norman that people want to have more pleasure and joy in life kind of describes why there is now a great development to the entertainment field and why many designers prioritize the pleasure in using their product.

Concept

I have come to the decision to change my initial idea with Piano Tiles to one that had more connection with me and my interest. And TA-DA here I go again connecting my project to favorite Friends show. The reason I switched is because I knew it would be easier to create a project that you will have fun building and also passionate about. In this project, I wanted to highlight key moments from the show through the perspective of the characters, since each of them has a different story and individuality. There are six main characters in the show, and creating a game for each of them was kind of challenging and time inefficient, so I came up with different interactive project ideas for characters. I would like to stop on each one:

1. Phoebe
   I started from creating a page for Phoebe. I still wanted to work with music in my midterm, so I chose a famous song sang by Phoebe, called Smelly Cat. I wanted to make it similar to karaoke, so I implemented an interactive element, where the user could press the specific keys to get the singing of specific lines of the song. So, there is only a karaoke version of the song playing in the background and to make the song complete, the user should add the lyrics sounds by pressing on keys. This page took me a lot of time working and correcting the code, because the sounds in p5js are pretty hard to handle. First of all, I separated the song to the lyrics sound and to the instrumental part, then I cut the lyrics sound to the lines, and assigned each line a specific key. But the hardest part now comes with the playing of the sounds.

   let soundPlayed = {
     'S': false,
     'W': false,
     'F': false,
     'T': false,
     'R': false,
     'Y': false,
     'N': false
   };
   
   
   function smellykeys() {
     // converting the pressed key to uppercase
     let pressedKey = key.toUpperCase();
   
     // logic is to play a specific sound and stop the rest
    if (pressedKey === 'S' && !smelly.isPlaying() && !soundPlayed['S']) {
       stopAllSoundsExcept('smelly');
       smelly.setVolume(0.2);
       smelly.playMode('untilDone');
       smelly.play();
       soundPlayed['S'] = true;
     } else if (pressedKey === 'W' && !whatarethey.isPlaying() && !soundPlayed['W']) {
       stopAllSoundsExcept('whatarethey');
       whatarethey.setVolume(0.2);
       whatarethey.playMode('untilDone');
       whatarethey.play();
       soundPlayed['W'] = true;
     } else if (pressedKey === 'F' && !itsnot.isPlaying() && !soundPlayed['F']) {
       stopAllSoundsExcept('itsnot');
       itsnot.setVolume(0.2);
       itsnot.playMode('untilDone');
       itsnot.play();
       soundPlayed['F'] = true;
     } else if (pressedKey === 'T' && !theywont.isPlaying() && !soundPlayed['T']) {
       stopAllSoundsExcept('theywont');
       theywont.setVolume(0.2);
       theywont.playMode('untilDone');
       theywont.play();
       soundPlayed['T'] = true;
     } else if (pressedKey === 'R' && !yourobv.isPlaying() && !soundPlayed['R']) {
       stopAllSoundsExcept('yourobv');
       yourobv.setVolume(0.2);
       yourobv.playMode('untilDone');
       yourobv.play();
       soundPlayed['R'] = true;
     } else if (pressedKey === 'Y' && !youmay.isPlaying() && !soundPlayed['Y']) {
       stopAllSoundsExcept('youmay');
       youmay.setVolume(0.2);
       youmay.playMode('untilDone');
       youmay.play();
       soundPlayed['Y'] = true;
     } else if (pressedKey === 'N' && !yournot.isPlaying() && !soundPlayed['N']) {
       stopAllSoundsExcept('yournot');
       yournot.setVolume(0.2);
       yournot.playMode('untilDone');
       yournot.play();
       soundPlayed['N'] = true;
     }
   }
   
   function stopAllSoundsExcept(keep) {
    
     for (let key in soundPlayed) {
       soundPlayed[key] = false;
     }
     // stop all sounds except the currently selected one
     if (keep !== 'smelly' && smelly.isPlaying()) {
       smelly.stop();
     }
     if (keep !== 'whatarethey' && whatarethey.isPlaying()) {
       whatarethey.stop();
     }
     if (keep !== 'itsnot' && itsnot.isPlaying()) {
       itsnot.stop();
     }
     if (keep !== 'theywont' && theywont.isPlaying()) {
       theywont.stop();
     }
     if (keep !== 'yourobv' && yourobv.isPlaying()) {
       yourobv.stop();
     }
     if (keep !== 'youmay' && youmay.isPlaying()) {
       youmay.stop();
     }
     if (keep !== 'yournot' && yournot.isPlaying()) {
       yournot.stop();
     }
   }
   

   It is surely part of the code I’m really proud of. It took me couple of days to understand how to solve a problem of repeating sounds and lagging . Some sounds would block others and code didn’t work at all. By introducing variables with boolean values, I could create a check points in the code to get what I wanted (f.e. when the key is pressed, the sound plays only ones and doesn’t repeat until it is called out again) .

2.  Chandler
   When I thought about Chandler’s character, I immediately thought about his sarcastic sense of humor. So, I decided, I want to prompt the user to ask a question by typing it in the input line, and get an answer from “Chandler’ by sending the question. So, basically how I did it was by creating csv.file with all sarcastic punch lines Chandler character could actually say in the show. I wanted really to appeal to Friends fans, so I tried to create realistic Chandler’s responses. There wasn’t much difficulty with this page.
3. Joey
   I was confused with what could I possible introduce for Joey character, apart from his immense love for food, especially pizza. I decided to tie it to his character quality of not sharing food with anyone. I wanted to represent it directly in the interaction. So on his page, the user can place pizza slice wherever they want to except place, where actually the user’s plate is located. In that way, I am implying that if they go with Joey to the restaurant, they won’t get even a slice of his pizza to their own plate. For this page, I used arrays.
4. Rachel
   I definitely wanted to work with “fashion” part of Rachel’s character. As I watching the show myself, I was always inspired by the looks that were created for this character. So, for this page I decided to make a journal layout, where all Rachel’s outfits are collected and sorted by the purposes, like casual, festive, office. This page really reminded me of the scrapbook, and I find it pretty aesthetic.
5. Ross
   What I remember brightly about Ross’ character is his lines, especially “We were on a break!” one. So, I decided to focus on that side. I decided to implement OOP for this page to introduce more movement on the screen. So basically, when a user presses on this phrase, he will get a happy face of Ross, since by this phrase he used to make excuse of his cheating. And there is another phrase “It is a big deal!”, said by his ex, which made him angry, so when the user presses on it, there are bubbles with Ross’ angry face.
6. Monica
   When I thought about Monica’s character, I was struck by many ideas, because of so many qualities that she was presented in the show. So I decided to compile them all together. I came up with the creative text that would describe one of the main activities that Monica does during the show, like cleaning, cooking, dancing, organizing.

I extensively used Canva for this assignment to get high quality images.

Also to follow the aesthetics, I chose a color palette for my project and also selected the fonts (Helvetica and Friends theme font).

Final Version

https://editor.p5js.org/aa11832/full/JSemZD8wC

Hopefully, I could convince you to watch at least one episode of Friends!

Future Improvements

• For the future improvement of the project, I would really like to work on the sound accompaniment across different pages, not only Phoebe one. I could implement sounds starting from Friends show theme song to the sound of the specific key character lines, like maybe adding the sound of line “We were on a break!” to Ross page. I believe that would enhance user’s immersion to Friends universe.
• I would also to expand my work with object oriented programming in different parts of the project. I feel like there is a room for working with different objects as a parts of the background or the main interaction.
• I would also like to transfer my project to the full screen.
• I think what this project lacks is gamification. While there are many ways to interact with the project, there are no scored activities that are usually appealing most to the user. For example there are ways to gamify the karaoke page by evaluating how exact was the user in pressing the keys to match the song lyrics.
• I would also like to improve the immersion of the user to the show environment. What I created in my project captures very shallow part of the whole Friends show. Adding more unique content and games, I can address this problem.

Concept

I honestly felt lost about what kind of project I want to create for my Midterm. I did consider card games, artworks, but finally I settled on a concept of musical game. I took an inspiration from a game that I used to play non-stop as a kid, which is called Piano Tiles.

When I played this game, it made me feel like I was creating music myself, while I was just pressing the rectangles and it initiated sounds of a song. So, I transferred this idea to my own project. I decided that I want to change the interface and introduce piano keys, so it would almost seem like a piano tutorial (like in the photo below).

I imagined that I will have only seven piano keys on the screen (hence just an octave).  And there will be bubbles that will fall down on specific piano keys, depending on the part of the song. The user will be able to press on those bubbles by pressing specific keys on keyboard that will correspond to piano keys.

I think I can assign Q W E R T Y keys on the keyboard to the piano ones, so it would feel more intuitive to the user. So, basically, when the user presses one of those keys, he will be able to pop the bubble. And importantly, user have to blow correct bubble to get a score and follow the song.

Design

As a part of the draft version, I designed piano keyboard using loops. Also, I added OOP for the bubbles, creating class, so it would randomly fall downwards. I sort of worked out on the color palette of my game. I added one song, that is stopped when you press on the screen. Furthermore, I am going to work on the opening page for the project that will introduce the game to the user, also I will set different background, score metric and adjust the movement of the bubbles according to the song.

Frightening aspects

Here is the most interesting part

• I will have to figure out how to connect pressing on keys of the piano to the blow of the circle, so it disappears. Also I have to think about whether the circle will need a specific duration needed to be pressed so it would suit to the song. If that’s the case, I will have to change circular shape either to the ellipse of rectangle with rounded edges.
• But the hardest part is to understand how to tie the music (beat and rhythm of the song)  to the falling of the circles, so basically they should follow the order of beats in the song and be adjusted to how strong the beat is or how long it is, which I don’t particularly understand how to do. Moreover, the circles should fall directly at the place beyond a particular key, which lead to more specification in the code.
• I will also need to work on interactivity of the piano key board, so it would be more intuitive to the audience that the keys should be and can be pressed in order to follow the song.
• I need to figure out as well how to calculate the score of the user if the duration of the pressing will be counted to the score. In that case it will lead to more complicated code.
• Finally, entering and exiting from the game should be planned and coded as well, so it would be accessible to the user.

Risk prevention

• To prevent risk, I looked at the works of other students, particularly with the purpose of identifying how they worked with the “score” metrics, how it appeared on the code and how the score was counted.  This helped me to get more clear on my project’s score calculation
• Moreover, I decided to watch series of lesson on sound in p5.js to figure out how to tie rhythm of the song to how the bubbles will fall down. Here is the link.
• Also, to mitigate the risk, I am planning to take an office hour once I am finished with implementing all the elements.

Computer Vision for Artists and Designers: Pedagogic Tools and Techniques for Novice Programmers

It was interesting to find out that technological applications stem not only from their technical strength and abilities, but also from suitability of the physical space to which you try to apply computer vision. Therefore, now I can see how in interactive art there are two sided contributions between the artist and computer vision’s capacity that creates a final image that the audience sees. 

As it was noted by Golan Levin in the article, computer vision creates broad opportunities for application and interaction with the real world. While it may seem that computer vision almost mimics human vision because of its surveillance practices, at its core there are very different methodologies applied to human and computer vision. While, human vision operates “generally”, analyzing and accepting any image that it sees in the surrounding environment, further generating the same level of processing, computer vision is highly dependent on what kind of image it receives and compatible it is to the vision’s capacity. Therefore, computer vision may generate unexpected processing outcomes with no consistency in the quality. Simply, the way we can help the computer to track what we’re interested in is contrasting the intended object from the background image and other unnecessary surroundings. Just like in Suicide Box project, where vertical motion was characterized as a contrasting event on the image, it was easier for a computer to identify what was tracking target.

In the socially meaningful projects, like Suicide Box, it is confusing to observe how computer vision gets just manually involved in the process of identifying vertical motion without directly understanding what kind of tragic event it gets to record. While, if we would task a specific person to perform the same job as the computer, and see how people commit suicide on the bridge, the person definitely would be left with the trauma, and it would be much harder to transform his knowledge into other forms. While, in this case, using computer vision, we are separating some subjective experiences from the process, and we are left with the intended outcome, which is easier to work on. 

Concept

Honestly, I’ve been hesitant to start working on this assignment, because words like ‘data visualization’, ‘statistics’ kind of scared me with their broadness and complexity. Therefore, I tried to at least find statistics, which followed my interests. And at this moment, I saw on my IG feed that the Friends series have debuted exactly 30 years ago, on September 22, 1994. So, I started searching for any kind of statistical data on Friends (as I am big fan of this series myself), and I found this website, which has collected data about all episodes of Friends. So the dataset contained information, on year, season, episode, title, summary, director and a rating. From that, I decided to present this information in Friends series style, so it would be actually generative text output project, where you would be randomly taken on one of the episodes info collection.

You can see my final sketch here:

Sketch

To arrive at this final point of sketch, it took me a great amount of time to work with the code line by line. You can press on screen to see data on different episodes.

Firstly, I found it difficult to generate multiple pieces from the same row. In the class, we considered situations, where there was randomly selected raw and corresponding column with an item was extracted. However, in my case, I needed to figure out on how to extract values from the same row, so the row wouldn’t be randomized differently for separate elements. For example, I can’t extract “year of production” value from random row and then put it with the “title” value from totally different row, cause they are not related. So, in my project the whole difficulty lied in fact that all elements were related and had to be extracted from the same row, meaning row should be randomized only once and this value kept for all.

Highlighted code

function preload(){
//creating a p5.table object for main data
strings = loadTable('friends.csv', 'csv', 'header'); 
}

//retrieving data from the table 
let numRows = strings.getRowCount();
//setting random number of a row of a table
rowrandom = int(random (numRows));

// in the next lines I will be retrieving different pieces of data from the same random row

//retrieving "year" from the data
year = strings.get (rowrandom, 0);
fill ('#d8ccda');
textSize (16);
textAlign (LEFT);
//presenting it on screen
text ("Year of production: "+ year, 100, 210);

In the code above, you can see how I solved my problem by randomizing number of rows in the table and then kept this value in a variable and applied throughout the code.

Moreover, I learned to use image () function, by uploading a TV screen image.

//retrieving rating of specific episode based on random row
rating = ratings.get(rowrandom, 0)
// mapping range of ratings to the range of font sizes using a variable sizetext
let sizetext = map (rating, min(float(numbers)), max(float(numbers)), 10,50)
//setting mapped text size
textSize(sizetext);
textAlign (CENTER);
fill ('#504579');
text (rating, 300, 550);

Another part of the code I’m proud of is the one above, because I used map() function to illustrate difference in ratings of the specific episodes through ranging text sizes of the rating numbers.

However, there are imperfections in the code due to poor arrangement of data. The dataset that I downloaded and converted to .csv, contained commas in the summary descriptions of the episodes and they were not separated by the “”, which led to confusion in the code, as the system identified text after comma as a next column. It can be seen that at some point of generation the text “Directed by…” starts to show greater amount of texts, which are not even related to director names. This is parts of the summary that got identified by the system as next column. However, there are also parts of .csv file, where “” are correctly placed.

Highlighted code

Overall, I am really enjoying my output. The thing I would like to work on is to correct the dataset to avoid errors. Moreover, I would like my project to be more responsive to the user, so I would like to add a function of guessing the correct season/director/year of the episode, so that it will turn to a fan quiz on Friends. I would also further work on the visuals, to add more stylistic elements resembling Friends aesthetic.

 

Reflection on The Design of Everyday Things, Chapter 1

As a kid, I would agree with the author and say the thing that drives me crazy is the glass doors, that are not at all seen at all, and I kept bumping into them, nearly injuring myself. Another design that is not settled with me is the design of the bed legs. In my room at home, I keep hitting my toe with the bed leg every time I cross the bed. I feel like they are placed too much in the corner, and it is inconvenient for people, since designers didn’t think about how the object would exist in the living space and would not cause any difficulties in passing near it. I think the way to improve is to move the bed legs a bit closer, so there would be more space between the edge of the bed and floor, so when the foot is placed somewhere near, it doesn’t clash with the bed leg. Another thing I don’t really understand is why menu’s do not have photos of the dishes, cause it makes people spend more time on choosing the meal, and I guess this problem is easier to solve by just adding real pictures. 

I think the way to introduce principles from the book to our IM projects and to the sphere fully is to create more signifiers, and consequently affordances in our designs. For me, right now my works mostly are appealing to my ideation and artistic thought, while they actually have to consider primarily communication between the user and the design. I think because of limits in my technical abilities, I am not able to consider the issues of affordable design for now. But the way to work on them in the future, is to introduce previews for the code, such as a small introduction about the project and what can you do with it, like lines “Press the key”. Moreover, I think to make the design more understandable for the user, is to create dynamic designs, which in some way will show how design works. And there are also simple things like buttons, keys, scales, that make design approachable. But, I agree with the author on a point that the more functions a design possesses and the more technological it gets, the more complex it becomes to maintain an affordable and easy flow design of a product.

Concept

Unlike previous assignment, I was more confused on what kind of visual idea I could implement using arrays, classes and OOP. But, then I was reminded my love for Disney movies, and a complete picture came to my mind and I transferred it on paper.

Being obsessed with Inside Out 2 movie the whole summer had its own benefits, and it gave me the idea of creating a storage of memories in my code. I struggled a couple of days, failing to implement the functions and array concept we learned in class to my own work. After watching some videos on  OOP in p5.js, I decided to implement the idea of random moving of circles in the form of “sense of self” that was present in the movie. In my vision, moving circles would symbolize the amount of experiences and emotional background the person accumulates, and with time it only expands.

What I’m Proud of

 function setup() {
  createCanvas(500, 500);
  
  //circle animation
  for(let i=0;i<700;i++){
    memories[i] = new Memory (250,400);
    }
}
//performing functions for an array
  for(let i=0;i<memories.length;i++){
    memories[i].display();
    memories[i].move();
  }

// creating a class for moving circles

class Memory {
  constructor (x, y) {
    this.x = x;
    this.y = y;    
  }
  
// creating a function for circles to move around randomly
  move(){
    this.x = this.x + random (-2,2);
    this.y = this.y + random (-2,2);
  }
  
// creating a function for visual of the circles
  display (){
    stroke (251, 254, 151, 80);
    strokeWeight (2);
    noFill();
    ellipse (this.x, this.y, 80, 80);
  }
}

I think exactly the “Sense of Self” thing that I implemented is the one I am most proud of, because it took me couple of days to really understand what function each element performs and what its role. So I created a class and two function for it on separate files.

First sketch

Updated version

I updated my original sketch, utilizing the concepts we covered in the class, like push(), pop(), scale () function. I created a new array to implement interactivity for changing colors of the Sense of the Self, where each color represents the  emotion from Inside Out, like ennui, sadness, fear, anger, anxiety, etc. I also moved the text line and scaled down the image of happiness to make it more aesthetically pleasing.

Reflection

Overall, I am proud of what I’ve accomplished with my code. You can see different emotions flowing into different directions, and then there is sense of self, which symbolizes character of the person and different emotional experiences. Moreover, I’ve added the sketch of the happiness image from the movie to add to the style.

However, I would like to work more the interactivity of my project. Currently, there is only way you can interact with the sketch, which is by changing color of Sense of Self. But I have some ideas of how I could develop it, for example adding memories balls to the lines when the mouse is pressed in particular location. Moreover, maybe I would elaborate on the concept of emotions, and work on more logical ways to show how different emotions evolve, like when happiness and sadness meet, there is a new emotion of nostalgia, something like that. I would also want to work on the similarity of my project to the movie’s reality, so it could be recognized from first seconds by viewers.

In my opinion, after reading the chapter, interactivity can be characterized as responsiveness and ability of the system to give a reaction in relation to the reaction given by the user (so when we say that movies are not interactive, it means that there is only reaction from the user and it is not processed by the movie itself). However, as was written in the chapter, I don’t know to what extent the features of conversation between two people are applicable as a basis of interaction features between an object and a user, because the quality will definitely differ. But, I do certainly agree that there are different levels of interaction, and their quality depends on how invested both of the actors are.  

I think the world today is more knowledgeable about interactivity, stemming from the fact that many companies try to make their products interactive. When I read about “If the movie were interactive, you might see our heroine pause and say”, it reminded me of how Netflix introduced interactive series on their platform, where viewers themselves decide what kind of action the character should do next. And the same thing actually is introduced in the books, where a reader, based on their choice, switches to specific pages to continue reading their chosen storyline. I think even though the interactivity of such products can be marked as low, it is still present there. 

Reflecting on the ideas, I thought about using buttons, as a form of interaction in my p5 sketches. Moreover, since I am the one who usually picks the style of the visual, maybe I can try making the user choose the color palette and style that they want to see as well. In that way, sketches will reflect choices the user makes.

Concept

When thinking about what kind of loops and patterns I would like to code for my assignment, I had my ideas brainstormed from floral patterns to portraits created using loops. But, I decided to choose a loop concept stylistically resembling the Dune movie. Since, the movie and its style is very diverse and highly aesthetic, I thought it would present a great room for experimentation (and also I am just a fan of the Dune sequel).

Looking through a Pinterest board, I’ve identified main elements that I would implement in my project, which was the sun and the desert. It was also important for me to work on the colors of the design.

Since, the coded image of the Dune universe was not as realistic as in the movie, I decided to add a pop art element of kind of vintage picture of the scene. So, I additionally added loop of the points.

What I’m Proud of

//desert imitation & animation
 fill ('#ea941b')
 stroke('#dd691e');
 strokeWeight (1);
   
 for(let x=25;x<=550; x += 100){
   for (let y=190;y<=510; y += 15){
     if(mouseIsPressed){
       fill(238,159,28);
       arc(x,y,50,15,PI,0)
   }
     else {
       arc(x,y,50,15,0,PI);
     }
   }
 }
   
 for(let x=75;x<=550; x += 100){
   for (let y=190;y<=510; y += 15){
     if(mouseIsPressed){
       fill(216,99,29);
   arc(x,y,50,15,0,PI);
      } else {
       arc(x,y,50,15,PI,0)
     }
   }
 }

I’ve been struggling a lot with how to visualize the dunes in the code. After experimenting with the arcs, I switched from noFill arcs to filled ones, cause they looked more on point in the visuals. Moreover, I wanted to animate the arcs, so I used conditionals to create some difference in the forms and image of moving dunes in the desert. I feel like I could accomplish my vision, even though it took a lot of trials.

Sketch

Reflection

In the future development of this project, I would like to work more on the image of the dunes, to make them more realistic and appealing (so it would be easier to recognize theme of the Dune). I think this could be accomplished through Bezier curves or experimenting with another forms of arcs. Moreover, I would work on interactivity of the project, since even though it is now interactive in some way, I would like to focus specifically on resemblance of the desert environment, such as wind moving the sand or just the sunrise and the sunset. In addition, I think color scheme could be improved, by adding more gradients.