Project Link and Brief Description

Here is the GitHub website link: https://cassiehuang72.github.io/CCLab/project-b-draft/.

I’ve designed the Project B website using the box model to create a clean and organized layout. At the top of the site, there’s a compact navigation bar that allows users to easily navigate between three distinct sections: Home, Canvas 1, and Canvas 2.

• The Home section serves as the introduction to Project B. Here, visitors will find a concise overview and description of the project, providing context and background information.
• In the Canvas 1 section, I’ve incorporated an engaging p5.js sketch. The canvas is thoughtfully placed within its designated box, creating a visually appealing and centered presentation. Accompanying the sketch, there are detailed descriptions to provide insights and context about the creative elements.
• Similarly, the Canvas 2 section features another captivating p5.js sketch enclosed within its designated box. Users can explore the interactive canvas, supported by informative descriptions that enhance their understanding of the sketch.

Demo

home page

subpage 1

subpage 2

Coding

The main body of the website is constructed by applying the box model principles covered in our class. A notable skill acquired involves the implementation of a navigation bar, showcasing a proficiency in structuring and organizing content effectively.

code snippet

Reflection

• Orderly filename conventions help organize files logically and make it easier for me to find and manage different components. For example, using a consistent naming convention for HTML files, CSS files, and images prevents confusion and reduces the risk of linking errors.
• Classes and IDs
  Classes are generally used for multiple elements that share the same style. They allow you to apply specific styles to a group of elements. IDs, on the other hand, are unique identifiers for individual elements. IDs should be used when an element’s style or behavior is significantly different from that of other elements. However, IDs must be unique within a page, whereas classes can be used for multiple elements.
• WYSIWYG text editor vs. HTML
  • WYSIWYG editor:
    Pros: User-friendly, no coding skills required, easy formatting and styling.
    Cons: Limited control over text styling; possible compatibility issues between different editors; may not be suitable for complex page designs.
  • HTML:
    Pros: Provides complete control over code structure, ensures concise and semantic markup, is better suited for complex and customized designs, and provides greater control over the ordering of filenames. Cons: Coding skills are required.
• Web Technologies in a Web Page
  • HTML and CSS are primarily used for building web content, structure, and style. To be more specific, HTML defines the structure and content of a web page, and CSS styles HTML elements, defining layout and colors.
  • p5.js is used to create dynamic graphics and interactive content. It focuses more on interactive visual elements than the structural and presentation aspects of HTML and CSS.

Project Description

Project B was titled “Messages of Confusion,” and it will delve into the interesting dynamics of how messages evolve by being passed from one person to another. The inspiration for this project stemmed from the intriguing Megaphone Game, a team activity where participants communicate a sentence solely through sound effects and gestures. To visually represent the evolving nature of communication, the project incorporated elements reminiscent of chaotic pixels, triggered by the camera detecting facial and mouth movements. These disorganized animated pixels materialize on the screen as the mouth moves, serving as symbolic representations of the inherent visual distortions that accompany the communication process. Complementing this, the audio element employs speech-to-text technology to provide a concrete demonstration of information transformation. I’ll first start with a mini project where participants can read some provided instructions to control the appearances or movements of the provided object. In the process, participants may be able to see how hard it is for the computer to execute the wanted instruction. Furthermore, there will be a part where the participant’s voice message undergoes successive transformations, first translated into text by the computer and then converted back into speech in the robot tone, with each transformation displaying subtle changes. As a result, “Messages of Confusion” thus delivers an engaging and thought-provoking encounter, seamlessly blending visual and auditory elements to underscore the intricate and sometimes unpredictable pathways through which information navigates in the realm of communication.

Additional Link:

• Here is the link to the Project B Proposal Presentation: https://docs.google.com/presentation/d/10T646xGOYN8xgsn6BFs0Bdcet7jlWxzNdGZwJIwg0tY/edit?usp=sharing
• Here is the Visual Prototype:
  

  Visual Prototype 

• Here is the link to the Project B overview: https://docs.google.com/presentation/d/1fKSRw3u4y-8Va4JPhaq73f4Rc9s2ZuGk6N_nerjl98k/edit#slide=id.p

According to the reading, new media art is a type of art that uses emerging media technologies to investigate possibilities on the levels of culture, politics, and aesthetics. It was included in more general categories, such as Media Art and Art and Technology, which included techniques like Electronic art and Video art. The essay focused on how New Media artists used these tools for experimental or critical aims to turn them into art media.

Fast forward to 2023, New Media Art has undergone significant evolution. The spread of new digital platforms and technologies, such as social media, augmented reality, virtual reality, and AI-driven applications, is the most noticeable shift. These advancements have given artists greater creative freedom to create immersive and interactive works. Furthermore, the combination of blockchain technology and NFTs has opened up new possibilities for the production, marketing, and verification of digital art.

