Author: Gabriella Kaija Juhala

https://gabyjuhala.github.io/creative-coding-lab/final/

Name: Gaby Juhala

Title: Paxi….Again!

Subtitle: One more project dedicated to Paxi and all that he is.

Elevator Pitch: A website for all those who know him and all those who would like to know him. Paxi makes his last appearance of the semester.

Abstract: This website is a fun, lighthearted, and quirky project to celebrate my wonderful dog Paxi. I was inspired to create one final project about him, so that those who already know about him, as well as those who don’t, can have the unique experience of getting a little snipet into who Paxi is and why he is so important to me that I would create a whole website in his honor. The first page is a simple bio page to introduce him to the user. The second page consists of a simple game during which the user uses the arrow keys to help paxi cross the screen without being hit by oncoming logs. The final screen is a photo booth, in which the user can take a selfie with Paxi that is automatically downloaded after capture. 

Reflection:

Design and Composition:

My design inspiration for this website originated from the game Poptropica, which I mentioned in my project’s proposal. Although I certainly strayed from that I think the framework of my project has a similar concept; users go through different pages and “complete tasks” with a prize at the end, that being the Paxi selfie. I would say the biggest challenge I faced was being too ambitious at the beginning of the coding process. I originally wanted to have more than 3 pages on my site with multiple games and interactive stories, I quickly realized, after much failure, that a lot of the ideas I had were too far out of my range of abilities so I had to scale down my imagination and come up with some more realistic options. 

Technical:

The biggest technical challenge I faced was having to incorporate aspects from p5, html, and css all into one cohesive website. The specific part I struggled with the most I would say was adding sound to my website, considering the fact that I was unfortunately absent for the class during which sound was taught I had to teach myself and I faced a lot of error at first before finally downloading the correct library file for p5.js, downloading a sound that would work, linking it in all the right places throughout my code, etc. I did however get it to work in the end and I really enjoy the added level of enhancement it provides. Another thing I struggled with and did not win the fight against was adding borders around the p5.js sketches we brought into atom. I watched many videos and read lots of different articles but was not able to get it to look the way I wanted so I moved on to refine other details and because of it completely forgot that I had wanted to figure out how to do that.

Reflection and Future Development: 

Overall this project was definitely the most difficult and time consuming, as expected. As I mentioned in design and composition, it was very inspiring to see how much my project evolved from an idea to a proposal and from a proposal to full blown website. I did have to cut back on how ambitious I was being because of multiple reasons but the main two being, time constraints (being sick and finals week mayhem) and lack of complex coding knowledge needed for a majority of my original plans. If I were to do the project over I think I would definitely give myself more time so that I was able to focus on the nitty gritty details of each individual aspect of the website so that it not only is functional but also aesthetically appealing for the user. I must admit that I am satisfied with my project, the only part I wish I could’ve done better on would be the number of pages. Although I have a three page website, I wish that there could’ve been more because it would have made the website significantly more interactive than what it is now. If I were to continue working on this website in the future I would definitely want to add more pages, more user interaction through games, and more refined details overall. I think a lot of these things weren’t possible because of my skill-level but hopefully in the future this will no longer be an issue and I can refine my Paxi website to its fullest potential.

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.

Subtitle: Demonstrating the fictional contrast between the Southern and Northern Hemispheres.

Elevator Pitch: Have you ever wondered what happens when you cross the equator? Look no further! With this interactive visual program you can get a glimpse into the experience.

Abstract: 

Growing up in Ecuador there was always a sensation of mystery and amazement regarding the equatorial line passing through the capital (Quito) and whether or not there really was a difference between the North and the South. Visiting the monument numerous times allowed me to really indulge in the sights and play into my childhood fantasies. The stark contrast shown when crossing the equatorial line represents my visions of what I imagined would happen, on one side a normal representation of life on Earth and on the other, a fantastical world with giant dogs running around, huge flames dancing in the night sky, and so many other things. I chose to include a coded version of my dog Paxi in the fantastical side of the code because his appearance invokes the same feelings of wonder and mystery that looking at the monument did, wondering, “what is he thinking, how would he sound?” I also chose to include Paxi because of the origins of his name. His full name is Cotopaxi which is a mountain located on the outskirts of the city, so it was only be fitting to have included him!

Process: Design and Composition

Initially I was drawn to the idea of exporting an image into my program in order to direct my focus solely on the interactive aspects of the code but I realized that it would take away from the character of the program itself. Despite there being numerous moving parts to the project, I would argue that the most tedious part was coding the background monument itself. The monument is comprised of irregular shapes of sorts, so I was forced to meet the challenge of creating these unique shapes out of the shapes we had already learned to code. Another failed attempt was trying to use triangles of different colors, stacked one on top of the other as flames by using them alongside the noise function at a very small scale. This, however, did not create the visual I was envisioning in my head so I recruited one of my classmates Bisera to help me brainstorm ways to make the flames, actually look like flames. Thanks to her help I was able to do this by using circles instead of triangles and was able to create a visual almost exactly the same as the one I had in my head.

Process: Technical

