Superstition Guide for Futurans Website | Github

Design and Composition

For the visual appearance of my website, I decided to create a title page where users can scroll down to read the introduction text before clicking an emoji button to navigate to the next page. Initially, the website had only one page with vertical scrolling, and I embedded my sketches on that page using iframes. However, I soon realized that this layout wasn’t engaging enough, so I opted to add emoji buttons for navigation. Each page features a different superstition, including a description of the superstition and interactive elements where users can engage with the sketch. Here are the 5 main pages:

 

Using sound to warn users about the moon superstition

 

 

Users can whistle to see what happens when their whistle reaches a certain decibel level.

 

Allow users to place chopsticks in an acceptable position

 

 

Walk users through the process of eliminating bad luck 

 

 

Where users can record and make their wish after finding a four leaf clover

 

Through these interactive sketches, users can gain a better understanding of superstitions and learn how to avoid bad luck, moving beyond just reading about them. I mostly used emojis since I wanted the website to look more cohesive, but I also used some images and coded some shapes myself. I also added sound to make the website more appealing and have more dimension. For some sketches, like the whistling and mirror ones, I was unsure of what it should visually look like since I originally wanted to have the background change between day and night but I was not able to have the background change randomly. For the mirror, I also wanted to use createCapture() but due to time restrictions, I was not able to figure out how to incorporate it into my sketch. 

Technical

One challenge I had when coding the moon superstition sketch was having the sound play whenever I clicked on the moon, stars, and/or aurora, but especially the moon and aurora since it was an image. Therefore, I had to play around with the placement of the image as well as the area where the sound would play when the mouse was pressed.

For the whistling superstition sketch, I added a candle whenever there were 10 or more ghosts in the sketch to repel them. In order to do this, I had to use a for loop through the ghosts array and calculate the distance between the current ghost and ghost.x and ghost.y. If the distance was smaller than candle.radius, then it would repel the ghost.

For the chopsticks superstition sketch, I had trouble with the slider being outside the canvas, so Leon helped me so I was able to position the slider in my sketch.

Lastly, for the four-leaf clover sketch, my original idea was to allow the user to drag the four-leaf clover into the book, close the book, and type their wish. However, due to technical challenges, I had to modify the functionality to let the clover stay in place once the mouse was pressed. Although I attempted to implement dragging, it conflicted with another part of the code, so I compromised by leaving the book open and the clover at the mouse position when writing the wish. Although I attempted to implement dragging, it conflicted with another part of the code, so I compromised by leaving the book open and the clover at the mouse position when writing the wish.

Another issue I encountered was detecting when the user finished typing their wish to trigger the text pop-up, which I was unsure how to achieve. To address this problem, I decided it would be a good idea to have the user press the enter button once they were done typing their wish. Then, the enter button would trigger the text to pop up. To do this, I created a variable inputMsg to get the text input. If the inputMsg is not empty and user pressed ‘Enter’ then the pop up text would appear.

Reflection & Future Developments

From my initial project proposal to the final version, there were significant changes as my original idea involved a game, which proved challenging to brainstorm. However, I pivoted to creating a website layout that I could achieve within the timeframe and with my abilities. Additionally, I’m glad that I managed to enhance my project with elements like sound, images, and AudioIn, adding depth to the overall experience.

Regarding the feedback I received in class, I was advised to explore more interactions in my sketch and experiment with different fonts. While I did consider these suggestions before submitting my project, I had to work within time constraints and my coding abilities. Despite these limitations, I believe I made the most of the resources available to me. However, if there were room for improvements, I would definitely add more interactions to make it more interactive, include more sounds (especially on the starting page), and play around with fonts to enhance the website’s visual appeal.

Credit and References 

Last but not least, I want to credit all the people who have helped me with my project to make it possible. A big thank you to fellow Kevin for assisting me with my four-leaf clover sketch, and to Professor Leon for fixing my chopsticks slider and helping me come up with the mirror concept! I truly appreciate the time and effort you both invested, as I wouldn’t have been able to finish my project without your guidance. Additionally, I used references such as w3schools to help me with my html and css part of my website and p5 references for elements such as AudioIn, images and sound. 

All in all, I really enjoyed this project as it helped me make use of all the concepts I have learned this semester. It was a rewarding experience to see my ideas come to life with the support and guidance of my professor and peers!

Description & Concept

For my Project B Website Draft, I wanted it to look like a website that traveled from the past to reach the future to save the current society when they are in chaos. At first, I went for a scroll type look for my website to give it that “from the past” look but I realized that the society we live in today does not quite have that aesthetic, so I opted for a more futuristic background for my website. My website is a click-through, where the first page is the main title and the second page is the introduction. The third page is where an individual will be able to to interact with my sketch.

Coding

One of the most important parts of my code was .container because I was able to make and define the size of my canvas. I tried to play around with the numbers until I was satisfied with things like the width, padding, background, etc. I also added added a box shadow to give my canvas more dimension.

In order to go to the next page, I had to create buttons like ‘continue’ and ‘back’. I used w3schools to make my buttons and to create the hover effect. For the hover effect, I wanted the button to change colors so under .back-button: hover and .continue-button: hover, I changed the background color to white and text to black.

