Author: Corinna Lin

Categories
6. Final

Final Project Reflection Post

 

 

1. Link to The Code: 

https://editor.p5js.org/yl7799/sketches/VBzrDgGxx

 

2. Description: 

This game is made in JavaScript using p5js. It is a game controlled by the keyboard. The character controlled by the player is a snake. Like the Traditional Snake Game, the player needs to use the keyboard to control the snake’s direction and let it eat the food. When the snake is controlled by the player who eats food, the length of the snake will grow. What’s different from the Snake game is that the snake needs to donate food to the children. I got this idea from our classmates’ suggestions and learned this from the game Overcooked. Like this game, the player needs to press the keyboard to send the food picked up by the snake to the four children on the corners, just like in overcooked, the player needs to control the character to serve food to the customer. When the player successfully delivers the food to the children, the score on the game will increase, so the player wants to stay in the four children’s zones as long as possible to get a higher score. However, it is worth noting that players cannot let the snake touch the boundary of the canvas. Otherwise, it will be regarded as a failure of the game. I intentionally put the children on the corners, that if the player lets the snake stay in the children’s zone for too long, it will eventually let the snake to death, to remind players do not to be too greedy.

 

3. Process Sketches:

 

4. Final Work:

 

5. Bibliography:

Overcooked, Windows, PlayStation 4, Xbox One, Team 17, 2016

Snakes, Nokia, J. Dan Scott, IOMO, 2005

 

Categories
Research Post

Research Post 4

 

Research Post 4

The three inspirational games relevant to my final project are “Get Scream Go: 8th Note”, “Snake Game,” and “Overcooked.” My final project combines the characteristics of three games. First of all, my project theme needs to serve customers in specific terrain like Overcooked. However, unlike Overcooked, the snake does not need to cook anything. It just needs to bring food to the customers. I think this theme is exciting, and it can exercise people’s reaction ability.

Furthermore, The characters people need to manipulate are like the snake in the Snake game. When people drive snakes to eat the food, they can control the snake to serve food to the customers. Snake is a familiar game for almost every person. I think this feature can attract people’s attention to our project. Last but not least, I thought it was too common to control snakes with fingers or panels. Therefore, I decide to control the snake using our voice. For example, the snake will go left when the player says left. This idea is inspired by “Get Scream Go: 8th Note.” This game uses the level of sound pitch to control the level of the target jump. I didn’t want to use the sound pitch to control the direction of the snake-like this game because I think it’s difficult to decide which pitch is in which direction, and every person has a different sound pitch.

However, voice control didn’t work out eventually. There are some unknown technical issues. Somehow the snake will sometimes go in a different direction than the player told it to. I think it would be a very unpleasant experience if it kept doing that to players. So then I decided to remove the voice control from this game. 

 

Categories
5. Classify This

Classify This Project Reflection Post

 

1. Link To The Code: https://editor.p5js.org/yl7799/sketches/rAWnxxvTm

 

2. Process Sketches

Gather Samples:

Train Our Model:

Export Our Model:

 

3. Final Outcome

No Sound:

Elephant Sounds:

Bird Sounds:

Dog Sounds:

Cow Sounds:

Cat Sounds:

 

4. Reflection Work

This work aimed to train a classifier to classify animal sounds, which included the calls of elephants, birds, dogs, cows, and cats. First, I visited the Teachable Machines website and used the sounds project to create my model. My classifier model design process went through the following three steps. Collecting samples, training our model, and outputting our model.

In this work, I collected elephants, birds, dogs, cows, and cat sound on youtube as training samples. And I learned the code of the ML5 case, then I used the ML5 library, wrote the code to classify the sound, and loaded the saved model. Eventually, I implemented the classification of calls with animals, and the experimental results proved the effectiveness of the trained model. The results of this experiment also show that the design of my current work is reasonable.

Through this work on designing software classifiers, I learned how to use the ML5 library for machine learning on the web. In addition, I also acquired the skills of creating and exploring artificial intelligence in the browser. For this work, I also studied how to use the toolkit to build a classifier. In the future, I will continue to use ML5 to explore new artificial intelligence doors actively.

 

5. The Links To My Collection of Animal Sounds On Youtube Are As Follows:

Elephant sounds:

https://www.youtube.com/watch?v=b81v8h5Fy1g

Bird sounds:

https://www.youtube.com/watch?v=Uxuo_MI27jY

Dog sounds:

https://youtu.be/o9WNsU_d87g

Cow sounds:

https://www.youtube.com/watch?v=vq6yPWM64OQ

Cat sounds:

https://www.youtube.com/watch?v=pIi5tvwpnuw

 

Categories
Research Post

Reserch Post 3

 

Image Analysis and Face Recognition

