Author: 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.

Link: https://imanas.shanghai.nyu.edu/~cc5581/week14/netart/index.html

Title: Where do we go in our dreams? 

Concept

For my NetArt project, I really wanted to explore something that I was interested in, therefore, I decided to explore dreams as a concept. I wanted to be able to explore a visual representation of what dreams may look like to me personally after being inspired by a project done by Joe Hamilton.  Users are able to interact with this project by scrolling. They will also have the opportunity to explore two dreams. 

Process 

To begin with, this was a really ambitious project with the  little amount of time that we had, but I had a clear concept that I was really hoping to execute. I immediately ran into problems regarding how to even construct a canvas size that was much larger than the window itself, and to start the project at the centre instead of at (0,0). I tried many different solutions, but the solution that Professor Moon helped me with was quite simple. 

After that, I began to select the images that I wanted to use as background images, and I constructed separate containers, where there will, later on, be free-floating images added to each of these containers. These containers were defined using Javascript. 

After establishing these containers, I began to implement that background images based on a rough storyline that I had decided to follow in my head. After implementing the background, I began to select the images that I would like to use as floating elements within these containers. I cut these images using photoshop and then implemented them onto my page. It was at this stage that I realised the amount of work that I truly had and decided to cut my page in half by only allowing the users to scroll up and down and disabling their ability to scroll left and right. 

Initially I had hoped that these images would be positioned randomly within the container, however, I realised that that the page looked really unfinished, especially as I wasn’t amazing at photoshop. It was at that point that I decided to change the way that the images were displayed to the user.  

I really liked that way that Joe Hamilton had toyed with the way that some images were fixed, or scrolling at a different speed compared to the background image.  After putting a lot of effort into trying to figure out a way to accomplish this, I hit a dead end. I tried toying around with “fixed”, “absolute” and “sticky” elements but couldn’t figure out a way to accomplish the effect that Joe Hamilton achieved in his project. 

After seeking help, Professor Moon showed me how to use the mapping function in p5 which made the following process much easier. 

I had also changed the cursor to a stick man which was general enough that users can identify with the stick man as themselves, travelling through this project. This was also slightly difficult as I couldn’t get the cursor to change, however, I realised that the folder structure had to change and that I had to create and IMG folder inside the CSS folder and then create the cursor element in CSS. 

I had also initially hoped to create a popup at the end to interpret the dreams to the user, but again, due to time constraints, I was unable to do so. 

Overall, although this was an incredibly frustrating experience, it was also a very rewarding one. I thoroughly enjoyed creating this Netart project, and I only wish that I had more time to perfect and fine-tune some details that I didn’t have the opportunity to. 

Where do we go in our dreams? 

Concept:  

My net art project attempts to explore major dream themes and what they may be psychologically interpreted as. This project attempts to visualize what a specific dream theme may look like whilst the individual is actively dreaming. The user will be immersed in a ‘sleep experience’ where they will have the opportunity to explore a dream that was posted on the internet. as dreams are volatile to change, this project doesn’t aim to encapsulate the meaning of dreams universally but instead attempts to draw similarities amongst a small portion of dreams that are reported to the internet. 

Inspiration: 

My inspiration for this project came mainly from http://indirect.flights/. I really enjoyed the aesthetic of this internet art project and thought it was really interesting for the user to explore and to make sense of something that was seemingly nonsensical. I kept thinking about other things that didn’t make sense to humans. It then led me to think about dreams, and how dreams don’t actually make sense to humans most of the time, but we try to derive meanings from our dreams and to contextualize them into the events that are occurring in our everyday lives. 

My inspiration for the interactivity of our project came from http://jazz.computer/. I personally really enjoyed how I got a different interaction depending on the direction that I strolled in, and I definitely wanted to allow my users to interact with my project based on the direction that they scrolled in. 

UI & UX

The user will firstly be immersed in an experience that will imitate the conditions that put people to sleep. The user will engage in the first popup window which will allow the user to pick a song that will play throughout the user experience. Then after selecting the song, the user will be prompted to pick a bedtime activity, they will either: 

1. Scroll through social media 
2. Choose to watch a short Netflix video (probably will be a 30-second excerpt of The Office’ 
3. To read a boring book (will be a 1000 word typeface about something very boring). 

Once the user selects an option, they will experience the selected before bedtime activity and at the end of the activity, users will click a button that says ‘turn the lights off’. The background colour will change from white to black, indicating that the lights have been turned off, and the user will begin to ‘fall asleep’. 

The next scene will explore major dream themes: 

• Falling – Explored by scrolling downwards
• Being chased – Explored by scrolling to the right
• Flying – Explored by scrolling upwards
• Meeting someone from our past – Explored by scrolling to the left

The user will be led to a screen with a stick person attached to their mouse they are able to scroll in one particular direction to explore a major dream theme. The elements that the user sees whilst they are scrolling will be almost nonsensical like that of http://indirect.flights/. Whilst they will make sense together as a story, it will be purposely almost messy, and a little bit random because often times in dreams, we stand and wonder where we are, or why a particular thing is where it is. Random bubbles of text, and thoughts will also guide the user through the dream theme. The background elements will change as the user continues to scroll through the theme. 

At the end of the theme, the user will be presented with a popup box that will interpret how ‘falling dreams’ for example, are interpreted by psychologists. This will be based on actual research. After the user completes a particular theme, they are given the option to go back to the beginning to explore a different theme or to end their experience. 

Rachel Greene offers the reader a historical overview of net.art and briefly defined what it stood for “Net.art stood for communications and graphics, e-mail, texts, and images, referring to and merging into one another; it was artists, enthusiasts, and technoculture critics trading ideas, sustaining one another’s interest through ongoing dialogue”. It was important to establish the nature of net.art as placed at the intersection of a variety of different mediums, people and ideologies. Net.art was a phenomenon that began in the early 90s and Greene’s article explores its vast expansion since coupled with net.art’s potential impact upon the artistic community as artists communicate through an entirely new language.

Ultimately, Greene underlined the growth of this new artistic field “Net.art produced a very different vibe in 1999, as net.artists were seemingly empowered by their sense of pending popularity and relevance.” Increasingly, artists have used net.art as a medium to in similar ways that artists in the past have, but in more sophisticated ways such as the creation of Neomat which was constructed by New York-based artist Maciej Wisniewski. The Neomat software produces one-of-a-kind collages instead of the way normal search engines return Web pages. With it’s growing popularity, and the discovery of the freedom that comes with the internet comes multiple obstacles that artists need to overcome. 

Link: http://archive.rhizome.org/exhibition/real_estate/

I chose this project because I really identified with it personally. The artist did a few aerial drawings of addresses in Singapore and allowed the user to click on different stars (which is really cool because it makes references to the Singaporean flags) in order to access the different aerial drawings of houses and homes in Singapore. What I really enjoyed about this website is how well thought out the website is in relation to the artistic content. I think that the website manages to emphasize and contextualize the content of the website. 

This project was created by Heman Chong and includes 100 Aerial Drawings.