One difficulty while coding was my background image expanding when I was playing around with text values. I put the background-size as cover so the image wouldn’t repeat itself. I tried to resolve the background image expanding problem but the image ended up repeating itself and creating harsh lines so I left it as cover. 

Reflection

1.  How can orderly file name convention (html files, css files, images, etc.) prevent errors when building a website? Organized file names prevent errors by making it easy to locate and manage files and avoiding naming conflicts.
2. When would you want to use classes, when IDs? I would use classes for shared styles and behaviors and IDs for unique element identification.
3. Which limitations did you run into in the styling of your page? The size of my background image expanding so I would need to contain my text within the size of it or my image would stretch or repeat.
4. How does editing and styling a text in (WYSIWYG) text editor, such as Microsoft Word, compare to writing HTML? What are advantages of each over the other? WYSIWY has a user-friendly interface, does not require coding knowledge and is quick and easy. For HTML, we have full control over the code structure and precise styling control with CSS
5. Explain how different web technologies come together in your webpage. How is writing HTML or CSS different from writing p5.js (JavaScript)? In a webpage, HTML lays the foundation by defining the structure and content and CSS enhances its visual appeal through styling. On the other hand, p5.js brings interactivity and dynamic elements, allowing for animations, games, and interactive graphics. HTML and CSS focus on structure and presentation, while p5.js expands JavaScript’s capabilities for creative coding and interactive experiences. But having all HTML, CSS and p5.js creates both engaging and visually appealing webpages.

In the distant future, where technology and progress reign, a group of forward-thinking individuals creates a website dedicated to guiding the Futurans, the humans of tomorrow. This site goes into the quirks of today’s society—superstitions. While beliefs vary, the site educates on common superstitions that some believe can bring misfortune if ignored. From sticking chopsticks and nice to steering clear of broken mirrors, the site compiles these beliefs with caution. Its goal isn’t just to enforce superstitions but to impart a deeper understanding. Should a Futuran encounter unexpected challenges, they can turn to this digital oracle for insights, empowering them to navigate their future with a mix of knowledge and curiosity.

My vision for my website will look somewhat like this:

The players will have to use their mouse to hover over certain objects on the website. Once the mouse hovers over an object related to a superstition, a text pops up that will hint the player to press on the object. Once the object has been pressed, the scene will change, and players will then need to complete questions related to the object. 

These are the scenes I plan to have:

Superstition #1:  Pointing at the moon cuts your ear. I want to have the player make a choice and based on that choice, there will be a sound effect. 

Superstition #2: Bad luck for 7 years if you break a mirror. I want to incorporate the camera into this scene suggested by Leon and maybe have player fix the broken mirror and look at own reflection if successful; otherwise,  the mirror shatters to the floor

Superstition #3: Sticking your chopsticks in rice brings bad luck. I will have the player move the chopsticks.

 Superstition #4: Whistling at night attracts ghosts. I will use AudioIn to detect noise when the player speaks. If they speak and it reaches a certain decibel, then it will be game over. 

Superstition #5: Finding a four leaf clover is good luck. I will place the four leaf clover randomly and the player will have to search for it. Once they search for it, they need to place it between the books and type out there wish.

Presentation

Description & Concept

As it’s cherry blossom season, I thought it would be a great idea to create a sketch where blossoms are falling near a lake. The main idea of my sketch is to control the movement of the petals, as well as their size and rotation, to make it look like a realistic scene of petals falling on a spring day. 

GitHub Link

Coding

For the coding part, I created 2 classes, one for the cherry blossom petals and one for the clouds. The main one is petals, where I was able to create constructors relating to particle size, speed, and the angle the petals fall at. Additionally, I also created additional arrays to store the position and rotation of the lily pads.

I wanted to make my sketch more interactive so I wanted the blossoms to repel or move away from my mouse (wind) when it was near the petals. It took a lot of experimenting to figure out what value would look the most natural. I did this in the function update, where I first mapped mouseX to the wind force (strength of the wind). Then, to create a repelling effect, I had to update this.x by adding the speed multiplied by the sin (this.angle) for oscillation in the particle’s horizontal movement and subtracting wind to make the petals move away from the mouse.

Additionally, when a petal is greater than height + 100, then this.y and this.x will be generated again and the angle will also be reset so the petal is able to reappear on the sketch but look like its a different petal.

Reflection

1. OOP, Class, and Instance: OOP organizes code into objects, where a class is a blueprint defining object structure, and an instance is a specific object of that class.
2. Effectiveness of OOP: OOP promotes modularity, reusability, flexibility, and complexity management, making it useful for code organization and putting different pieces of code together without having the variables conflict. 
3. Objects Created:The objects created were instances of a Particle class in the particle simulation code, where each Particle object had properties like position (x and y) , diameter (dia), speed (speed), and angle (angle). Methods implemented included update() for position updates an d display() for the composition of the petal and lily pads itself. By manipulating these properties and methods, behaviors like particle movement (based on wind and gravity) and screen wrapping were made possible.
4. Challenges in OOP: The most challenging part was getting used to the structure of OOP because instead of creating global variables, I had to create constructors and update them accordingly.

 