The face is presumed to be an essential element in the body of a human being, vide the fact that it is the primary feature of identifying ourselves. The Facial Action Coding System (FACS) used in determining faces is said to use forty-six dimensions of the face for recognition. The significant modifiers regarding the topic of Image analysis and face recognition include recognition, detection, and tracking, all of which connote different meanings. Detection is described as a binary classification process wherein the task involves deciding on whether something is a face or not. Recognition, on the other hand, connotes the ability to distinguish between two different faces. Lastly, tracking in so far as this topic is concerned means the liaison of both detection and recognition to help know the same face recognized prior as the same as the one recognized afterward (McDonald, 2017).

The application of facial recognition is believed to have existed for some decades. Over the past years, it has been sophisticated through various advancements to arrive at better solutions in our day-to-day lives. This includes being used for security purposes, as illustrated by the actor Denzel Washington in the movie ‘Dejavu’ (Facial Recognition: Last Week Tonight with John Oliver (HBO), 2020). The application has also since evolved to incorporate better technology used in identifying and recognizing not only human beings but also sea animals like fish.

Despite these pronounced achievements on the use of facial recognition, the issue of algorithmic bias is an issue worth concern (How I’m Fighting Bias in Algorithms | Joy Buolamwini, 2017). The computer facial recognition system is believed not to be accurate and efficient enough in recognizing faces because they all depend on the designed machine language. Consequently, this renders the use of facial recognition as being inaccurate and their legitimacy in usage such as by the security in identifying criminals may be rendered inadmissible as evidence. Through research, it is a major concern that established facial recognition software often fail to recognize black people’s faces (Richardson, 2017).

 

References

Facial Recognition: Last Week Tonight with John Oliver (HBO). (2020, June 15). YouTube. https://www.youtube.com/watch?v=jZjmlJPJgug 

How I’m fighting bias in algorithms | Joy Buolamwini. (2017, March 29). YouTube. https://www.youtube.com/watch?v=UG_X_7g63rY 

  1. (2017). Week 2 · kylemcdonald/AppropriatingNewTechnologies Wiki. GitHub. https://github.com/kylemcdonald/AppropriatingNewTechnologies/wiki/Week-2

Richardson, W. J. (2017, November 29). Against Black Inclusion in Facial Recognition. Digital Talking Drum. https://digitaltalkingdrum.com/2017/08/15/against-black-inclusion-in-facial-recognition/ 

Categories
4. The Clock

Possible Concepts of the Clock

 

The Visual Clock 1: Answer Sheet

Code: https://editor.p5js.org/yl7799/sketches/OywV5W8iz

This visual clock is very much like the answer card we use in the exam. It is painted with colors one square after another. Here, a square represents 1 minute. The program will color the unfilled square or erase the color of the filled square in seconds. A large grid has 10 small squares in a row and 6 small squares in a column. A large grid represents 1 hour. The canvas has 3 columns of large grids and 4 rows of large grids, representing 12 hours. From 0 to 12 hours, the program will color the unfilled square in seconds; From 12:00 to 24:00, the program will erase the color of the filled square in seconds. Using the background color of the canvas distinguishes between 0:00-12:00 and 12:00-24:00.

The Visual Clock 2: Wreath

Code: https://editor.p5js.org/yl7799/sketches/hiekrFxZ3

This visual clock is a bit like a wreath, which is composed of many circles. A big circle represents 1 hour. The whole canvas has 4 rows and 3 columns, representing 12 hours. There are 12 small circles on the circumference of a large circle, and each small circle represents 5 minutes. The small circle is filled with color from inside to outside. Draw a circle every second, divided into five colors, and one color is filled 60 times. Using the background color of the canvas distinguishes between 0:00-12:00 and 12:00-24:00.

The Visual Clock 3: Hanging Letters

Code: https://editor.p5js.org/yl7799/sketches/jlEN3Z-2f

This visual clock consists of 3 lines of hanging letters, 12 letters in each line, and minutes are represented by hours, minutes, and seconds. There are two-hour lines. When the letter rises, it means an hour; There are 6-minute lines and second lines. Every time a letter rises, the height of a line indicates a minute or a second. Using the background color of the canvas distinguishes between 0:00-12:00 and 12:00-24:00.

 

Reflection

In the final analysis, it is a limited ability. Self-reflection here, why can’t you do it? Sometimes I think about a function. Later I found out about the processing website. In fact, I should have a lot of it. A good example, the most interesting is actually the clock generated by the particle system, trying three hours to find that you can’t achieve it, helplessly give up.

These three cases also reverse repeatedly have been revised for a long time, such as global variables, and use, the class name, and use, what code should be released in the setup and draw function, go to another scene without resetting the background … A series of problems, simple or complex, has been solved at all, and finally.

