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.

Ellen Wang,  Blobby’s Wonderland

Short Description:

The amusement park is home to a pink glutenous creature named Blobby. Blobby’s wonderland is where it thrives, showcasing its playful nature, love for bubbles, and unique abilities such as teleportation and color-changing emotions. 

Abstract:

Blobby is a whimsical creature that embodies the spirit of fun and adventure. Discovered in 2024 at an amusement park by a team of adventurous scientists and children, Blobby has charmed many with its playful demeanor and captivating appearance. This project immerses you in Blobby’s world, exploring its habitat, appearance, and key characteristics. From its love for bubbles to its unique abilities like teleportation and color-changing emotions, Blobby’s Wonderland invites everyone to join in the enchantment. Discover the magic of Blobby as you explore its gelatinous world and uncover the mysteries of this unique creature.

Images:

Instructions on how to interact with Blobby

Creating bubbles for Blobby!

One of the many expressions of Blobby

Process: Design and Composition

For the design of my project, I knew the vibe and feel I wanted to go for were more on the cartoon and colorful side to give my project a fun and playful vibe. Since I had already created my generative landscape for mini project 4, I was able to use that as a foundation and focus on creating Blobby.

When I was creating Blobby, I originally wanted it to be shaped like an actual blob that had many curves but I realized that it was quite difficult to achieve that shape. While I was searching up images of blobs on the internet, I came across a pudding, and ultimately, I took inspiration from that. To make Blobby more generative, I gave it different expressions so every time my sketch generates, its facial expression is different. 

In my initial draft of Blobby for Interaction Day, I had its arms move according to the movement of the cursor and had the user create bubbles for Blobby. But after feedback from peers, I decided to add more interactions, such as Blobby absorbing the bubbles and growing, as well as having its eyes follow the cursor so it looks like it is looking at the user creating bubbles, giving it more life.

As for the generative background, I wanted to make it more lively, so I decided to animate the clouds, birds, and ferris wheel. The position of the clouds is random so the clouds are in different positions in each sketch, which makes it more interesting. The ferris wheel moves clockwise, which gives the sketch dimension because my original generative background has no movement aside from the balloons. Below are a few screenshots of my generative background.

Process: Technical

When adding interactive features such as changing Blobby’s color, I encountered some technical difficulties because when I clicked on my creature, it wouldn’t change color. To address this issue, I had to abandon the random color change feature for my creature and instead opt to make it change to specific colors based on the number of times the mouse is clicked.

I also had to figure out how to change Blobby’s expression and I realized I could change its expression by using the if and else statement to check the color of Blobby. 

Another difficult part of creating interactions for Blobby was the absorbing bubbles part because, originally, I wanted the bubbles to pop when it was near its mouth but because of scaling and other factors, I was not able to make it look like it was eating it so I just made the bubbles pop when Blobby moved towards it to give it that absorbing effect. Below is the code for Blobby absorbing the bubbles, which is similar to adding bubbles but using splice instead of push bubbles, and also a for loop to loop through the array to find the correct bubble to pop.

Most of my time was spent cleaning up the code and creating functions to ensure that the draw function looked cleaner. For the bird, I drew inspiration from the noise slides posted for CCLab. At first, I made it go in a straight line but I quickly realized it was not very bird-like so adding noise was what made the bird on my sketch more lively. This code is similar to the ones on the slides; I just changed some of the values as well as the shapes so it was a bird instead of an ellipse.

As for the ferris wheel, it was a tedious process as I had to use push, pop, and translate for each of the lines and carts in order for the ferris wheel to rotate. I also used frameCount to rotate the lines and carts, which turned out to be a lifesaver because it is constantly increasing. I also multiplied it by 0.5 so the ferris wheel spins slower. 

Reflection and Future Development

All in all, I feel like I learned a lot from doing this project because I had to apply what I learned in class to my project. Additionally, I could visualize what I wanted my canvas to look like but when it came to coding, it was challenging for me. But if I had an idea that I was not sure how to code, I would look for p5 references or search online to help me further. I like my generative background for my project but one thing I’m not too satisfied with is how Blobby moves. If I had more time to improve, I would definitely improve the movement for Blobby.

For feedback, I received really insightful and constructive feedback from my classmates, Leon, Moon, and Carrot. Carrot suggested that Blobby could interact more with the background, such as going into the ferris wheel or the balloons, which is something I wanted to do but found difficult because I was unsure how to code it. However, this is something I will definitely explore in the future. Additionally, Leon mentioned that it would be better if Blobby only moved on the x-axis, which I also agreed with because Blobby originally only moved on the x-axis. Still, in order for Blobby to eat all the bubbles, I had to make it move on both axes.

If I had the chance to implement my project further, I would continue to explore new ways to enhance Blobby’s interactions and animations with the background to create a more immersive and engaging experience for users. Additionally, instead of using arrow keys to control Blobby, I would most likely make its motion randomized so it could eat bubbles itself.

In the future, I will keep all the feedback I got for this project in mind to improve on my future projects.

Credits & References

Special thanks to Professor Leon for answering any questions I had about the project and for helping me fix my code. I also want to thank Danni for assisting me in figuring out how to make my creature change colors randomly when the mouse is pressed. Additionally, I am grateful to my classmates who gave me suggestions on interaction day, as well as to my friend Queena. They all contributed ideas for interactions I could implement for Blobby, such as eating bubbles and growing in size. Their support and input were invaluable in creating a more engaging and dynamic experience for Blobby’s Wonderland.

I also used resources from CCLAB slides, especially for the noise, it helped me greatly. Additionally, I used to p5 to help me with mapping and splicing. 

Concept and Description:

For this mini project, I created a generative landscape that generates a slightly different sketch every time it’s played. My landscape consists of a ferris wheel, sun, clouds, birds, stars, and balloons. Most objects are generative, so they are in different positions and/or different colors when played. Some other notable objects or elements in my sketch are the time of day (day, sunset, night), weather (clear, rain, fog), and the location of my egg in the ferris wheel. 

Here are 9 out of many possibilities of my landscape:

Coding:

First, I created different variables for different elements since I would need to either move some around or generate randomness.To generate randomness, I initialized my variables inside the setup and had them declared before setup since I only wanted to generate randomness once. One example would be for translateX and translateY, which would generate the random position of the sun. 

I wanted to generate different times of day based on the sun’s Y position, so if the sun was below 200, it would be day; if it was between 201 and 300, then it would be during sunset; and anything above 300 would be nighttime with stars that were generated with a for loop. I also changed the color of the grass, sun based on translateY to match the time of day.

For the ferris wheel, I used shapes, lines, and arcs. I also placed eggs inside the ferris wheel, as suggested by Professor Leon.  The eggs are in the cart by probability, where I declared a variable that randomly chooses a number from 0 to 99. If the number is below 50, then the eggs will appear in certain carts; if the number is between 50 and 60, it will appear in other carts; and any other number would be another set of eggs in different carts. 

I also did probability for the fog and snow. There would be fog if the number was larger than 10 and smaller than 20, and snow if the number was below 35.

Another place where I used a for loop is the position and slight bouncing of the balloons.

Line 210 updates the vertical position of the balloon based on the cos() function of the angle. Then, cos(angle) is multiplied by 10 to control the amplitude of the motion, and the result is added to 300 to determine the base position of the balloon, so the balloon oscillates vertically.

Conclusion:

How is drawing by hand from observation different from programming the computer to draw for you? Can you think of some commonalities as well?

When you draw by hand, you can control how fast you move your pen as well as what direction you want to go, but with the computer, you have to code for the speed and direction you can go. Additionally, drawing by hand gives you more freedom as you can draw anything you would like, but with programming, you have to follow a set of rules, and there are sometimes limitations. But programming allows you to be more exploratory since you can play around with the values and variables to achieve different outputs and effects. As for commonalities, both allow you to be creative and understand composition and design. Additionally, there is an iterative process because they both have an iterative process for refinement where you can make adjustments to get your desired outcome.

What properties have you manipulated in the repetition? Describe your observations and visual outcomes during the process.

Properties that were manipulated in my landscape were translation variables, color, randomization, movement, and drawing shapes. The visual outcomes would be the sun, clouds, bird, and balloon in different places throughout the canvas. The random appearance of eggs on the ferris wheel and changing colors of objects make the canvas more fun and colorful. Additionally, the occasional fog or snow effects add to the atmosphere and depth. 

What makes a good generative pattern?

Creating a good generative pattern involves a combination of technical skill and an understanding of aesthetic principles. For the generative pattern itself, there should be variety, randomness, balance, repetition, interactivity, and more. This way, it keeps the viewer engaged and curious about the artwork.

Sketch 1: 

This sketch generates a series of circles with varying sizes and colors, where each circle’s size is influenced by a sine wave function. I used the variables sinInput, sinInput2, sinInput3, etc. to control the phase of the sine wave for each circle’s size. As for drawing the circle, its size is determined by the sine value of its respective sinInput variable multiplied by a random value between 50 and 200. The colors of the circles also change randomly on each frame, creating variation and visual interest, making it generative. 

