Final Project Reflection – Data Points – Hannah Kasak

http://imanas.shanghai.nyu.edu/~hkg245/week01/Final%20Project/

Design: As someone passionate about public health, I felt that internet art would lend itself in exciting ways to make global health issues better understood. Our attention to a disease is often not proportional to the danger it actually poses.  In response to this I represented the loss of life by specific illnesses by the appearance of differently colored polka dots. Each ailment will be represented as a different color, and the dots appear at the rate the disease claims lives. For example, every 3.35 seconds (or 201 frames) someone dies of ischemic heart disease, so every 3.34 seconds a new dot appears. The dots accumulate to illustrate the scale of each illness’s impact.

My project is partially inspired by Yayoi Kusama’s use of polka dots in many of her works, as each dot is both aesthetically and symbolically significant. In the context of my project, each dot will represent a data point, which is also a human life. I hope that by visualizing the quantity of dots (lives) over time, the users will be influenced to think more deeply about the global health issues we face.

To provide the user with more information, my project includes a key at the bottom of the window that classifies which colored dots correspond to which disease. When the user hovers over the key elements, they can read more about the specific condition. A clock in the top right of the page also allows the user to related the number of dots they see on the screen to the amount of time elapsed. 

Process: My biggest concern in making my project was making the timing accurate to represent the data. While I was initially unsure where to start, this aspect turned out to be quite simple once I procured the data and calculated the correct frame rate at which to make each point appear. 

I ended up spending the most time adjusting the visual aspect of my project. I found there to be tensions between aesthetics and readability. I wanted the meaning and information of my project to be clear so that the educational aspect would be effective, however I also didn’t want to the interface to look so casual that the subject matter would be take lightly. I spent a surprising amount of time changing the colors of the data points so that the interface would not look too cheerful, however this in retrospect made the colors difficult to identify. I also realized that the fastest appearing dot is the white “other” dot. Even though I included data from the top 12 causes of death, the sum of deaths by all other causes is still larger than any of the individual top 12. To the user however, the project is less meaningful when the largest quantity of dots have only general information available. Though it would be beyond the scope of this project and the data that was readily available to me, it would exciting to map the top 100 causes of death to provide more detail for the user. 

In creating the pop-ups to provide information for the diseases in the key, I also found it hard to decide which information to include. Depending on the disease I would describe risk factors, reasons it is particularly dangerous, and comments about who it effects most, if relevant. I think in the future I would do deeper research into each particular disease and add a link to an entire page about the disease rather than just the pop-up.

Future:  Admittedly, my project was somewhat limited by my amateur-ness at coding. Right now the project provides insight and comparisons between diseases, but not between world regions or income levels. While I feel I accomplished my initial goal, I think the project requires itself to be expanded upon in the future so as to encompass more data and better represent the inequality that lies behind the distribution of burden of disease. I would like to add a sequence of pages in which the data of low income, lower middle income, higher middle income, and high income countries are represented. This way the user would also see a large disparity in the types of disease and the death rates across income level.  I would also take into account the stylistic and conceptual recommendations I was given. To improve the view-ability, my classmates suggested that I make the key appear as a side panel and ensure that data points are contained to particular coordinates. The colors I chose, because I intended to preserve a more solemn appearance with muted tones, were difficult to distinguish from one another, making the data more difficult to interpret. As Professor Moon also pointed out, the polka dots are a missed opportunity for a more creative expression of life and death. Designs that fall and then rise as stars, for example, would create a deeper narrative while still illustrating the data. 

Week 15: Final Project Reflection – Chloe Chan

Project: Where do we go in our dreams? 

Design: 

My project definitely came a long way from my initial idea, but I definitely feel like the decisions that I made throughout the process was essential to its success.

The final project allowed users to explore two different dreams by scrolling up and down. I was hoping to express to the user how I felt that a certain dream would manifest. Each scrolled direction included three subsections where the user would scroll through. Each subsection included it’s own little ‘storyline’ as well as floating elements that moved with the scroll. The video below demonstrates the way that my Net Art Project functioned. 

Net Art Project Demo

Process: 