For the font, it remembers it. Plus, I did not have this in the previous experiment. After searching the font, I found it very simple. After adding, I think, why not do a picture in the PS, only It is necessary to have two lines. After running, I have been discovered, forgot to add color to the font and then synchronized it with the system. It is a small dark flower.

This experiment has got bigger, not only about learning code, but more importantly, it is a bit solving process. Sometimes it is a weak problem, but it is also written. According to your idea, there is also a process of searching for the implementation, a step that is very tired but very accomplished.

 

Categories
Research Post

Research Post 2

The project Flight Patterns by Aaron Koblin is a masterpiece. It represents the airplane traffic over North America for a 24-hours period. Koblin explains that there are 140, 000 planes that are monitored by the federal government at any time. In his project, I have been intrigued by the way he has tracked down the entire traffic over North America. The project is able to identify all the geographical directions of the planes. Planes heading to Hawaii, East Coast, West Coast, the European planes, etc. This to me is a genius project, especially since it is almost better than what the entire federal government can really do.

Koblin explains how the interface is now explaining 21st-century humanity. He really has proven it. He has made use of the color detection algorithm to differentiate the different activities happening in the plane traffic over North America. With just a black or black/white pattern, it would be impossible for someone to realize which plane is descending or ascending. I love his choice of color to differentiate ascensions and ascensions of flights, airports, regions, etc. Choosing the color detection algorithm has made the project real and very understandable. Koblin’s artistry explains how humanity can be reflected by art.

https://www.youtube.com/watch?v=4v4XxlfVk3o 

Categories
3. Generative Thing

Generative Thing — Yufei Lin

 

Traditional Chinese Text Armories (Links to code)

 

Results:

 

Initial Sketches:

 

Reflection:

Traditional Chinese Text Armories are inspired by the word cloud, a novelty visual representation of text data. My generator will produce different traditional Chinese armories made of Chinese texts. These steps are how I managed unpredictability and control in my system. However, though these algorithms are delightfully surprising, they can often be too uncontrollable to provide the constraint-satisfaction needed for gameplay or other highly constrained artifacts.

  1. Arrange my words on the canvas! Distribution is the most straightforward kind of generative method. I have a lot of words and a canvas that I can spread them out across. My system has carefully chosen parameters that can be set for each option and the conditional functions can look compare the fixed parameters to make choices.
  2. To make my pattern look more like armor, I make my pattern symmetrical.
  3. Save the texts and colors in arrays to make the choice of texts and colors more artistic.
  4. I want to draw eyes for each generated armor. These created armories s are a bit like the face makeup in Beijing opera.

 

Bibliography:

 

Categories
Research Post

Research Post 1

 

Nicholas Felton

Nicholas Felton is a consummate infographic designer. He also doubles up as an entrepreneur and artist who translates quotidian data into significant experiences and objects (“Feltron.com”, 2021). He has participated in major projects with global influence, such as the redesigning of fakebook’s profile (“How Infographics Guru Nicholas Felton Inspired Facebook’s Timeline”, 2021). The redesigning introduced new elements in the Facebook profile, such as the cover photo, and also challenged other established components of the application such the color, topography, and map styling.

The artist believes that a successful artwork is based on four facets which are; personally expressive, visually compelling, conceptually interesting and expanded abilities (“Eyeo 2017 – Nicholas Felton”, 2021). These elements are evident in his work. The work must be personally expressive, and this has been captured in the annual reports he released first released in 2005. The annual reports consist of elegant charts, graphics, maps and graphs. The annual report is a compilation of personal tracking data based on his memory, calendar, photos and data, all of which are then designed in a unique way.

Fig 1: A screenshot of Felton’s example of the annual report.

Felton’s work is made of compelling visuals ranging from graphs, maps, images and other visuals. Translation of data into meaningful experiences and objects is the guiding principle in his work. The use of the 3D application to design better visuals is one of the things that lead to the success of his art. The use of geometry concepts to recreate things so as to come up with better visuals is used in his work. Applying geometry to recreate a map of cities like New York. Currently, the designer working on a project of recreating the periodic table as illustrated in the screenshot below.  

Fig 2: A screenshot of Felton’s project of recreation of the periodic table

 

 

Categories
2. Lost and Found

Lost and Found Yufei Lin

Artist: Yufei Lin

Partner: Ama Achampong

Description: I lost a heart locket necklace. It had a long silver chain, and the locket was in the shape of a heart. On the front of the locket was a red heart and the back was silver. 

Reflection: This assignment was exciting. We get to learn how to translate human language to computer language. Feel free to open the link below; press the mouse to open this locket necklace.

Code: https://editor.p5js.org/yl7799/sketches/fD8aZhFhb

 

Categories
1. Coding from life

Drawing From Life Yufei Lin

Interest Project!

Here is my code.