Author: Sharren Tanuwijaya

PROJECT B: WANDERLUST WONDERS

live project link:https://sharren-tanuwijaya.github.io/PROJECTB/PROJECT-B/title.html

In this project B, the project that i made is based on my hobby which is traveling. I wanted to share about my journey in traveling, how I portray it on my bucket list and also make an interactive travel information for the users. The travel information will be based on my bucket list; the countries that I wish I could go to. On the first page, it will be the title and a button that will bring you to the traveling journey. Next, the page will show you the memories and pictures of where I have traveled to combined with the list of the countries that I wished to visit. The next page will be the interactive page, where you can press the number 1-7 that makes the airplane move and go to the location that is on the bucket list. There are also buttons that can be pressed followed by the country’s name. Inside the countries page, it will give you the country’s authentic food and famous places. There are also interactions where you can press and listen to the background music or animals sound also languages from the country. 

 

The process starts from thinking about where I should start first. And then I started from the interactive earth page. I asked professor Leon and he taught me how to use the lerp method. The lerp method is an alternative to adding speed to x coordinate. This lerp made the movement of the plane more smooth. The plane will move from this.x to this.goal x. 

    

Next I made the links that’s attached to each country’s html link. I struggled on this code because I am used to attaching a html page in a html page, but for my project it needs to be connecting the html page in a p5 canvas. Thank you to Carrot for helping me and giving a solution on how to do the coding for this part. The next is to make sure everytime i press a different number, only the link related to the number will appear and the other link will disappear, in this case I use try{} and finally{}. This means that when it draws the sketch, the program will first try the codes under the try method and then the code under the finally{}. If the code doesn’t work in the try method, the code will immediately rin the finally{} method.

After finishing the hardest part of my coding, I moved to photography animations. This page doesn’t have any interaction except the clickable button that leads to the other  html page. On the photographs animation I use the if statement and msSinceStartofsketch, so since the start of the sketch the photographs will appear according to the number put in the if statement. 

Last, after Im done with the big picture of my project, I move to each pages of the countries and think about the interactions that I wanted to give to the audience. In Hawaii, the audience can choose the background music. In canada, you can listen to Canadian animals’ sound. In Germany you can listen on how to pronounce german words. In Norway, you can see when the snowman meet each other the yellow lights on the background will appear. 

If I have a chance to improve my project, I want to add more interactions in the countries page and make the UI in each page more nice. Moreover I would  like to put a “next” button on each country’s page instead of putting the “back” button only, so people can easily go to the next page instead of  pressing the back button and pressing the country’s button again and again. I also want to improve the title page to make it more animated instead of a static image. As what I received during the presentation day, I would like to make the bucket list image to be not seem clickable   

Last but not least, I would like to say thankyou to Professor Leon that have taught me alot of stuff about coding and give effort to make me understand the things that i struggle with. Thankyou to Carrot and Jiapei who have patiently teach me on how to solve my coding problems and help me in this project.

WONDERLUST WONDERS; A VISUAL JOURNEY ACROSS CONTINENTS 

Screen Recording 2023-11-27 at 23.26.51

In this project B i would like to make something that comes from my hobby which is traveling. I want to make my hobby into a story and also informative for the audience. The information will be from my bucket list; countries that I wish I could go to. On the first page, it will be the title and a button that will bring you to the traveling journey. On the second page, it will show you my memories and pictures of where I have been. And the bucket list notes are in the middle of the screen surrounded by the picture. When you scroll down, there’s a button that will lead you to another page that will give you interaction, and feel like you’re traveling the world. There are also buttons that can be pressed followed by the country’s name. Inside the countries page, it will give you the country’s authentic food and famous places. 

REFLECTION

Having a habit of organizing the files in VSS code is very helpful, especially in my project. I have a lot of html,css, and js files that connect to each other. The first thing i do is renaming it with a simple name that will prevent me from typo. Also when you have an organized file it is very easy to spot on the files that you wanted to change and open without making a mistake. 

Classes when you want to use the same properties and many locations for different things. However for  id you can only use it one. 

