Creative Coding Lab

TINA CHEN, EXPLORE : THROUGH THE DECADES

PROJECT DESCRIPTION

EXPLORE : THROUGH THE DECADES

2023

Interactive Art

ELEVATOR PITCH 

Explore attempts to create a museum gallery/time machine like website where the user can travel through the decades of the Chinese dynasties and see all that these time periods holds. From inventions to important historical figures to fashion, Explore introduces all aspects of the dynasties to the audience.

ABSTRACT

Explore is a stimulation of a time traveling website where the user can ‘travel’ through time through the scrolling of the pages on the website.  It is a website that attempts to contain all the aspects of China’s dynasties and to showcase it in an engaging and interactive way through the mechanisms of scrolling and hovering. The choice of which dynasty and what aspects of the dynasty shall be seen and explored lays in the hand of the audience and through these explorations they are also capable of making comparisons among different dynasties as they scroll up and down. 

Upper most part of the website/the title

Part II

1) Process: Design and Composition

The initial idea for the website was to have the user click icons that corresponds to each dynasty and then have the page jump to whichever dynasty the user chose. However, after relaying my proposal ideas to Professor Marcela, she suggested that the simple act of scrolling up/down/left/right is a better option as it is a better storytelling technique. I think the use of scrolling to tell the story of the dynasties really simplifies my website for both the user and myself as the developer as I don’t have to implement as many html pages as I would have if I sticked with my original plan. To add more interaction to the website I incorporated little captions and unless the user hovers over the caption, they would not be magnified for the user. This not only saves “space” but also it does not affect the layout of the boxes. Moreover, I underestimated the amount of research that I would need to do in order to fulfill my hopes of having all the main dynasties on my website. The website would be more complete if I were able to incorporate all the dynasties that I had initially planned to include. On the flex boxes that requires a lot of information, I used a p5 sketch for each of them that had a slideshow of all the information. That way there’s no resizing of information needed on the flex boxes in order for the user to view the content. 

First page of every dynasty 
The boxes that contained a slideshow of important people (left) and territorial map

The box with a slideshow of fashion and the mouse-hovering caption

2) Process: Technical

The first challenge I faced was how to make the horizontal scrolling affect. After doing much research, I was introduced to the concept of flex boxes. Hence, for each dynasty I designed the website in such a way that they each had their own div box that contained all the flex boxes for each of the categories. In this way I was able to fulfill my plan of having the user scrolling up/down/left/right. Moreover, I was faced with the challenge of how to create a p5 sketch that ‘scrolled’ through a massive painting. I had wanted to use the painting the 清明上河图(Along the River during the Qingming Festival), but it was a massive painting. The ultimate plan was that I downloaded 22 parts of the painting and then had the p5 sketch load the individual parts as an object of a Pic class that I had implemented which would be in charge of moving each part of the painting out of the canvas to create the affect of a moving background. I also used this technique on some of my other flex boxes as a slideshow of the information I wanted to showcase. My biggest challenge for this project was the researching. As mentioned earlier, I had underestimated the amount and time needed for the research aspect of this project which lead me to have to size down on the amount of info I was able to provide for each of the flex boxes of the dynasties. If I had more time I would like to improve the overall aesthetics of the website as the flex boxes didn’t really match my theme of ancient China and also implementing different ways to show my content rather than using just p5 sketches with slideshows. 

3) Reflection and Future Development

In terms of visuals, I am satisfied with what I have achieved. The scrolling affects and the addition of using a p5 sketch as the background along with the music really sets the scene of immersing the audience in a ‘traveling back in time to ancient China’ type of experience. It is quite accurate to how I had imagined the visuals to be like back when I was brainstorming ideas. Due to time constraints I was unable to incorporate more dynasties onto the website, however if all the dynasties were incorporated I’d feel like the website would be more complete. There’s definitely a lot of researching work that needs to be done in order for this website to be polished and finished. In addition, I feel like there’s a lack of interactivity. I would love to use a p5 sketch for each of the first cubes of the dynasties and have the audience ‘scratch’ open the boxes to reveal what dynasty they are currently exploring. Overall, as my first official attempt on Web Development, I am satisfied with all the techniques and skills I have acquired and applied on this project. 

My understanding of New Media Art is the use of technology to produce art rather than using the traditional art tools. Although this article was published in 2007, the author’s definition of New Media Art still coincides with my own. With the arise of newer technological devices, the Conception of New Media Art is no longer constrained simply by the use of computers. Rather we have 3d printers, smartphones, and iPads that also allows us to express art through technology. Back in 2007, many of these technologies are not widely used yet so their understanding of what could be used as the tool for New Media Art is limited. 

Artist John F. Simon Jr. created a New Media Art called Every Icon where the program runs on its own and attempts to create every picture that could possibly fit in a 32 x 32 grid. The program just colors the squares on the grid as it they were pixels and a combination of white and black grids creates an image. To see the final image will take trillions of years as there are some many possibilities on the grid to create diverse images. Born in 1963 in Louisiana, John F. Simon Jr utilized LCD screens and computer programming to create visual imagery. Simon’s style of art fits with the definition of conceptual art mentioned in the article. His art is a form of New Media Art because he utilized his skills in software development to create visual images. His works are more conceptual because they focus more on his own ideas rather than trying to convey some political or social meaning. 

Moreover, Jon Thomson and Alison Craighead are two artists who live and work in London. They make artworks for galleries, online, and outdoors. Most of their works focuses on live networks and how they are changing the way people understand the world. One of their work pieces called Telephony (2010) consists of a wall based grid of 42 Siemens mobile telephones and the audience can dial these phones and they will begin to call each other to create music. Every phone is individually programmed with a different ringtone. This piece of work is another form of Conceptual New Media Art as it introduces a new idea and way of creating music. It is very similar to musical tools that musicians would use nowadays to create their pieces with where they simply press a button to produce a specific sound and then a combination of multiple sounds becomes music. Telephony is like the earlier adaptation of such an idea which overtime has changed form from pressing physical buttons to pressing screens. 

Description:

For this project I plan to create a museum gallery/time machine-like webpage that displays information about Chinese dynasties from clothing to famous people to territory. The purpose of this site is to give users a “traveling through time” like experience where they can visually see the passing of time and explore each time period with the additional information provided. The webpage will be organized as so: scrolling left or right on a dynasty will reveal all the information about that specific dynasty and scrolling up and down will take you to different dynasties. Hovering over a specific picture will enlarge the text and the picture itself for the viewer to see more clearly. With regards to the limited time that I have I will only focus on 10 dynasties in which I find the most interesting and the rest will still remain on the timeline but it will not be thoroughly described. 

Visual Prototype:

Slides deck:

https://docs.google.com/presentation/d/1QuRQVghO_ykkIhp2hMbzMtJUXQwdBx0i53uOrUOIV4E/edit?usp=sharing

Link to Github Page:

https://github.com/tc0610/cclab/tree/main/11r-sketch-gallery-page

Link to WebPage:

https://tc0610.github.io/cclab/11r-sketch-gallery-page/

Description:

For this project I created a gallery page for my midterm project. The webpage describes the function and insights behind why the midterm project was created. 

Final Result:

Coding:

I did not have any trouble with creating a javascript file and placing that into a div nor was the html file difficult to manage either. However, the css file was quite challenging as I had to trial and error with the position of the boxes in order to get the result I wanted. Below is the code for my css file:

Reflections:

Orderly file names allow us to find and utilize specific files that we need without having to look through every file to double check that it is the correct one. We use classes when there are several divs that would share the same features. We use IDs when specific divs has their own unique feature that we want to distinguish from. I initially planned to put multiple javascript files on the website but I found that I could only place one, or the website would only show one even when I upload multiple ones. Styling text in text editors are much easier as the text editors usually have all the font families loaded and ready to be used. In addition, it is a lot easier to place words at specific locations compared to writing HTML. However, the placement of texts in HTML are more flexible in terms of where the text can be placed on the page. On my page I upload the js file in order to have my midterm project accessible and the HTML was used to upload all the images, js files, and content I wanted to put on the page. Lastly, I ordered and organized the contents with the CSS file. Writing HTML or CSS is different in terms of syntax. 