I began my project by trying to expand the canvas size and to allow the user to start scrolling from the centre of the screen instead of the top left corner. I think that I spent a lot of good time that could’ve been used elsewhere on trying to set up my canvas in the first place.  After unsuccessfully trying to use p5 to expand my canvas, and to use javascript to try to land the user in the middle of the page, I turned to my professor for help, and he quickly solved the issue. With this code: 

After successfully leading the user into the middle of the page, I had gotten to work trying to split up the canvas in four directions and then splitting up these sections into three sub-sections. I did that in JS: 

Initially, I had wanted the user to be able to scroll in all four directions in order to explore four different dreams instead of two. However, due to the time crunch, I was unable to execute four different ways of scrolling and try to figure out a way to stop the user from scrolling horizontally when the user was scrolling vertically (and vice versa), and therefore made a decision to cut my project workload in half by only allowing the user to scroll in two directions. 

After I implemented these different subsections, I colour-coded them using CSS in order to see the different sub-sections clearly. Then I began to implement the background image for each of the sections which I did in HTML. 

After implementing the background image, based on the trajectory of the dream that I wanted to convey, I got a better idea of how my website was going to unfold, and I began to collect images that would be later on be implemented as floating elements in my NetArt project. After finding all the images, I had to put all of them through photoshop to isolate the image from its background so that I could implement them into my website. 

