Project Proposal (Project B)

Title: Glimpse of my life

Description: My idea is to take some of my favorite photos and videos that I have in my photo album and create a gallery-like website. The moment you open the website, you will see a small tv screen in the middle of the website. The tv will play some of the pictures and videos that I’ve chosen. There will also be a title located in the top left. The About section will be on the top right side of the web. Users can click on it and it’ll lead them to a new HTML page that has my information.  The interactive part of this web is the background. The background will be interactive for the users to play around with. While the tv is playing, the background will also slowly be changing between day and night. When the background is nighttime/black color, users can click anywhere using their mouse, and there will be stars appearing ranging in different sizes. Some stars will be big while some will be small. When it’s daytime/ white color, users can click anywhere on the background and clouds will appear in different sizes. Users can also move the clouds around.

Reference:

89 steps: http://89.lossur.es/  I got my idea from this website. The moment I opened the website, a video starts playing and I find it very interesting.

Sound: https://www.patatap.com/I find this interactive way through sound and keyboard really interesting. I might include this in the project if time allows.

Reading #3: New Media Art: Introduction

My understanding of new Media art is arts designed and produced by technology,  electronic media technologies, computer animation, digital art, interactive art, sound art, Internet art, robotics, 3D printing, and basically anytime where arts and creativity collide with technology. Whereas, the author sees new Media arts beyond just technology. It is also a movement, a cultural form. In the reading, the author stated, “New Media art can be seen as a response to the information technology revolution and the digitization of cultural forms”. The reading was published in 2007 when Apple just started. I feel like Apple really plays an important role in new media art, especially in digital art. I don’t know much about digital art but I feel like since the iPad and iPad pencil was released, a lot of people can easily do digital art anywhere and anytime. With just an iPad and an iPad pencil, art can be made everywhere. Maybe in 2007, new Media art is just a new concept. However, as technology is getting more advance, Media art has gotten more and more attention.

In 1998, the New Media artist duo Thompson and Craighead created a sampled video game called Trigger Happy. The format of this game is similar to the early arcade game. Jon Thomson and Alison Craighead are both artists that make artworks that look at live networks and through their artwork, we can tell how media arts are changing the way we understand the world around us. Trigger Happy” reflects, and comments upon, the electronic environment in which we live, work and play”. They look at the “relationship between hypertext, authorship, and the individual”.

Another piece of new media art called Rebirth of a nation is created by Paul Miller in 2002. Paul Miller also known as DJ Spooky, That Subliminal Kid is an influential DJ, writer, and artist. The artwork is “a series of live performances in which he reworks D.W. Grith’s controversial 1915 film Birth of A Nation while assembling an improvised soundtrack out of layers of sampled sound”. This is an example of artists reflecting upon art history in their work, and updating projects from the old era using a new technological environment and media to create this new media art that represents the new technological era we live in.

Reference: http://www.thomson-craighead.net/thap.html

Mini Project p5.js sketch

Link to the website: https://jiawen21.github.io/CCLAB_fall-2022/blank_p5_template/

Brief Description: This p5.js sketch is one that never made it to the official submission. This was supposed to be for another mini-project a few weeks ago but I ended up choosing another sketch over this. The theme of this website is black and white because the p5. sketch is black and white, so I feel like a white and black website would really fit the overall theme of the sketch. The reason why the embedded link isn’t in white is because no matter what color I tried changing it to, it’s just forever in purple color.

Reflection: 

  1. Naming files can help keep the folder organized. Inside the folders, there are many files. We can keep the HTML code in one file and the CSS code in another file. When it comes to images, we can put them in the same folder so that it’s easier to find them whenever we need to use the images again. Also, when we need to src the images, we can go to the same folder to find the images so that not only is it time-conservative but also everything is in one place.
  2. I use ID when I want to apply unique features for one certain part of my website. I use class when I want to reuse that feature again so that I don’t need to rewrite the code again and again,
  3. I’m not sure if this is a limitation but there is a black border on the top. It seems like the coding won’t affect the black border there.
  4. In HTML, I can give it an exact position of where I want the image to be. In word editor, I need to move my mouse to move the image but it wouldn’t give me an exact number for the position the image is at. HTML is more number precise but it takes some more time while word editor is less number precise and takes less time to move the images around. In addition, I can alter the text in a more creative way in HTML whereas, in the word editor, I can’t do that. 
  5. P5.js is a more interactive way for users to play, while HTML and CSS are more visual ways to play with.  It’s not interactive but when p5.js, HTML, and CSS are combined together, it creates a really fun interactive way for users to interact with. 

Reading 2. Long Live The Web

Examples of ill effects could be when I search something up on google and then I go to my social media and see relevant ads to things I just looked up on google. It gives me this feeling that I am being stalked and that my information is being leaked to big companies as they can trace down all my interest and what my life is like. Another example could be government knowing exactly which location I’m at. In China, when I use the metro app to take the subway, they track my location down so they could calculate how much I have to pay for transportation. I don’t like it when apps track my location because I feel like they know everything I’m doing especially what places I’ve been to.

The URI is the key to universality. Links help turn the Web’s content into something bigger where everyone around the world can have access to it. The isolation occurs because each piece of information does not have a URI. Connections among data exist only within a site. So the more you enter, the more you become locked in.