The limitations are the fonts and it is very hard to position stuff on websites as you need to guess and check this takes a lot of time. Also the images that you can use and suitable for my website are PNG images with transparent backgrounds. 

The difference between them is that we don’t have to create a separate page to style and give properties. While in HTML we need to connect the html with the css. 

The advantages in words are it’s more user-friendly, it’s easier and it doesn’t need us to understand coding. Also in words it gives a direct visual representation and allows editors to see the document’s appearance as they edit it.words typically provide a wide range of formatting options, including fonts, colors, styles, and advanced features like tables and columns and you don’t need to connect it with css. 

The advantage of HTML is that it can be seamlessly integrated with CSS and JavaScript to create dynamic and interactive web pages. Hand-coding HTML is essential for creating responsive web designs that adapt to different screen sizes and devices.

From this project, I use p5.js for the animation and interactive side of my project. P5.js Operates at a more detailed level for graphics and interactivity. For html and css i use it for formal stuff like buttons that lead to other html pages and also styling the text. It is Suited for structuring content and defining styles, making them ideal for static or minimally interactive webpages.

link to github: https://sharren-tanuwijaya.github.io/CCLAB/PROJECT-B/title.html

According to the text, New media art involves the use of technology when they create art. However artists don’t just simply use these tools conventionally but repurpose, modify, and manipulate them to redefine technology as a medium for artistic expression.In this case, they give another meaning to these technologies as art media. Moreover, new media art includes a variety of art practices and works that take advantage of media technologies to create innovative and socially relevant art. In other words, new media  acts as a connecting link between the realms of art and technology. 

After reading the article, I gained my own understanding about new media art today. As technology keeps on improving, New Media Art now encompasses not only the internet and early digital technologies but also developments in virtual reality (VR), augmented reality (AR), artificial intelligence (AI). Furthermore, today  Social media has become both a subject and a medium for artistic expression. Even some artists use biological materials and biotechnology to create living art forms. In this era,  digital tools and online platforms are available and easily accessible which made art creation more accessible to a broader range of artists and creators. Social media platforms such as instagram. Social media platforms such as Instagram, Twitter, TikTok, and YouTube gives everyone the chance to be an artist and show their New Media Art to a worldwide audience. Artists no longer depended on art galleries or exhibitions to connect with their audience. New Media Art has increasingly ventured into the realm of public art and interactive installations, often incorporating technologies like sensors, projection mapping, and interactive displays. These works engage with the public in urban spaces and public events.

 

ROY LICHTENSTEIN

The first artist that I have chosen is Roy Lichtenstein. He is an American painter who was a founder and practitioner of popart. He became a leading figure in the new art movement. His artworks are inspired and influenced by popular advertising and the comic style book. One of his artwork is called “Drowning girl” (1963) a very iconic painting. In this artwork, Roy Lichtenstein portrays a distressed young woman in a melodramatic drowning scene, characterized by bold outlines, vibrant colors, and the use of Ben-Day dots for shading. 

“Drowning Girl” by Roy Lichtenstein is a quintessential example of Pop Art’s engagement with the fusion of popular culture and fine art during the 1960s. Building on the historical antecedents of consumer culture and mass media’s growing influence on society, Lichtenstein’s work draws inspiration from the world of comics and advertisements. 

The painting reflects the era where cheap comic books were produced, and this artwork turned into an important art. Lichtenstein uses bold outlines, bright colors, and special dots that remind you of printing to mix traditional oil painting with popular comic art. In “Drowning Girl,” exaggerates emotional and dramatic subject matter, making the heroine’s distress stand out while also adding humor. This work shows how Pop Art explores the influence of consumer culture and media, giving a new way to look at art in a time of lots of production and popular culture, turning ordinary images into special artistic statements.

SHERRIE LEVINE

The second artist is Sherrie Levine, she is an American appropriation artist associated with the Pictures Generation, known for recreating historically significant artworks by artists like Walker Evans, Constantin Brancusi, and more.Her work challenges conventional notions of originality and authenticity, engaging with postmodern concepts. One of the artwork she created is titled “Crystal Skulls” (2010), which is a series of sculptures. In this artwork, she transforms the human skull into an exquisite crystal object.