An example of an ill effect of the Web that I have experienced is the walling of information. There have been multiple instances where I had wanted to read an article related to a paper that I am writing but I couldn’t directly have access to that specific article because I am not a subscriber of the specific website. In addition, living in China without a VPN means that I am disconnected from the rest of my life back in America because I am unable to use any western apps or go on western websites. Universality is the characteristic of being able to comply and work with any form of information and data. Having universality means that anything from a sentence to a series of numbers to pages of essays can be posted and shared on the Web for everyone to access. Isolation occurs between individual sites where the information that you post on one site cannot be reused and transferred to another site. The individual sites are walled off from each other. While the Web allows universality on the level of types of information posted, there is still isolation between these information in the forms of individual sites. Open standards are standards that allows anyone to contribute to the design of the sites on the Web. These standards are available for free on the Web for both developers and users and there’s no consent from anyone needed. Closed worlds are “worlds” separated from the Web where a specific link can only be opened by a specific program. The information shared in a closed world cannot be shared within the web. The Web is one of many applications that runs on the internet. The internet is an electronic network in charge of transmitting packets of information among computers according to some open protocols. Any application can run on the internet as long as it follows the Internet protocols. The author mentioned his vision of the “proliferation of smartphones” as a means of making the Web more central to people’s lives and he is absolutely right. Unlike computers, smartphones are a lot more handy and portable for daily uses and has become an essential of our lives. For some societies, smartphones function as a communications, entertainment, and payment device. I think the author will be in shocked at how humanity’s behavior and way of living has been improved and changed by smartphones. With the development of messaging apps people have started to refrain from the actual act of making phone calls. In terms of devising pages that works well on all screens, a good representation of that would be how we are able to open the same link from both smartphones and computers no matter the brand or size of the machines. Finally, linked data has been improved throughout the years. Nowadays we have large linked open data sets like DBpedia and Wikidata. 

TINA CHEN, SHORE : THE ROLLING OF THE TIDES 

PROJECT DESCRIPTION

SHORE : THE ROLLING OF THE TIDES 

2023

Interactive Art

ELEVATOR PITCH 

Shore attempts to replicate the behaviors of rolling tides washing upon shore. The audience is not solely an observer of this natural phenomenon but also a participant who can interfere with the waves and the sand. Shore is a stimulation that seeks to magnify humanity’s role as an interference nature. 

 Crashing waves

ABSTRACT

Shore is a stimulation of human interaction with the tides that gets washed upon shore.  Visualize the movement of the tides as it crashes on the sand, leaving a trail of foam as it disappears into the vast ocean. Try to step on the sand and the water with the clicking of the mouse. You will see that no matter what damage or change you’ve done will eventually by recovered by the natural world. It’s as if you’ve never took a step on that sand or interrupted the rhythm of the tides. As if you never existed at all. Like the sea foam left on shore and the footprint that disappeared, we humans are a temporary stay on this Earth as well. Forget about all the mistakes you’ve done, bad grades you’ve gotten, or the embarrassments you’ve had. The rolling tides of time will erase them for you so don’t you look back on them. In the end, we are erased from the natural world anyways. 

Part II

1) Process: Design and Composition

My initial intentions were to draw the waves with vectors and lines and using circles as the foam. However, after encountering the following painting by artist D. TaoI soon realized that I don’t need defined lines to recreate waves. I can recreate an abstract wave with solid shapes of different shades of blue instead to add more depth to my water. I wanted my wave to be made up of wave particles that are of circular shapes and different shades of blue. 

I then pondered on what form my wave particles should have and decided that circle was a better option than rectangles because I wanted to create the phenomenon of waves crashing on shore and leaving a trail of white foam. The transition of color from blue to white can be achieved by circles better than rectangles because foams are roundish. The user interaction of stepping on sand was achieved by using a not outlined ellipse filled in with a color that was close to that of a leftover footprint on sand. The effect of stomping into water was planned out to be that the water particles would repel from the area where the mouse lands out. At first I only created a single wave that kept moving on shore but it was not ideal because when the water particles moved back and forth between the ocean and sand there was a period of blankness in the art as shown below.

My solution to this was to add another layer of wave particles underneath the moving wave and those wave particles will fill in the empty spots. I also designed the layer underneath with wave particles that moved back and forth so that it is not a static section of just blue circles. This step added more dimensions and layers to the waves. 

For the repelling wave particles I tried both the mousePressed()  and mouseIsPressed() and decided that the mouseIsPressed() is ideal because I want the repulsion to occurs the whole time while the mouse is being pressed down. A classmate (Rudy) suggested that to make the waves look more realistic I should try to have the white foam be a more solid white when the waves first come in contact with the shoreline and then fade to a more transparent foam so I played around with the opacity to create that effect. A fellow (Samantha) suggested that I should include the aspect of footprints on the sand as an additional interaction which I was able to accomplish by simply drawing an ellipse. This additional interaction really makes this piece more realistic. 

Below are the main designs of Shore.

                 The crashing of the tides                       Sand Stepping                           Stomping into Water 

2) Process: Technical

One technical issue that I had was the coloring the wave particles. I knew that I could achieve the different shades of blue with the color mode HSB but I was not familiar with the function so it was quite frustrating. I eventually solved this issue by just randomizing the shades of blue in RGB mode instead by finding out what ranges of r, g, and b the shades of blue usually lies on. Another issue was with the repelling of the water particles when the mouse is clicked. The particles were repelling in the right way but when the mouse is released they were not gradually moving back to their original spots. However, this was a problem that solved itself because the continuous movement of the wave particles was able to hide the empty spot left behind. This part can definitely be implemented better. I would really focus more on trying to figure out how to achieve the returning of the wave particles to fill in the empty spot left behind after the displacement. In addition, if I could do it again I would make the footprints created last longer and gradually fade away rather than immediately fading. Moreover, the transition of the waves into foams can be achieved better if the waves turned a lighter shade the closer it got to the shoreline. 

3) Reflection and Future Development

In terms of visuals, I am very satisfied with what I have achieved. It is quite accurate to how I had imagined the visuals to be like back when I was brainstorming ideas.  Rudy’s comment about the opacity of the white foam and Samantha’s feedback about adding footprints made a huge difference in terms of how realistic Shore became. I do wish that I had made the footprints have  subtle disappearance rather than disappearing right away after the user stops pressing on the sand. In addition, the suggestion of having the waves turn from dark blue to light and then to the white foam was something that I hadn’t thought about and I think would definitely add a lot more to the visualization of the piece. In terms of interaction I would like to improve on the behavior of the wave particles after the user stops pressing on the water. While the movement of the wave particles makes the recovering of the empty spot easier it is still quite awkward that after the user pressed the mouse there are no wave particles in that spot other than the moving ones. Overall, I think Shore is quite a success because it did in fact fulfill my initial goal of replication a stimulation of crashing waves.

Link to final product:

https://editor.p5js.org/tina06c/sketches/3uIi4PaI5

Description:

For this project I intend to recreate the natural phenomenon of balloons floating in the sky. I created the class Particles which displays a balloon on the canvas. Based on which display function is called the balloon can be squared or round. In addition, the balloon also has a move() method that controls its movement and there’s a release() method that determines the whether the balloon is in the release state or not. The default state of a balloon is that it will be generated on the bottom of the canvas and moving up until it is no longer seen (at that point it is in outer space and we no longer see it). If the balloon is in release state the balloon will float down rather than up due to the lost of air inside. When the balloon enters release state its face will turn from a happy face to a sad face. In addition, a balloon in release state will shrink and become skinnier due to loss of air. 

Final Result:

Coding:

The bString() function is in charge of displaying the string of the balloon if the balloon is not released. The displayCircle() and displayRect() functions are used for displaying either a round balloon or a rectangle one. The releaseAir() function is in charge of signaling the releasing of the air to the variable release  which is checked within every displaying function in order to know which type of balloon is displayed on screen. The move() function is in charge of the balloon’s floating movement and the sadFace() and happy() functions are in charge of displaying the balloon’s emotions. 