Openness is when you can build your Web site or company without anyone’s approval. Open standards also foster one’s imagination. I think Facebook is an example of web openness because mark Zuckerberg created Facebook on the web without anyone’s approval. Close world is when we can’t send a link to someone else to see. You are no longer on the Web. For example, when I use an app instead of a website is when it an example of a closed world. Keeping it open is a way to let more people invent new services

The Web is an application that runs on the Internet. The Internet is a network that puts information into packets and ships them among computers through wireless media. I’m not sure, but I think p5.js could be considered as a web that runs on the internet. Once I copy and paste the link, it could be shared among everyone on the internet. I consider it an open standard. Anyone can put information or change the code.

Some future progress that the author envisions are open data, where putting data on the web and linking them and connecting people everywhere around the world. The author also envisions a future of social machines, where people use social media to share their thoughts and life. There is also the future of web science and free bandwidth. Web science reveals intriguing insights into the Web’s design, operation, and impact on society. Whereas, free, very low bandwidth service could improve education, health, and the economy in these regions.

I think we have already achieved open data and social machines. There’s data everywhere on the web and people are constantly putting new data and changing the data every day. We have also achieved social machines because social media is everywhere on the web. We have restaurant reviews on the web and people can even reserve seats on the web. For web science, I don’t know much about it but I feel like if it’s talking about web design, then it’s definitely becoming bigger since many people are pursuing web design as their career choice. Also, a lot of places are providing free bandwidth but there are still some poor countries that don’t have it. For places that have better bandwidth, students can learn online and gain more knowledge of the outside world. It helps to expand so much knowledge to poorer places, offering them a lot more opportunities.

 

 

Everything Anything

                                                     Flower Meadow   

Link to code: https://editor.p5js.org/jiawen21/sketches/KIzy3WUZF                                                  

The Elevator Pitch: As the day changes to night and night changes to day, everything changes except for the four lonely-looking flowers. We have four flowers in a meadow, each with its own unique color, with its petals rotating while yellow-looking snow particles fall down as the day changes to night

Abstract: The concept of this project is to create a garden of flowers.  Users can interact with the product by clicking the mouse to change the day into night or night into day. Users can also duplicate more colorful flowers by using a mouse press and every time when it’s refreshed, there’s a different color. As the four flowers stand there looking lonely, we also got yellow-looking snow falling down from the sky. When it’s at night, the yellow snow looks like fireflies. A garden full of flowers often reminds me of fireflies flying around and their chirping sound,  which creates this peaceful feeling, thus I hope to recreate this feeling in my project.

 

Day

As the environment is changing and the particles are getting less and less until there is none, the only thing that doesn’t change is the four flowers rooting in the soil. In a way, the flowers could represent almost all the students in NYUSH. Everyone in NYUSH, whether it’s the students or faculties are constantly adapting to different environments, such as a new country, culture, language, food, or a sudden covid lockdown. Everything around us is changing and happening so fast and we’re in the midst of everything, just like the flowers. As everything is happening, the flower still stays so strong, so I think we as humans should be like those flowers.

Part 2

The process started out with one flower. One flower became two and then three and it went to four. After that, I added soil to the ground because the flower garden needs soil. The reason why the soil is black and not brown is that I feel like black fits the overall color theme. I added random colors to the flowers because I didn’t want to restrict the flowers to just one color. When I think of flowers, I think of many colors so I feel like a rainbow of colors fits the concept more. The background for daytime is blue instead of white because I feel like the white background is too bland, and the half-moon is white so if I did a white background for daytime, the half-moon wouldn’t appear because it’s also white. In the beginning, there was no change between day and night. It was just two clouds where users can move the clouds. However, I feel like the interaction is kind of boring so I added the day and night so there is actually a time frame involved in the process.

Throughout the process, I definitely learn a lot about class functions and interaction that I could do with keypress and mouse press. I didn’t do key pressed because I find the key pressed kind of annoying. If there’s a key pressed, I usually have to find the key first and then pressed it, which I find the experience not convenient. With the mouse pressed, it’s much easier and I don’t need to spend time looking for a key to press. If I had the chance to redo it again, I hope to add more flowers or add some petals to the flower’s stem so the stem doesn’t look very lonely with just one stick. I also would like the flower to sway back and forth but I feel like this process would be a bit challenging for the coding knowledge that I have right now. A discovery that I encountered along the way is accumulating particles. I didn’t plan that and I discovered it by accident when I was trying my code out. I find that very interesting and I hope to do more of those functions in future projects.

What I had originally imagined in mind compared to the final product that I have is somewhat different. What I had originally imagined in my mind is a place full of sunflowers and adding time function so the sunflower could grow as time goes on. I also wanted to make the sunflower seeds and petals fly around as the wind sway the flower back and forth. However, as I started coding, I realized that coding would be a hard task for my current coding skills that I have, so I decided to just do an easy version off the idea. Originally, I didn’t plan to do the changing from day to night, but I got some suggestions during the interaction day to add some background, so I added day and night to it. I really like how it turned out. The part that I’m not satisfied with is the flower because I feel like the flower isn’t very interactive. Last but not least, the feedback that I got is very helpful.  The feedback I got led me to think that not only does the project need to look good for the users but more importantly, it also needs to be user-friendly so that the user finds it comfortable, fun, and easy to interact with.

Images during the process: