Monthly Archives: October 2023

Patrick Star Dancer: Code and Creativity Combine for a Grand Dance Party

Project Link and Brief Description

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

This mini-project presents an engaging and self-contained animated character that draws inspiration from the beloved Patrick Star character from SpongeBob SquarePants. The character is designed to exhibit rhythmic movements in its arms and legs, imparting a sense of dynamism and entertainment.

Key Features:

  • Dynamic Movements: The character is programmed to perform rhythmic arm and leg movements, adding a playful and lively dimension to its presence.
  • Interactive Element: The project includes an interactive component. By simply clicking the mouse, users can trigger a change in the character’s facial expression. Specifically, the character’s eyes change in size, conveying an expression of surprise.
  • Object-Oriented Programming (OOP): The codebase of this project adheres to the principles of Object-Oriented Programming (OOP), ensuring a well-structured and organized framework. This makes it easy to extend and maintain the project, and allows the character to be seamlessly integrated into larger scenarios later.

Demo

Dancing Patrick Star

Coding Snippet

In the project, the properties and attributes of the Patrick Star have been meticulously defined. Various properties, such as ‘this.yMov’ and ‘this.leftArmR,’ have been assigned specific roles and behaviors, enabling precise control over different aspects of Patrick’s appearance and dance movements.

To achieve the character’s engaging dance movements and the interactive feature, the code relies on a strategic utilization of mathematical functions. The ‘sin(frameCount/num)’ function plays a central role in generating rhythmic and repetitive motions. These movements, including Patrick’s arm and leg swings, are carefully synchronized with the passage of time, creating an animated and lively dance performance.

class Patrick{
  constructor(startX, startY){
    this.x = startX;
    this.y = startY;
    this.yMov= random(5,20);
    this.leftArmR = 5;
    this.Boo = false;
    this.rightArmR = 175;
    this.eyeSize = 15;
    this.legLeft = 25;
    this.legRight = 45;
  }  
  update(){
    this.x += 2*sin(frameCount/20)
    this.y += 2*cos(frameCount/this.yMov)
    
    if (this.leftArmR>70){
      this.Boo = true
    }
    else if (this.leftArmR<5){
      this.Boo = false
    }
    if (this.Boo) {
      this.leftArmR = this.leftArmR - noise(6 * sin(frameCount / 50));
      this.rightArmR = this.rightArmR + noise(6 * sin(frameCount / 30));
    }
    else{
      this.leftArmR = this.leftArmR + noise(6 * sin(frameCount / 50));
      this.rightArmR = this.rightArmR - noise(6 * sin(frameCount / 30));
    }
    if (frameCount % 10 == 0){
      if (this.legLeft == 25 ){
        this.legLeft += 15
        this.legRight -= 15
      } 
      else{
        this.legLeft -= 15
        this.legRight += 15
      }
    }
    if (mouseIsPressed){
      this.eyeSize += sin(frameCount / 2)
    }
  }
}
}

Reflection

  • A self-contained class operates as an independent unit, with all its logic (like properties and methods) encapsulated in its own definition. This isolation reduces the risk of external factors affecting its behavior, making it more predictable and easier to maintain. As a result, an individual class can be reused in different projects without worrying about dependencies on external code. When we introduce this Patrick Star Dancer into the Grand Dance Party project, we will minimize the mess and trouble.
  • Ensuring that my dancer’s code works seamlessly with code from a different source, such as the Grand Dance Party, requires a deep understanding of the structure and functionality of the external code in order to effectively integrate my code. Lack of comprehensive documentation or unclear code can make coordination challenging.
  • Modularity: The Patrick class is an example of modularity, encapsulating the full properties and functionality of the Dancer character in a well-defined class. It separates the character’s properties, appearances, and movements into separate modules, making it easy to manage and maintain different aspects of the character independently.
  • Reusability: The design of the Dancer class promotes reusability. People can instantiate multiple instances of the class in different scenarios without worrying about external dependencies. It is a self-contained, reusable unit that ensures that the character’s dance animations and interactions can be effortlessly integrated into different contexts.