This evolution has also reshaped the dominant themes in New Media Art, with a heightened focus on issues such as data privacy, and the societal impact of technology. It has become clear that new media art is a powerful medium for bringing these subjects to light and encouraging critical conversation. At the same time, the domain has adjusted to the emergence of streaming services, podcasts, and the worldwide accessibility of digital information. In order to produce hybrid forms of art, artists now combine digital technologies with conventional artistic processes.

I have selected and discussed the works of two artists who are mentioned in the text below. The 2011 work “SCRAPYARD CHALLENGE” by Katherine Moriwacki is a prime example of the theme of audience interaction in new media art. In this program, volunteers are given a time constraint to construct robots out of recycled items, and then these homemade robots must compete in interactive tasks. In her work, multidisciplinary artist Moriwacki—who is skilled in both engineering and art—integrates technology, art, and education. By erasing traditional lines between artist and audience and encouraging active participation, “SCRAPYARD CHALLENGE” gives participants the freedom to mold their experiences according to their imagination and decisions. It represents the development of audience participation in New Media Art, where viewers are an essential part of the creative process.

On the other hand, “Alter Stats” by John F. Simon (1995–1998) demonstrates the conceptual quality of New Media Art prior to 2000. Simon is renowned for his innovative use of computer programming and algorithms to create art. “Alter Stats” visualizes web traffic data by translating online visitor hits into a three-dimensional graph. It anticipates the data-driven and conceptual direction that New Media Art would embrace in the 21st century. Drawing inspiration from the historical antecedents of Conceptual art, which prioritize ideas over tangible objects, Simon’s work exists as a conceptual construct, emphasizing the significance of the underlying concept rather than the visual representation. It aligns with New Media Art’s inclination to explore the conceptual possibilities of technology, data, and interactivity, foreseeing the growing role of data and digital information in contemporary art and culture, particularly in the context of big data and the digital age.

Project Link and Brief Description

Here is the p5 link: https://editor.p5js.org/CassieHuang/sketches/honE1Rbrw.

In this mini project, I created an interactive particle system using OOP that features colorful bubbles of varying sizes and speeds, each with its own unique appearance and disappearing time. Additionally, the user can change the wind direction using arrow buttons to influence the bubble movement.

Demo

Coding

Bubble Appearance:

I initially attempted to give the bubbles different reflected colors by assigning their color properties individually, like this. However, after exploring some references, I discovered an alternative approach using a conical gradient to create a more dynamic and visually appealing edge color for the bubbles. This conical gradient method provided a smoother transition between colors, enhancing the appearance of the bubbles.

Bubble Removal:

• To manage the removal of bubbles from the canvas when they reach their predefined disappearing time, I implemented a mechanism that automatically detects when a bubble’s time limit has been exceeded. In order to achieve a natural and gradual “break” of bubbles, I created a checkDuration function inside of the Bubble object. This function helps me to remove bubbles from the array once they’ve reached the end of their lifespan, ensuring a seamless visual effect as they disappear.
• What’s more, to ensure the fluency of the animation, I limited and controlled the number of objects in the bubble array.

Interaction Between Bubbles and Wind:

I created a method within the Bubble object called updateDirection(other) to control the interaction between bubbles and the wind direction. This function allows the bubbles to adjust their movement based on the current wind direction. Depending on the wind’s direction (up, down, left, or right), the bubbles adapt their motion accordingly. 

Reflection

• OOP Understanding: Based on the reading and the project, I learned that OOP is a programming paradigm that revolves around the concept of objects. Objects are instances of classes, and they encapsulate both properties and functions. And a class is a template for creating objects. It defines the structure and behavior that its objects will have. An instance is a specific object created from a class. Each instance has its own set of attributes and can invoke the methods defined in the class.
• Effectiveness of OOP: OOP makes code more modular because code can be organized into classes, making it easier to understand and manage. Also, classes can be reused in different parts of the program or in different projects.
• Objects in the Bubble Project:
  • Bubble Class:
    • Properties: x, y, dia, speedX, speedY, hOffset, resistanceX, resistanceY, duration, and startTime.
    • Methods: move, display, updateDirection, and checkDuration.
    • Behaviors: Bubbles move, and disappear over time.
  • Wind Class:
    • Properties: x, y, and direction.
    • Methods: update and display.
    • Behaviors: Wind direction can be changed by user interaction and influences bubble movement.

  With the Bubbles project, I effectively learned how to use OOP to create an interactive and visually appealing particle system. By designing the Bubbles and Wind classes, which encapsulate the properties and behavior of Bubbles and Wind, the code is modular and maintainable. The use of dynamic and random properties of Bubbles and vanishing times adds to the complexity and interactivity of the project. The key challenge is to strike the right balance between abstraction and implementation while keeping the code clear and organized.