bString() {
if (this.release) {
//nothing
} else {
push();
translate(this.x, this.y);
stroke(0);
noFill();
beginShape();
curveVertex(this.p1, this.p1y);
curveVertex(this.p1, this.p1y);
curveVertex(this.p2, this.p2y);
curveVertex(this.p3, this.p3y);
curveVertex(this.p1, this.p4y);
curveVertex(this.p1, this.p4y);
endShape();
pop();
}
}

displayCircle() {
this.bString();
push();
translate(this.x, this.y);
noStroke();
colorMode(HSB, 100);
fill(this.color, 20, 100);
ellipse(0, 0, this.w, this.h);
pop();
if (this.release) {
this.sadFace();
} else {
this.happy();
}
}
displayRect() {
this.bString();
push();
translate(this.x, this.y);
noStroke();
rectMode(CENTER);
colorMode(HSB, 100);
fill(this.color, 20, 100);
rect(0, 0, this.w, this.h);
pop();
if (this.release) {
this.sadFace();
} else {
this.happy();
}
}

move() {
this.x += random(-2, 2);
if (this.release) {
this.y += this.ySpd;
this.p1y += this.ySpd / 100;
this.p2y += this.ySpd / 100;
this.p3y += this.ySpd / 100;
this.p4y += this.ySpd / 100;
} else {
this.y -= this.ySpd;
this.p1y -= this.ySpd / 100;
this.p2y -= this.ySpd / 100;
this.p3y -= this.ySpd / 100;
this.p4y -= this.ySpd / 100;
}
}

releaseAir() {
this.w = 40;
this.release = true;
}

sadFace() {
push();
translate(this.x, this.y);
fill(0);
circle(this.w * 0.3, 0, this.w * 0.05);
circle(-this.w * 0.3, 0, this.w * 0.05);
arc(0, 10, this.w * 0.3, this.w * 0.3, PI, 2 * PI);
pop();
}
happy() {
push();
translate(this.x, this.y);
fill(0);
circle(this.w * 0.3, 0, this.w * 0.05);
circle(-this.w * 0.3, 0, this.w * 0.05);
arc(0, 0, this.w * 0.3, this.w * 0.3, 0, PI);
pop();
}

Reflections:

Object-Oriented Programming is when we write code and programs using objects and classes.  A class defines object properties and behaviors and is the blueprint for creating objects. An object is an instance of a class and it has all of the properties and behaviors that the class has. OOP is frequently useful in situations when we want to create things with similar behavior and features but they differ in small variable details. By programming in OOP we can avoid writing duplicating and excessive code. We usually create classes for objects that are called multiple times. I have created objects like Clouds and Balloons. The Clouds and Balloons have a display() function to show and they can move through the calling of the move() function. The Clouds and Balloons have properties such as x and y coordinates, length and width, color, and speed. I was able to make them float up, down, or bounce on the screen. The Balloons can change their facial expressions and release air when asked to do so. 

Description:

The subject of my project is ocean waves.  I plan to recreate the scene of ocean waves washing upon a sandy shore and sea foams colliding with each other. In my work the waves will keep washing on the shore and moving back and forth, leaving sea foams when they leave the shore. The interaction will occur when the user presses the mouse on a specific spot of the canvas the waves will break and come back together, mimicking the reaction of waves when someone stomps on it. I am debating between using just circles to recreate the whole wave or a combination of  lines and/or vectors. It will be decided when I try both options. The sea foams will be made of circles. When the mouse is pressed, the lines will be coded to move away from the area that the mouse landed on and join back together after some time. This project is a demonstration of humanity’s interaction and affect on natural phenomenon’s in the world. 

Drafts:

Link to Google Slides:

https://docs.google.com/presentation/d/1SqM8sy6BF_us5dCTv8qDurSElV_g7Ig6epCw2ge0gXg/edit#slide=id.g2004b50afbe_0_0

Link to final product:

https://editor.p5js.org/tina06c/sketches/3uIi4PaI5

Description:

For this project I created the class tinaDancer which creates objects of dancing bears wearing a tutu and waving its arms up and down. Every time a new object is created the color of the bear’s tutu will be a different color. 

Final Result:

Coding:

For this assignment I reused a previously created function that I created to draw the same bear. What’s different this time is that I removed the parameter s used to determine the scale of the bear and I added a rotate() function before the drawings of the arms of the bear in order to create the dancing motion of the bear. As shown below the rotate() function takes in the variables this.armR and this.armL which stores the degree at which each arm should rotate. The degree and pace at which the arms should rotate are determined by the update() function . In the update() function I used the modulo operation to have the right arm be rotated at -PI/4 and the left arm at its original position whenever the frameCount is a multiple of 10. I then included a counter variable to have the arms switch positions again when counter is a multiple of 6. This is my technique of having the arms of the bear swinging back and forth. 

update() {
if (this.x < this.xMin || this.x > this.xMax) {
this.speedX = -this.speedX;
}
this.x += this.speedX;

if (frameCount % 10 == 0){
this.armR = -PI/4;
this.armL = 0;
this.counter ++;
}
if (this.counter % 6 == 0) {
this.armR = 0;
this.armL = PI/4;
}

}
display() {
//right arm
noStroke();
push();
fill(140, 108, 79);
translate(this.x, this.y);
rotate(this.armR);
ellipse(20, 40, 70, 30);
pop();

//left arm
push();
fill(140, 108, 79);
translate(this.x, this.y);
rotate(this.armL);
ellipse(-20, 40, 70, 30);
pop();

Reflections:

The benefit of the class not relying on code outside of its own definition is that I can create objects in other sketches from this class without worrying about other parameters other than the x and y coordinates. I no longer have to repeat the same long codes over and over again to retrieve the same bear with different tutu colors. What makes it challenging to write code that has to harmonize with the code other people have is the fact that the parameters have to be as concise as possible to make it easier to construct the objects in other sketches. In terms of reusability, I can reuse the file of the tinaDancer class over and over again without ever having to rewrite any of the code that I have already written. In terms of modularity, the different aspects of the bear are coded in different functions and as a whole they make up the dancing bear object. In the code we have a function that accounts for the movement of the bear (update()) and we have a code for the display of the bear (display()). The dancer is only whole when we combine and call both functions. 

Link to final product:

https://editor.p5js.org/tina06c/sketches/_FLyYx5rU

Description:

For this project I created 5 functions that, when called together, creates the image of a bear-like creature. I created arrays for the x and y coordinates of the bear and the scale at which the bear should be drawn on the canvas. The length of the array is determined by the random function. 

Final Result:

Coding:

For this assignment I first coded every single component of the creature all under the draw loop to see how they should look like combined together.  Before discovering the scale() function I was initially trying to figure our the ratios between my shapes and then multiplying that ratio to their corresponding values. However, I soon realized that I can just use scale to change the sizes of my shapes proportionally.  After doing that, I split each component into their own draw functions and all the body parts are called in the drawCreature() function where they make a final creatyre together. Link 1 was used to generate the colors needed. 

Link 1:

https://www.rapidtables.com/web/color/RGB_Color.html

Reflections:

My project utilized three arrays; one for storing the x coordinate, one for y coordinate, and the last one for the scale of the creature. I occupied the arrays with a for loop and the length of each array is determined by a variable that gets its value from the random function. The arrays makes the creation of multiple creatures very easily and I used the arrays to help me see if my creature came out right even when the parameters changed. I used translate(), push(), and pop() for when I wanted to scale the shapes accordingly. User-defined functions allows me to organize my code based on their functionalities. The functions made my code easier to be read and understood by others and myself and the code looked a lot cleaner. The functions all had the parameters x, y, and scaleNum. The x and y were passed to the functions so that they know where to draw the shapes and the scaleNum is what determines how big the shapes were to be. It was a lot easier to find and manipulate specific parts of my code without worry that it will affect the other functions with the use of User-defined functions.