Jellibop: The Birth of a Cute, Wavy, Jellyfish-Like Creature

Project Links

Below is the project Jellibop: The Birth of a Cute, Wavy, Jellyfish-Like Creature by Cassie Huang.

P5 sketch link: https://editor.p5js.org/CassieHuang/sketches/vsDeWFSxi

Website link: https://cassiehuang72.github.io/CCLab/projectA/

Elevator pitch

Meet the Jellibop, a mesmerizing digital marine creation that evolves with every generation, delighting in its ever-changing colors, shapes, and playful, aquatic motion. Experience the fusion of art and science as you watch these charming creatures grow, interact, and even enjoy snacks. Dive into the world of the Jellibop, explore this fascinating creature and discover its mysteries.

Abstract

This unique, wavy, jellyfish-like creature that thrives in the depths of the ocean, which we call Jellibop, starts out as a small droplet of digital magic and then begins to move, moving with noisy fluidity. What makes the Jellibop really special is that it’s not the same every time. Its color, shape, and the way it moves are different with each new one we create. As it glides through its watery world, it grows naturally, and when it reaches a certain size, it changes direction. The Jellibop even enjoys snacks – it’s a bit of a carnivore, and when you release tasty treats, it happily gobbles them up and gets bigger. Once it gets big enough, it splits into two, starting the cycle all over again. In groups, Jellibops synchronize their colors, revealing a social, colorful dance.

Instructions

  • Click to release the wavy marine organisms
  • Press “Enter” key to switch to feeding mode and click to release the snack
  • Press “Enter” again to switch back to creature release mode

Images

Jellibops Synchronize Colors as They Encounter Each Other Amidst a Sea of Snacks. A mesmerizing display of social dynamics and harmony in the digital marine world.

Design and Composition

The creation of the Jellibop project was a journey of exploration, experimentation, and continuous iteration.  It all started with a tiny, randomly moving dot, gradually evolving into the endearing digital marine life shown here today.  Here, we delve into the design process that shaped the Jellibop’s appearance and user interaction:

  • Appearances Design Evolution: The project’s genesis was marked by a simple dot moving randomly in space (mini project 3). To achieve the desired visual appearance, a meticulous evolution occurred. To craft the body shape of the Jellibop, a reference to blobby creatures plays a pivotal role. Parameters such as offset and increment were tweaked until the desired shape was achieved.  Similarly, inspiration for the cirrus (tails) was drawn from growing wavy lines, with variables such as frequency and amplitude providing control over their form.
  • Code Structure Optimization: Initially, the code (a version without arrays) was somewhat disorganized, with two creatures drawn directly in the draw function. This made it challenging to manage multiple creatures, each requiring a unique appearance and behavior. It became evident that a more structured approach was needed. Therefore, I applied arrays of x, y, speedX, speedY, noiseBallSize, eyeShape, and h to better track and control their movement speed, body size, facial features, and color.
  • Interactions: An important goal was to allow the Jellibops to interact with each other, including color interchange upon encountering one another. This, however, presented challenges. Early attempts resulted in erratic color changes due to coding complexities. Several iterations were made to rectify this, leading to the final version where Jellibops synchronize their body colors upon meeting, a solution that proved both effective and visually engaging.
  • Image records of how it evolved:

Origin

With a blobby shape and facial features

With more detailed features

With more detailed features

Overall, the Jellibop creation is a testament to the creative possibilities that emerge from continuous refinement. Personally speaking, the iterations and experimentation were crucial in achieving the desired visual appearance and user interactions.

Technical Chanllenge