Sketch 2:

This sketch is a dynamic visual scene with moving shapes with changing transparency. crossX and crossY to determine the initial position of the central circle, speedX and speedY determine the initial movement speed in the horizontal and vertical directions, and transparency initializes the transparency value.  The background color is also randomized and not redrawn on each frame, which allows the shapes to leave a trail as they move. If the shape goes beyond canvas boundaries, it will reappear. The background is not redrawn on each frame, allowing shapes to leave a trail as they move. Additionally, the transparency of the shape gradually increases over time, which gives it a semi-illusion of shooting stars.

Sketch 3:

This sketch generates shapes with changing colors and positions based on trigonometric functions. Variable sinInput controls the phase of the sine wave, which affects the position and color of shapes, while sinSpeed determines the speed at which sinInput changes, which is initialized with a random value between 0.01 and 0.05. The background color is set based on the value of sinInput, which results in a grayscale background that changes over time. As the background changes, the colors of the shapes change as well, their initial color will become their complementary color. 

I am considering incorporating this sketch into Project A because I find it intriguing how the colors of the shapes shift based on grayscale. In my project, I envision the imaginary creature I create adapting its color or motion in response to changes in grayscale or other variables I define. Since this sketch is relatively simple, it provides a great opportunity for experimentation with various shapes to enhance the complexity and diversity of the composition. I plan to introduce interactive elements such as mouse or keyboard controls to allow users to manipulate the shapes’ parameters and motion patterns, adding an engaging layer of interactivity. Additionally, to further enhance the visual appeal of my creature, I will explore different color schemes and blending modes to create captivating and dynamic visuals.

Introduction

Anna Ridler is an artist and researcher known for her desire to work with art technologies, machine learning, and AI/generative algorithms. She is interested in ideas from the natural world, so her works often revolve around nature and collections of datasets to create unique and unusual narratives.

For example, one of her most famous works is Mosaic Virus, which explores themes related to capitalism. In this project, she utilizes machine learning algorithms to generate images of tulips. By training algorithms on datasets containing images of tulips from the Tulip Mania era, Ridler creates digital representations of these blooms, exploring the intersection of nature, economics, and technology.

Ridler is renowned for using generative algorithms to create aesthetically spectacular artwork. These algorithms provide unique and frequently complex visual results by creating images according to predetermined parameters. Her use of machine learning techniques, which are crucial to her research into AI’s potential in art creation, is one of the work’s most noteworthy features. Through the use of these algorithms, she creates and evaluates content within an artistic framework. The majority of the creations in her portfolio are digital, including interactive installations, films, and digital photos. These media are her canvases on which to paint her creative ideas.

Discussion

The significance of Ridler’s work is that it challenges traditional notions of artmaking by using machine learning algorithms and data to create visually stunning and unique pieces. By using AI as a creative tool, she pushes the boundaries of what art can be and explores the connection between human creativity and computational processes. But by using algorithms to generate art, she raises questions about authorship, creativity, and the role of technology in shaping artistic expression

As for the connections with the concepts we are learning in CCLab, Ridler makes me realize the potential of code as a creative tool and demonstrates how computation processes can be used to generate visually compelling artwork. In CCLab, we’ve discussed generative art and the unpredictability of its outcomes. Ridler’s work serves as a prime example, as seen in the Mosaic Virus project.

There are many things we can learn from Ridler, as she has many valuable insights into the intersection of art, technology, and society. She encourages people to experiment with technology since there will always be some unexpected or surprising outcomes. We can combine our interests to create different types of art, as well as using different types of tools for problem solving.

Additionally, Ridler encourages and inspires me to be more experimental and innovative in future creative coding projects. Her approach challenges traditional methods, inspiring me to think outside the box. I will definitely look into more of her other projects for inspiration in the future as well.

Conclusion

All in all, from my point of view, Anna Ridler is a very interesting artist to research and explore. Her groundbreaking work at the intersection of art, technology, and artificial intelligence offers a fascinating glimpse into the potential of creative coding. With this new knowledge about Ridler and her works, I can draw inspiration, explore more potential with the code I learn in class, and try to think more creatively. I could also potentially look into nature and how things work to incorporate it into my project.  Additionally, one important aspect of Ridler’s work that I would like to incorporate into my project would be the narrative aspect, so I am able to engage viewers alongside the visual experience.