Month: November 2021

Title: Give it Up Once More for Paxi…

 

Elevator Pitch: We’ve all seen Paxi in pictures, in code, and heard verbal accounts. Now it’s time for one last hoorah as you navigate through an interactive story with the funkiest dog to ever live!

 

Concept: For Project B I have chosen to stick with my theme of coding and creating programs that involve different aspects of my dog, Paxi. My hope is to create an interactive story which engages the audience with numerous pages, buttons to click, quizzes, and selfies; while at the same time giving the user a little more insight into the very interesting and unique creature that is my dog. The hope is to start the interactive story with a quiz of sorts, asking the user to input their name and what their basic opinions on Paxi are, as well as whether or not they would like to continue onto the next page of the story. After this there will be a series of maybe 3 different pages, each with a new activity involving the user helping Paxi to complete some sort of task. After all the stages have been completed, the user has “won” or reached the end of the story and as a result is awarded the very prestigious and rare opportunity to take a selfie with paxi himself which will automatically be saved onto their computer downloads. I am interested in using my dog as the subject of my code because of how funny I find him and his mannerisms. I hope that through my website I am able to invoke some of the same love I have towards Paxi from the users through comedic relief.  

Related Art & Practice: 

1. The first source I am inspired by for my website is actually a game that I played as a kid called Poptropica (https://www.poptropica.com/) . The general idea of the game is taking a short quiz like questionnaire at the beginning of the game, during which the user is able to pick a character and name it to their liking. The game goes on to be a number of levels which each must be completed by the user guiding their chosen character to complete preset tasks. Alongside each task and new level there are also descriptions of the scene, the characters, and the overall story which keep the user engaged. I think that part of the reason I played the game so much when I was younger was because of the sequence of events and how it was so easy to follow and play, so following a similar game/storyline is something that I think will definitely be beneficial for my website.
2. The second source I am taking as inspiration for my website design is Keith Haring’s  (https://www.haring.com/)  art. The first time I learned about his artwork was around age 8 and I was immediately in love with how it looked. The minimalist style combined with the fluid motion of his characters and the bright colors evoke such a unique and almost satisfying sensation. I enjoy how clean and neat his artwork is while still bringing in abstract principles and pops of bright color. I hope to take inspiration from his various works and incorporate them into the stylistic aspect of my website.

 

Production and Methodology: For this project I will of course be using html, javascript, and css to bring all the aspects to life on one cohesive website. For the various stages that the user must navigate Paxi through, I have specifically come up with ideas that involve already existing p5.js sketches I have created throughout the semester and only would have to tweak a few portions of the code to include Paxi as a portion of the code. The only aspect that is not something we explicitly learned how to create was a quiz using html and css but I intend on watching youtube videos or asking for guidance as I think that having a short quiz/questionaire will really start the interactive story strongly and encourage the kind of user engagement that I would like to be maintained throughout the whole project.

https://editor.p5js.org/gabyjuhala/sketches/cJUhnP7cU

For this mini project I chose to create a filter that changes as the mouse cursor moves across the screen. I chose to stick to the blue color palette because of how the abstract nature of the different pixel positions looked very aesthetic with solely blue hues rather than any other color. 

Development and Technical Implementation:

My original plan was to incorporate of of my generative visuals code from the beginning of the semester but after a lot of trail and (mostly) error I decided to change my idea because I was not going to be able to create what I had in in mind. So I instead decided to create a pixelated filter that changes from grid size 1-20 by sliding the mouse across the screen. Originally the pixels just changed uniformly, making the image appear more blurry but after changing the multiplier value in the index formula from 4 to 6 I was met by a completely abstract filter that changed drastically as the mouse slides across the screen. Although it is not a traditional filter you find on many apps, I really enjoyed how the colors changed and almost jump off the screen because of how sudden the changes occur when sliding the mouse across.

Reflection:

This project was definitely more error than a lot of my previous projects and it was the first time I completely had to change my idea and start over from scratch after working on the original code for an extended period of time. Although I did have to start over with a new idea in mind, I was able to find a very unique filter through a simple mistake that I ended up liking more than my original plan. 

Development and Technical Implementation:

The part I struggled with the most was figuring out how to insert an image as my website’s background. After watching lots of youtube videos, scouring the slides, and asking classmates I was able to get it to work. Bringing this all together was also challenging, having to switch between javascript, html, and css took some getting used to but I think this project helped me a lot with that aspect of the new things we have been learning.

Reflection:

This project was the first time we were really implementing all the things we have learned this semester so although it was challenging to bring all the different pieces together and get it to work, it was a good learning experience. I would say the learning curve started off pretty slow but once I got the hang of it i was able to get the rest of my code to work all together in one cohesive website.

https://gabyjuhala.github.io/creative-coding-lab/miniproject10R.html/

For this mini project I decided to create a website solely dedicated to my wonderful dog, Paxi. There is two pages on the website, the first is a brief summary page of Paxi’s backstory, with clickable links that lead you to various sites to gain a better understanding of Paxi and his breed. The second page on my website is a simple yet moving gallery of Paxi’s best moments throughout his 8 years of life.

Development and Technical Implementation:

I thoroughly enjoyed this mini project as I felt we were given freedom to create something we truly connected and related to into a completely tangible website. This being our first project using HTML and CSS I found it surprisingly easy to adapt to the change and might even say that I actually enjoy using these two languages more than javascript. The one area which I didn’t find difficult necessarily but seemed to be the most detail-oriented was the border and background details around the paragraph on the first page of my website. I attached a snipet of the code above and you can see there is a few different aspects that went into making the paragraph of description stand out from the rest of the site.

Reflection:

I definitely think this is my favorite mini-project to date, I enjoyed the freedom and tangibility of the process and it was very gratifying to be able to create something which we use in our everyday lives, websites. Although my website wouldn’t have much use to anyone other than me it was still a very fun process and I definitely felt like I learned a lot through the in-class examples and freedom of trial-and-error we were given.

https://drive.google.com/drive/folders/1ImnIwKsFAtt830tRSM08XjN2EWt99b1A

• •  The two “ill effects” of the web that were described in the reading are “Large social networking sites are walling off information posted by their users from the rest of the Web. Wireless Internet providers are being tempted to slow traffic to sites with which they have not made deals.” One example of these “ill effects” having an impact on my life is when very specifically targeted ads for something I briefly looked at on a website will appear on my social media feed the following day. This type of marketing isn’t subtle and instead of making me want to buy the item it almost scares me because it just serves as a reminder that everything I do on the internet is being recorded. Another example of my personal experience with these “ill effects” is when there was the huge US governmental quarrel over the possible loss of net-neutrality and although it wasn’t something that ended up happening, the fear of it made me learn about what it was and what the loss of it would entail.
  • Universality and Isolation: Universality is the ability for people to be able to put anything they’d like on the web without any restrictions based on things such as type of computer, internet company, language spoken, etc. Isolation on the other hand is when a piece of information does not have an open URI, meaning that it closes your information off from the rest of the web and limits usage to only those with access to the site. These two terms are in a way opposites because one represents the openness and wide accessibility, while the other represents the closed off side. 
  • Open Standards and Closed Worlds: Open Standards is the concept of free range to use royalty facets designed by experts. Closed Worlds is the use of a specified and closed off name that means only the company or entity owning said site can have access to the information posted within. These two terms similarly to the previous two are seen as opposites, one allows for free reign and access while the other closes off access to only those holding the reigns of the website.
  • The Web and the Internet: The web is a program/service that uses the Internet to function. The web is what contains all the sites which need internet in order to function. The internet however is the service which all web users need in order to function. The web is dependent on the internet to function but the relationship is not reciprocal. 
  • “the Web in the future”: A few elements of the author’s ideas of web in the future include, open data, social machines, web science, and free bandwidth. The two aspects of his ideas of web in the future that I have personally experienced are those of social machines and free bandwidth. Social machines have come to play a huge role in daily life for me, especially since moving to china, apps/sites such as dian ping help make decisions about what places to visit based of other people’s experiences. Free bandwidth, to some extent has been expanded greatly in China, I have noticed that everywhere I go here, even whilst traveling to rural parts of China, I still continuously have unwavering cell service.