In “Crystal Skulls,” Sherrie Levine transforms the macabre human skull into an exquisite crystal object, challenging conventional art perceptions by juxtaposing the ghastly with the decorative. The sculptures are kept within  vitrines or glass cases, emphasizing their preciousness which highlights the fetishistic quality of the artwork, similar to valuable items in the history of art.

“Crystal Skulls” by Sherrie Levine is inspired by Marcel Duchamp’s readymades, blending art and consumer culture, echoing the spirit of the readymade movement. Levine challenges how we see art by transforming human skulls into beautiful crystals, playing with the contrast between the eerie and the pretty.  The use of crystal to cast human skulls adds an element of transformation and beauty to a macabre subject, emphasizing the tension between the ghastly and the decorative. Her technique is by arranging identical skulls like a shop display, arranged in a grid, making us think about how art is valued and sold. 

“Crystal Skulls” by Sherrie Levine is inspired by Marcel Duchamp’s readymades, blending art and everyday objects. Levine challenges how we see art by transforming human skulls into beautiful crystals, playing with the contrast between the eerie and the pretty. She arranges identical skulls like a shop display, making us think about how art is valued and sold. The artwork questions what makes each piece unique and challenges how art is turned into a product for consumers, creating a conversation about the meaning and repetition in art.

WANDERLUST WONDERS: A VISUAL JOURNEY ACROSS CONTINENTS 

INTRODUCTION

Traveling and exploring breathtaking landscapes around the world has always been my beloved hobby, a means of crafting cherished memories that last a lifetime. I’ve had the privilege of visiting stunning destinations like Switzerland, New York, Japan, and many more, yet my bucket list continues to beckon with uncharted wonders.I wanted to share In this project, i wanted to transform my traveling hobby into artform that not only captivates but also informs my audience in a truly captivating way.It’s a virtual adventure that brings the audience visual artistry and also practical travel information from countries that are in my bucket list. 

In this project, the audience will keep scrolling through the screen to see the traveling journey and to get information about the countries. Before the audience can engage with the animations and read the information, I will include a story of my traveling experience first and captions that introduce my bucket list. The plane will move from one country to the other country, once they land in a country, they can press a button that leads to a page where the information about the country is provided.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

REFERENCES

First reference: https://pinepoint.nfb.ca/#/pinepoint

I am inspired by how the artist presents his personal story as an art form, complemented by a backdrop of music and visual animations. This inspires me to also make my project from my own story which blends informative content with an engaging appeal that captivates the audience.

Second reference: https://www.unep.org/interactives/beat-plastic-pollution/

I find inspiration in the dynamic movement of the background on the website as it shows information, this can be implied to how the airplane voyage from one country to the next.

FIELD OF FLOWERS 

In this mini project 6, we learn how to apply OOP and arrays to make our own particles. I decided to make a field of flowers that are also moving. Not only work moving, the audience can also interact with the flowers to change their colors. This gives a colorful sense of the work instead of being bland with one color. The background I chose is soft and not too dark or bright yellow to make the flowers color vibrant. The flowers are delicately crafted from circles that twinkle and shimmer in an exquisite display of movement.

When you press the flowers it will change colors: 

 

REFLECTION:

Object oriented programming (OOP) is a coding method that uses the concept of “object”. It is a method to allow programmers to organize their code and structure their code with the use of objects, which  are instances of classes, to represent data and behavior. The first concept of OOP is, class, it is a template for creating objects. It defines the attributes (data) and methods (functions) that objects created from the class will have. The second one is an instance. An instance is a specific version of an object with its own particular details. OOP is very useful when you want to create a lot of the same objects. You don’t need to draw the object one-by-one, but you can manipulate it by using OOP. From what we learned in mini project 5, modularity and reusability, OOP gives this advantage too. OOP allows you to organize your code into reusable, self-contained units called classes. This modularity makes it easier to manage and maintain large codebases, as you can work on individual components without affecting the entire program.