Initially, I had imagined that my elements would load randomly based on how the user refreshed the button, however after achieving that, I just felt that my website looked extremely unfinished and unpolished. I then looked back at my inspiration to think of another way to execute my project. I had originally hoped to achieve the scrolling effect that Joe Hamilton (http://indirect.flights/) was able to achieve in his NetArt Project, however, I thought that this concept would be too complex. After consulting my professor a second time, I learnt that this could be achieved with the mapping function in p5. Afterwards, I was able to map the direction that each element moved depending on the section that the user scrolled past. This eliminated a very messy looking project, and allowed me to hide any flaws that I had with my photoshop! 

This is how I loaded each image onto the website (JS): 

And this is how I achieved the parallax effect (p5): 

I think the biggest discovery that I made from my proposal to my execution was that some of my ideas were pretty ambitious for the time frame that we were given, and there were a lot of things that I had hoped to do that I didn’t. 

Future:

I think that in the future I would build on some of the feedback that I was given during my presentation first. I would probably rethink my cursor, and try to maximize its representation within my project instead of just using a stick man. I would also try to expand the project in more directions so that the user could explore more dreams. Lastly, I really wanted to add interpretations of dreams by psychological professionals, which I feel like would really add to the project. I would definitely also try to clean up my project even more so that it was much more refined, I would also make the page more responsive and add more elements within each sub-section so that there was a lot more that the user could interact with. I really appreciated Dave’s suggestion to allow the user to return to the home screen by quickly passing through all of the elements instead of transporting, I think that if I were to expand on this project in the future, that would definitely be something that I’d like to implement.

Week 14: Final Project Reflection – Allie Dunnaville

Our project, titled “Dream Room”, is a website which allows users to explore my partner and I’s ideal bedroom when we were in Elementary and Middle school. Concept of the project is rooted from both of our appreciations for collage and Melissa and Doug dress-up board games we played as kids. After school, I would often go home and cut up newspapers and magazines then paste them inside a scrapbook. As I got older, my collages became more sophisticated, and I actually used canvases as material instead of scrapbooks. The idea with the board game is that you are given different props, and you use those props to dress up a figure. With these two ideas combined, we further developed our concept by creating our “dream room.” The user can interact with the room by clicking on each of the different objects within the room such as the television, radio, bed, piggy bank, chest, dog, cat, etc. Once an object is clicked on the User can see a more in-depth explanation for the inspiration and significance of the objects.

Something that worked really well with this project was the overall aesthetic and concept. Oona and I did our best to make the aesthetic as close to a scrapbook as possible. We drew almost everything by hand ourselves, and if we did not draw it by hand, we used photoshop and other apps on our phones to make the edges around the images look like they were torn. But we decided we wanted to tear everything to give our users the impression that everything was made by us and had a collage feel. Before finalizing our project, we had brief user testing. During this process Oona and I had not finished our website, but we did have all of the pictures drawn out. When we presented our idea, the most helpful piece of feedback we received suggested that we should add in a background behind the actual bedroom that would make it feel like even more of a collage. I thought adding this small element really pulled everything together aesthetically and solidified our collage concept. Lastly, something that did not work well in my opinion during the process of creating this project was when I designed the background of the bedroom. I did not have anything to go off of, and basically, I was just eyeing dimensions I thought were appropriate in order to give the room as much dimension as I could. I realized after talking with a classmate about my struggles I could have just used a 3D software on a computer to easily design the room. But, in the end, I was actually able to create it on my own without the help of additional software. Despite this method taking a longer time, I was happy with the outcome.

Given more time in the future, I would have liked to implement sound effects when you clicked on the object and also animated the objects when you click on them. As an example. I would have liked to have the bed become wavy and make swishing sounds to make the fact that it was a water bed more dramatic. Furthermore, the judges suggested Oona and I should have recorded our thought process in designing the project and allowed the user to listen to this conversation somewhere on the website, maybe the home page. Overall, I plan to continue exploring how I can improve my final project by implementing some of these suggestions and concepts in the future.

Final Project Documentation – Oona and Allie (Moon)

This post is a continuation of the last documentation, where I already went over the process of the design of the project as well as the coding process.

For a reminder, the project was based off of the concept of a “dream room”, where we combined aspects of a room we wanted to have when we were kids into one explorable space. The user could click on the clickable object, which would lead to explanations from me or Allie (or both of us) explaining why we included it and what significance it has, if any.

Feedback

Overall, everyone seemed to really love the collage design and the overall aesthetic/ vibe of our project. It was heavily based on the 2000s, as that is the decade in which we grew up, and the collage/hand drawing look they said added to the throwback vibe. I wanted to go for that look because of this, so I was happy to hear this.

The criticism we received was more like suggestions for future development of the project itself. They mentioned possibly adding more layers, or audio/video of us discussing the creation process. They also mentioned adding sound effects or animations to add just a bit more. 

Future

In the future, I really like the idea of viewing this as a platform for more to be built off of. In the moment, we wanted to add audio, but because of lack of time and sleep, it was just something my brain couldn’t wrap itself around when coding. I would definitely like to come back to audio and explore the deeper layer suggestion as well.

However, overall I am really proud of my work and what I was able to do. To design something like this and spend hours upon hours coding in the lab to see the final product and hear what everyone had to say made the sleepiness and pain felt in those moments so worthwhile xD

Comm lab was really such an amazing experience, and I’m so glad I was able to learn and create things at this level. 🙂 and that’s that

Final Project: Random Net Art | Jonathon Haley with Vincent Wu

If you haven’t seen it already, here’s the link: http://imanas.shanghai.nyu.edu/~jh5231/NetArt/index.html. I recommend opening the project in Firefox as it sometimes acts strange in Chrome (haven’t tested it in Safari)

Our project was intended to be awesome. You can be the judge of whether it lived up to the hype, but either way it was super fun to envision and create.

What we did was largely inspired by theuselessweb.com – our website, like its inspiration, is a diverse collection of short activities, each fulfilling a distinct (although sometimes unclear) purpose. Even the index.html page, commonly used to introduce and explain the project, is nothing but a redirect – it sends you straight away to one of the other pages, chosen at random every time.

But while the Useless Button redirects you to one of a number of unrelated external websites, our project’s various pages are held together by a few underlying themes, the most obvious being that you can go back and forth between pages with ease thanks to the integrated menu, as well as some shared visual themes. Of course, all the pages are also quite different from each other – the payoffs for the bubble wrap and basketball pages (that is, the thing that happens after you’ve done the thing that you’re supposed to do) apparently were quite jarring for some viewers, who thought the payoffs to be out of line with the main interactive focuses of the pages, and the overall “vibe” of the project. Still, as most audience members on the day we presented it concurred, there’s a kind of beauty in the chaos – somehow, the weirdness works.

If there’s one regret Vincent and I have regarding this project (Vincent, by the way, was an excellent partner to work with – truly an unstoppable creative force), it’s that we couldn’t add more pages to our burgeoning collection – quality over quantity for sure, but sometimes you need that quality in bulk. Though we had great ideas, not all our ideas were great ones – some of them we decided not to use. Given more time, we could have bolstered our project with even more weird random pages, but for now you’ll have to be satisfied with four. Funny enough, our original idea was stress relief, but now I think the page that provides the most actual stress relief is our Credits page.