The largest technical development issue that my project was faced with was that of slow or glitchy appearance once every aspect was implemented. I still was not able to figure out whether it is a mistake of sorts within my code or if it is simply my computer not being able to handle the number of commands being run. Going along with this, the largest compromise I had to make was definitely sacrificing the complexity of design for lack of knowledge. My proposal certainly had more complex aspects to it but because this was my first ever coding class, many of those had to have a damper put on them because despite the resources provided to us by the internet I was still not able to create them to their greatest and working potential. If I had the chance to do the project over I would definitely want to add more user interaction to keep people engaged as well providing some sort of context for my storyline. This project was based off something very niche and specific to me and my personal background so I think providing some sort of context could make the experience more enjoyable for the user as well.

Reflection and Future Development:

Overall, I thoroughly enjoyed this project and the freedom we had to take it in any direction we wanted. I would definitely agree with the fact that my proposal was a lot more complex than what my final project turned out to be like but despite this, I still really like what I was able to create. I think that the concept of my project was certainly one that could be developed into something interesting with lots of possibilities for interaction but for my project I definitely strayed away from that. I would say that the lack of interaction within my project is what I am most dissatisfied with, it seemed like everyone else’s projects had a lot more ways to interact so it felt as though mine was lacking in that department. I certainly agree with the feedback I received, specifically the one comment about not coding things the way we think we see them in our heads but rather how we actually see them when we’re standing right in front of something. I think that had I heard this before creating my code it would’ve had a lot more character and personality rather than some of the more basic and simple aspects it has now. For the future, if I get the opportunity to code more I would definitely consider adding more of the original and complex aspects I wanted to include from my proposal as well as giving it more character based off the comments I got from my classmates and critics.

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

Concept:

This is my object oriented dancer, it is loosely inspired by the shape Eve from Wall-E. The movement is inspired by the glitch of a robot and how I envision it would move if there were to be a malfunction and consequently a glitch.

Development and Technical Implementation:

The part I struggled with the most for this project was ensuring that the movements of my dancer were contained within the 200×200 box so I had to limit the movements to just slight contained back and forth along the x and y axis, as opposed to a rotating function. After a lot of trial and error (mainly error though) I gave up on trying to use the rotate function and instead just used speed and parameters to give a similar effect.

Reflection: 

The biggest thing I learned from this project was just how much more difficult it becomes to code something when you are confined to having everything in one class with no outside variables and a 200×200 pixel box to code things into. 

Overall I would say this was the most challenging project for me thus far but I definitely impressed myself with being able to figure out how to get everything to work, despite a lot of trial and error.

 

https://editor.p5js.org/gabyjuhala/sketches/4oG92GJh5

Description:

What I decided to code for this weeks mini project is my dog Paxi, although we were meant to code an imaginary creature I felt paxi fit this description because of how unique looking he is. Aside from just coding a very cartoonesque version of the picture to the left, which is of Paxi, I decided to make his legs move back and forth so in a way, it looks like he is walking or running, depending on the frame rate.

Video of Paxi in motion! 

Development and Technical Implementation: 

– Coding :

The main coding snipet I struggled with was Paxi’s ears. At first I tried to mirror the triangle so that I would later be able to make the ears rotate on Paxi’s head but I realized after a lot of trial and error that it wouldn’t look the way I envisioned in my head so I decided to make his body and legs be the moving parts instead. I still was not able to code the ears to be mirrored so I had to individually code triangles and then move their coordinates so that they would sit on the correct spot on Paxi’s head.

Reflection:

This project incorporated a lot of the code pieces we have learned so far all into one project so it was certainly a good learning experience to figure out how to make the pieces fit together to create a working code. I also really enjoyed coding my dog and bringing an image of him to life.

https://editor.p5js.org/gabyjuhala/collections/O1andx7Ev

IMG_5495

Description and Concept:

For this weeks project I thought the best approach would be to do three different sketches and tweak smaller snipets of code within them, to change the visual overall, rather than just make nine separate codes. I found it very interesting to see how one small line could completely change the way the code was carried out and looked. 

Development and Technical Implementation:

Something that I struggled with was really understanding the need to define variables later on in your code, after establishing them. For example, when wanting a code to draw in rainbow order using rgb I had a difficult time remembering to not just say stroke(r,g,b) or fill(r,g,b) but also go on to define what each of the three variables means and from where to where each one is to be coded. The other challenge I faced was with knowing when and where to use push(); and pop(); in order for the codes to actually work in the manner they are supposed to. I found that I would insert them into my code and they would either make the code not run at all or they just wouldn’t have an effect at all, so I didn’t really use these two as much as I would’ve liked to.

I definitely got inspiration from both the codes we did in class as a group and the codes shown to us by the LA’s and Fellows, specifically Sam’s. The code she showed us on Friday’s recitation was one that I found very interesting and visually satisfying so I took inspiration from that for my third set of 3 code modifications.

Reflection:

The main lesson I took from this project was that it is very easy to make drastic changes to how a code looks by just changing one or two small things in the sequence. I was aware of this prior but this project really brought the concept full circle and I was able to see how this concept comes into play through my own work and code. I also learned that it is okay to restart completely if something isn’t working well and that sometimes starting over can be more beneficial than trying to just fix the one specific part.