In the creation process, I encountered an interesting coding challenge that provided an unexpected twist to the creature’s behavior. As mentioned before, my original plan was to implement a color switch mechanism where, when two Jellibops came into close proximity, their colors would interchange as if they were engaged in a vibrant conversation. However, technical issues surfaced here, and I found that the two creatures kept changing colors continuously until they moved apart (p5 sketch code). This unexpected behavior, while fascinating, wasn’t in line with my initial vision. In response to this challenge, I decided to pivot and introduced a rule that allowed the Jellibops to adopt a uniform color when in close proximity. This change brought about a unique form of social interaction.

Failed code snippet for switching color

Failed code snippet for switching color

Reflection and Future Development

The process of creating the Jellibop project has been a valuable learning experience, emphasizing the iterative nature of innovation and the importance of seeking inspiration from diverse sources. I’ve come to appreciate that finding the perfect solution often requires experimentation and adaptability and that it’s not a one-shot endeavor. The project’s development has also underscored the significance of drawing insights from others’ work, as it can provide fresh perspectives and solutions.

For future development, I’m eager to enhance the project’s dynamics by introducing movements to the snacks and exploring interactions between Jellibops and snacks. As suggested by Professor Godoy, endowing snacks with their own movements once they’re released into the water could add an exciting dimension. Guest critics have also raised the idea of diverse interactions between Jellibops and snacks. I’m intrigued by the concept of mapping the Jellibop’s color with the snack’s color, making it a more immersive experience. Additionally, diversifying the functions of snacks, such as certain snacks causing a reduction in Jellibop size when consumed, offers exciting avenues for further exploration.

Balancing the Benefits and Concerns of the Web: A Decade Later

Beneficials and Ill Effects

The web, as highlighted in the article, presents both beneficial and concerning aspects. On the positive side, the web is a platform built on egalitarian principles, promoting open access, global conversation, and free speech while connecting individuals and institutions. However, it also faces challenges, with governments monitoring online activities, threatening human rights and potentially leading to a controlled and fragmented web, affecting access to information.

As for me, the web has been an invaluable resource for my educational journey. It has enabled me to access a vast repository of online courses, coding tutorials, and development tools, allowing me to hone my coding skills and broaden my knowledge in web development. I’ve also had the chance of connecting with a global community of fellow learners, which has fostered cultural exchange and collaborative projects that transcend borders. However, on the other hand, I’ve encountered instances where access to certain websites and content is restricted, limiting the availability of diverse perspectives and information. This not only hampers my educational pursuits but also raises questions about the fundamental principles of online freedom and privacy.

Concepts Understanding

Universality and Isolation: Universality underscores the open accessibility of the Web for all users, regardless of their devices, software, languages, or connectivity. It promotes inclusivity and diverse participation. Isolation, on the other hand, arises from closed, proprietary platforms, which trap user data within their confines, hindering open data exchange and potentially fragmenting the web.

Open Standards and Closed Worlds: Open standards are the backbone of web innovation, offering free and royalty-free technical standards that empower diverse website and application creation. Closed worlds, like Apple’s iTunes, restrict access and creativity by creating closed, proprietary environments that prioritize control and exclusivity.

The Web and the Internet: The Web is an application layer that operates on top of the Internet infrastructure, offering user access to the World Wide Web. The separation of layers is crucial, enabling independent innovation in both the Web and the Internet. The Internet is the underlying electronic network that transmits data packets among computers using open protocols, and improvements in one layer don’t disrupt the other. This separation supports ongoing innovation and compatibility between the Web and the Internet. 

Vision for the Web: A Decade Late

The author’s vision for the future of the web still holds relevance in several aspects.

  • Open Data: The concept of open data has thrived, allowing information to be shared and leveraged for real-world benefits such as safety, discrimination awareness, and disaster relief.
  • Web Science: Research into how the web influences the real world has progressed, though it’s a developing field with growing relevance.
  • Social Machines: The influence of user-generated content on various sectors remains strong, but challenges of misinformation and manipulation have emerged.
  • Internet Access: While efforts have been made to improve access in developing countries, challenges related to affordability, digital literacy, and infrastructure persist.