In this mini project 6, the objects that i have created are a field of moving flowers. The class is titled “PARTICLE” and inside the class there are constructor,displays and updates. In the display section, I drew how I wanted the flowers to look. Since I wanted to make the flowers blink, I replaced the diameter as “this.dia” instead of a number. This makes it easier to manipulate the code in the update section. Next, I also wanted the flowers to move to left and right, instead of having a fixed number for the x coordinate, I use this.x and this.speedx. I also added an interaction, where you can change the color of the flowers when your mouse is pressed. In this case, instead of having a number for the color arguments, I replace it with this.h. And in the update function, this.h=random(100) this means that the color value will randomly change from 0-100. The challenges I have in this mini project are, I couldn’t make more shapes other than shapes that are connected with the flowers. This gives me limitations to only focus on the flower.

LOLITA: THE GAME LOVER 

HELLO ! My name is LOLITA. I am a mini arcade arcade who is addicted with games. The heart on my head represent how i love myself; GAMES. Moreover, my creator told me that she is inspired by the character from Adventure Time called “BMO”, I can be his partner too! My hands are always rotating as like how gamers are always having their hand on the computer keyboard. My legs are exchangeably moving, as I am dancing. I get sleepy sometimes during playing games, but I cant get off my games, so my eyes would close for sometimes and open again to continue my game. 

REFLECTIONS: 

The benefit of my class not relying on any outside code, is the code can be reusable. It can be moved into a different canvas when other people copy our code . The challenge is  you need to understand the code that they have written before you write your own code. Reusability is the ability to reuse code components in different projects, you can easily copy your code into others pages. For example, the professor can easily combine each of every student object dancers into 1 canvas. Modularity involves grouping similar types of functions into their own part. It is also easier to make changes in one part of the code, if you don’t have modular code, it becomes challenging to understand because changes in one part of the code can have unexpected impact in other parts. My code has its own class for the dancer drawing, and everything is drawn inside this part from construct(), display(), and update(). Modularity makes it easier to manage code and collaborate with others

 

RAYS OF WATER; the Kingdom of Stingrays 

GITHUB LINK: https://sharren-tanuwijaya.github.io/RAYS_OF_WATER_2023_10_18_12_42_22/RAYS%20OF%20WATER/index.html

P5.JS LINK: thttps://editor.p5js.org/Sharren-tanuwijaya/sketches/XaMNNkMdt

right picture: https://unsplash.com/s/photos/stingray

left picture: https://www.freeimages.com/photo/sting-ray-1197143

The stingray has a really graceful motion under the ocean, they also has a very unique shape of body that perfectly blend into the world underwater. 

With the gentle tap of your keyboard, you can explore the depth of the sea with a world of enchanting mysteries and fascinating creatures awaits to reveal their astonishing surprises.

The project depicts the visual narrative of the enchanting lives of stingrays. The story unfolds as the stingrays discover a location for mating and birthing, symbolizing the universal themes of love, family, and the interconnectedness of all the stingrays. The changing colors of the baby stingrays represent  the joy and wonder experienced in their aquatic haven. Through this project, the visuals of the movement and the ornaments of the ocean invites viewers to dive into the secrets of the ocean, discovering the beauty and feelings that thrive underwater. It provides a peek into the concealed world of marine life, revealing the wonders beneath the waves.

THE PROJECT: BEHIND THE SCENES 

/FIRST DRAFT/

Initially  what comes into my mind when I think about the ocean is bubbles and waves. So in this first draft I added the waves movement with the sin and cos method, but, i didn’t like how it turn up and because i use this method, i need to move the background to the setup function which is complicated to add other things in the draw function. Moreover, the bubbles on my first draft weren’t moving. Also i put too much focus on the tails of the stingrays but it ends up it doesn’t look like a stingray. 

/FINAL RESULT/