What is Net Art?

Also known as internet art, which is a form of artistic expression that uses digital technologies like algorithms, software, code, websites, bots, and images found online. It’s created, shared, and experienced primarily through the internet, pushing the boundaries of traditional art forms and embracing the unique possibilities of digital platforms. The nature of net art is constantly evolving and changing, meaning it doesn’t have a strict aesthetic. It evolves in a constant process and is able to adapt its visual language to technological and social changes.

Yehwan Song

Yehwan Song is a Korean-born, New York-based graphic designer, web designer, and web developer who creates unconventional and diverse internet spaces that foster new interactions between users and devices, including performances. She focuses on critiquing the overgeneralization of users and templated websites by creating non-generic web interfaces and performing with these websites and devices. Therefore, her work spans websites, performances, installations, sculptures, and visualizations, bridging online and physical spaces.

Her goal is to change the way people use websites and the website design industry in general, since it is currently highly mass-produced by large companies. Through her own work, she hopes to break this individual barrier of web design to encourage people to create and be creative instead of adhering to a “template”. 

Here are some of her works below:

Discussion

Yehwan Song’s work challenges the standardization of web interfaces and online experiences, highlighting the diversity of users and the societal factors influencing digital interactions. Her cultural background has driven her to seek ways to break this isolation for ignored users or cultures, aiming to broaden accessibility. The message is to encourage inclusivity and diversity in web design and the user experience. Her work also illustrates the potential of web design and how it does not have to be confined to a certain aesthetic. 

Yehwan Song values several key features of the web. Firstly, she prioritizes creating inclusive web environments that embrace minority cultures, aiming to break isolation and enhance accessibility. Secondly, she appreciates the flexibility and creativity of coding, especially in visual applications to explore coding’s artistic possibilities. Thirdly, Yehwan values the cultural diversity of the internet, engaging with diverse backgrounds to enrich her understanding of web dynamics and societal structures. 

Yehwan’s work aligns with the concepts taught in CCLab, focusing on creating interactive and visually engaging digital experiences. Her work serves as inspiration, reflecting the spirit of exploration and experimentation encouraged in CCLab. Through her work, we learn about inclusivity in web design, creative coding for artistic expression, community engagement for innovation, user-centered design for the user experience, and the importance of exploration and experimentation for continuous learning and innovation in digital projects.

Conclusion

From a personal point of view, I find Yehwan’s approach and work inspiring, especially her emphasis on inclusivity and challenging the possibilities of web design. Her exploration of creative coding and engagement made me realize the impact of her work.

Reading about Yehwan’s work has encouraged me to think beyond traditional design boundaries, consider diverse user perspectives, and explore creative coding techniques for visual storytelling. For Project B, I aim to think outside the box and embrace experimentation. Drawing inspiration from Yehwan’s work and that of other artists, I will explore innovative approaches to create an  engaging digital experience.

 

Presentation Slides

Concept & Description

For this mini project, I created an object dancer using OOP.  When dancing, there are many different motions so I tried to incorporate them into my object dancer to make it more playful. My object dancer has 5 motions, including the movement of its eyes, mouth, arms, legs and body as a whole. The eyes move back and forth, making it seem like my dancer is looking around. The mouth moves up and down, which can make it look like the dancer is either talking or singing. The arms and legs go up and down, which is the main movement of the dancer. Since the legs are going up and down, it would not be complete if it didn’t bounce, so I added a bounce to make it look like the dancer is jumping up and down. Additionally, I added a hat to give it more character.

GitHib Link

Coding

Since I had difficulty coming up with what I wanted my dancer to look like, I kept it simple and focused on the movements. For the constructors, I added this.bounceSpeed to control the speed on my dancers bounce, this.bounceRange to control the range the dancer bounced in, this.mouthY for the vertical position of the mouth, and this.mouthDirection to control the direction of the mouth.

For the update function, I had to update all of the movements, including the movement of the eyes, legs, arms, mouth and position of the dancer. For the majority of them, I used sin and frameCount to have the movement oscillate back and forth. For the mouth, I made sure that this.mouthDirection would switch directions once this.mouseY was either more than 13 or less than 5.

Reflection

The benefit of my class not relying on any code outside of its own definition is that it becomes a standalone entity that can be used in various parts of my program or even in other programs without causing conflicts or dependencies on external code For example,  when the professor combines everyone’s dancers into the same program, there are no conflicts or issues due to dependencies on external code.

The challenge in writing code that harmonizes with others’ code lies in the diverse coding styles, potentially leading to variables sharing names but serving different purposes. This discrepancy can cause conflicts when integrating code, posing compatibility issues.

Modularity in the dancer class means breaking code into smaller parts for easier management, such as my update and display functions. The update function manages the behaviors and movements, while the display function manages the appearance of my dancer. Reusability refers to using the same code for different dancers with minimal changes. For example, I can create multiple instances of EllenDancer class, each with different bounce speeds, bounce ranges, and more. These instances represent different dancers with distinct characteristics, all using the same code structure defined in my dancer class.