After the interaction day, I got so many feedbacks which opened my mind to more creativity. I changed the shape of the stingray to make it more similar to the original one. I also added some seaweed, moving fishes and corals. These ornaments doesn’t only make the atmosphere lively but it makes it very colorful and fun. I also added more bubbles that stays in the frame with the movement of up and down. Last, I changed the visuals of the waves as I don’t like how it turned up. So I searched up on the internet for inspirations, on how to make waves animation. I found out that p5.js has codes for noise waves ( https://p5js.org/examples/math-noise-wave.html ). 

The first interaction on this project is moving your mouse to help the stingrays explore the ocean. After a few seconds they will go into the center and the bubbles will disappear by moving to the left and right.

 

 

Then, there will be a circle animation that shows magic is happening. From the project proposal, it was supposed to be just a circle rotating, but this cant be implied as it will be not obvious that its giving a magic animation.

 

 

Next, after the magic animation the stingray baby will appear one by one. Which portrays both stingrays that give birth to the babies to make the ocean more lively. 

 

 

 

The last interaction will be the changing colors of the babies by pressing 1,2,3. As mentioned before, after the babies appear, life in the ocean is more joyful which is represented by the color-changing of babies. 

 

 

STRUGGLES DURING THE PROCESS 

On this project, I struggle with the waves at first. As to make the waves, i imply the sin and cos which needs the background to be moved into the setup function. This makes the other shapes leave their shadows on canvas if they’re put on the draw function. Moreover , I also struggle for the movements of the stingrays and the bubbles. For the stingrays i wanted to make the tail to move gracefully, but I don’t have the knowledge about it. Also I wanted to make the movement of the bubbles go from the bottom and float up. 

FUTURE IMPROVEMENTS

From my presentations, the professor and some of my classmates give feedbacks for my project. I would like to to make the bubbles to float from the bottom to the top repeatedly. I also want to add the interactions where people can pop the bubbles, this can be more engaging for the users. For the stingrays, I want to improve their movements so they can show their graceful movements. Which by improving the stingray, it shows people that the stingray is the main character and not overlapped by the ornaments and the moving fishes. 

CONCLUSION

In conclusion, I am satisfied with my work because I can visualize the ocean environment into codes. However there are still improvements that I would like to make. Especially for the movement of the stingrays and the interactions of the stingrays as it is the main character of the project.

 

The reading mentioned that the web is beneficial as we can share information very quickly to anyone and everywhere. My own experience from getting the advantages from webs is during COVID-19, where everything is from online. The web makes it easier to communicate with my teachers and friends from school. Not only for communication, the web is a place for me to find entertainment , watch movies, videos and listen to music. However, the web also has an “ill effect” like the author mentioned. As the web is a place for a very easy communication and also a very easy place to upload things, I have seen sexual harassment, bullying and other action that could harm others. Moreover, using the web sometimes requires signing your private information up, this is sometimes misused by the company, and there are cases where people’s data are leaked. Even though I haven’t had any bad experience with privacy concerns, this made me very aware about using the web and giving you personal data. 

UNIVERSALITY AND ISOLATION

Universality occurs when information online can be accessed from anywhere. This is supported by URI (Universal Resource Identifier) known as URL (Uniform Resource Locator) today.Universality is an open and unrestricted environment where users can access any content, website, or service without limitations or censorship. The disadvantage of this is that some of the cable television companies that sell internet connectivity are considering whether to limit their internet use to downloading only the company’s mix of entertainment. 

Isolation occurs when each piece of information does not have URI. Connections among data exist only within a site. The disadvantage from isolation is that the bigger the site, the bigger the browser, it becomes a monopoly that limits innovation. For instance, if you subscribe to a cable company’s internet service, they may restrict your access to competitors’ streaming services, making it difficult to access content from other providers.

OPEN STANDARDS AND CLOSE WORLDS 

Open standard is a software that is open to the public and doesn’t belong to a specific company. For example: HTML, URI and HTTP. Amazon is one example, they can use HTML, URI and HTTP without asking anyone’s permission and without paying. Similarly, anyone can create their own website or establish a company that makes use of these open standards without the need for external approval.

However, close worlds are the opposite of open standards where you can’t make a link to any information. The software is limited just between the companies. For example itunes, they use their own addresses beginning with “itunes”. They make you trapped in just their market and not moving to others. 

THE WEB AND THE INTERNET 

The Web is an application that runs on the internet and the information travels primarily through HTTP. The internet is the network of connected computers that the web works on, as well as what emails and files travel across. The Web or usually known as the World Wide Web (www) is a collection of information that can be accessed via the internet.

According to the author, the web in the future will be a social machine where people post their restaurant reviews on the web. Today, this is everywhere, especially in China where you can search for a restaurant nearby with a description in it, ratings, price and even the menu. Another example of the web in the future of free bandwidth is Kolibri. Kolibri is an educational platform that is designed to work offline. This gives a big advantage to students living in rural areas with poor internet access. They can still access educational materials.

OUT OF THE BLUE

In mini project 4, it’s more about experimenting with the for loop statements. We aimed to create 9 still images made out of repeating visual elements. This is a fun project as we can do experiments and guess the final result. For my work, I combined different shapes and sizes of circles with lines with the shades of blue. Moreover, I don’t draw the result of the pattern in my head first, but I play with the variables and number, and when I’m pleased with the visual output.

 

The properties that I have manipulated in my work are iteration (‘i=)  and color of the shapes. I also care about the color composition. Not only the amount of iteration, it’s also the sizes of the shapes. For the iteration, I did a guess and check, if it doesn’t fit the composition i would change into a higher or a lower number.  I also change the orientation of the shapes, whether it’s in the correct position or not, to make the output have a balanced composition.

REFLECTIONS

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

Drawing by hand and programming the computer to draw have some differences. Where, drawing by hand you, it is more flexible in making changes according to your creativity. While in computers you need to ‘guess and check’ your variables to the result, it’s more random.  However, the computer is more accurate in drawing geometrically perfect shapes and patterns. While drawing by hand to draw a perfect circle we need the tools to do the same thing with straight lines. 

Both of them still allow us to express our creativity in our work. Also both of the processes need the understanding of composition and principles such as balance, contrast, color theory, and spatial relationships to create aesthetically pleasing images.

What makes a good generative pattern?

I believe that making a good generative pattern is one that captivates the views and conveys a sense of order or structure, giving the viewer an aesthetically pleasing feeling. Good generative pattern also has a correct balance of composition and colors in their work, which makes it pleasing to the eye. 

In Mini Project 3, I had the opportunity to explore several motion concepts introduced during our class sessions. These cover fundamental principles such as sine and cosine functions, mapping techniques, noise motion, and circular motions. The main point of my project is the  “Rainbow Circular Motion,” which is the centerpiece of this abstract. Furthermore, the sin and cos movements are supporting elements, with a soft color not vibrant so it doesn’t overpower the rainbow circle. Next, the letter ‘X’ is made by the circular shapes having the intersection points to evoke a sense of harmonious circular motion. The symmetric color ,also a rainbow color, on the left and right to make the circle also the main point. In the middle of this colorful composition, the white background serves as a canvas, to increase the vibrancy of the rainbow hues, making them truly pop and captivate the viewer’s attention.

 

the script for the Rainbow angular motion: 

the script for the “X” circle: 

the script for the sine cosine functions: 

PROJECT A DESCRIPTION

My storyline for my project A will be about stingrays. Which will cover the mouse movement, angular motion, and sine cosine functions. The story will start from stars falling into the ocean, casting a spell of magic beneath the waves, with the mouse movement for the moving the ‘stars’ in the ocean. The falling stars will apply the motion of noise.  The harmonious rhythms of oscillations and sine cosine functions will draw the waves. The inspiration for these waves derives from the creation of Doxia Studio.

 

Portfolio

Stingrays will appear with bubbles blocking them from meeting each other. This is where the mouse movement will be applied, “move the bubble to unite the two stingrays.” After both of the stingrays meet, an angular motion inspired by Katharina Brunner, will appear around the stingray that signifies magic is happening.

Software

the angular motion, you can press the stingray’s dots and to make more stingrays appear to your screen.