Category: Creative Coding

Link to project: https://jawen21.github.io/CCLAB_fall-2022//project/

Title: A Glimpse

The Elevator Pitch: It is a web designed to let users immerse themselves in the Christmas spirit by uploading their favorite Christmas photos or simply using their creativity to draw a Christmas tree of their own.

Abstract: The web is designed during the Christmas holidays when users can immerse themselves in the Christmas spirit, though users can still play it during other times when it’s not Christmas. The first few things we see on this page are the snow falling. It won’t be Christmas if there isn’t any snow. The way the colors were chosen is to specially fit the Christmas theme, which is the color of green and red. Displayed in the middle is a slideshow of pictures that reminds me of Christmas and when users scroll down to the bottom of the website, they could upload their own photos that remind them of Christmas. Users can upload as many photos as they want and the photos will be aligned together side by side, so it looks like a gallery. The gallery of photos will disappear once users refresh the page, just like how Christmas and good memories don’t always last forever. However, what we could do is take pictures and share photos with each other so that we can share our memories with each other. It’s a way to make our favorite moment last a bit longer. The upper right side of the web will be a link that will direct users to another page. The page will have a blank blackboard where users can draw their Christmas trees or just anything they want. While we let our creativity go wild, we can play some Christmas music to let us immerse ourselves in the Christmas holidays.  To the left are some directions on how to use the mouse pressed and keys to display colors on the blackboard. The colors are chosen based on the Christmas theme.

Process: Design and Composition

 My initial concept revolves around only my photos only where I put my photos in a slideshow and people could view it. It was after much planning was when I thought of letting users be able to upload their own photos from their computer files. I thought that this interaction will be a fun way for users to use their creativity to take part in designing the website too. By uploading photos from their computer file, users could create a mood board and create their own aesthetic from it. I hope uploading file features would give users more freedom to express their own creativity rather than interacting with what’s limited on the website that I designed for them. The Christmas theme was also a pretty last minute because since it’s almost Christmas, I wanted to create a Christmas theme to light up the spirit of the holiday. The background is p5.js where there are snow particles falling. Originally the idea is to have stars coming together into the middle, but since my theme is Christmas, I thought of doing snow particles to fit the theme better. The second HTML page was supposed to be just an about page but I feel like that’ll leave my website pretty boring because there isn’t much interaction going on. That’s when I thought of using key and mouse interaction to let users be able to draw something on the screen.    

 Process: Technical 

The technical challenge is fitting the whole p5.js background onto the web page. It’s hard to set the p5.js as a background where it’ll fit the whole screen. On my computer, the p5.js will fit my own web, but when I looked at other people’s screen which is bigger than mine, the p5.js background isn’t covering the whole web. Another challenge is the upload file feature. It took me forever to get it right because initially, I was able to use the button to upload the photos from my computer, but the photo doesn’t appear on the web. The only thing I see is the photo’s name but I don’t see the photo anywhere on the screen. I tried many times and I found out that I need to get the image by FileRead so I added some more codes to it, and it finally worked. Another thing is that the file upload feature is on the left side of the web. I tried to make it in the middle of the web right below the line “  upload your favorite picture that reminds you of Christmas”. However, I realized that if I put the bottom there, the uploaded image will start to align starting in the middle of the page, which doesn’t look good. Therefore, I put the upload file feature on the left side of the web so that the photos will start to align front on the left side and slowly fill up the column from left to right.

Reflection and Future Development

The part that I feel like worked really well is the upload the file feature because I feel like it raises my web to a whole new level. It has a lot of potential to it but I also really wanted to further develop this part where users can actually save the photos they upload and people cans see what each other has posted. The feedback I got is that I could make the button look nicer, instead of just a plain button. I also got the feedback that I could maybe take out the green border along the picture slideshow so that it looks like the slideshow is with the background. People also suggested that I could add a feature where users can upload their own music because some people have their own Christmas music in another language. Personally, I also wanted to work on my front HTML page more, because it looks very bland. I want to work on my CSS style more so the page looks more visually appealing and smooth to see.

Images:

 

Left picture: This was when the image name show up but the image itself is nowhere to be seen

Title: Glimpse of my life

Description: My idea is to take some of my favorite photos and videos that I have in my photo album and create a gallery-like website. The moment you open the website, you will see a small tv screen in the middle of the website. The tv will play some of the pictures and videos that I’ve chosen. There will also be a title located in the top left. The About section will be on the top right side of the web. Users can click on it and it’ll lead them to a new HTML page that has my information.  The interactive part of this web is the background. The background will be interactive for the users to play around with. While the tv is playing, the background will also slowly be changing between day and night. When the background is nighttime/black color, users can click anywhere using their mouse, and there will be stars appearing ranging in different sizes. Some stars will be big while some will be small. When it’s daytime/ white color, users can click anywhere on the background and clouds will appear in different sizes. Users can also move the clouds around.

Reference:

89 steps: http://89.lossur.es/  I got my idea from this website. The moment I opened the website, a video starts playing and I find it very interesting.

Sound: https://www.patatap.com/I find this interactive way through sound and keyboard really interesting. I might include this in the project if time allows.

My understanding of new Media art is arts designed and produced by technology,  electronic media technologies, computer animation, digital art, interactive art, sound art, Internet art, robotics, 3D printing, and basically anytime where arts and creativity collide with technology. Whereas, the author sees new Media arts beyond just technology. It is also a movement, a cultural form. In the reading, the author stated, “New Media art can be seen as a response to the information technology revolution and the digitization of cultural forms”. The reading was published in 2007 when Apple just started. I feel like Apple really plays an important role in new media art, especially in digital art. I don’t know much about digital art but I feel like since the iPad and iPad pencil was released, a lot of people can easily do digital art anywhere and anytime. With just an iPad and an iPad pencil, art can be made everywhere. Maybe in 2007, new Media art is just a new concept. However, as technology is getting more advance, Media art has gotten more and more attention.

In 1998, the New Media artist duo Thompson and Craighead created a sampled video game called Trigger Happy. The format of this game is similar to the early arcade game. Jon Thomson and Alison Craighead are both artists that make artworks that look at live networks and through their artwork, we can tell how media arts are changing the way we understand the world around us. Trigger Happy” reflects, and comments upon, the electronic environment in which we live, work and play”. They look at the “relationship between hypertext, authorship, and the individual”.

Another piece of new media art called Rebirth of a nation is created by Paul Miller in 2002. Paul Miller also known as DJ Spooky, That Subliminal Kid is an influential DJ, writer, and artist. The artwork is “a series of live performances in which he reworks D.W. Grith’s controversial 1915 film Birth of A Nation while assembling an improvised soundtrack out of layers of sampled sound”. This is an example of artists reflecting upon art history in their work, and updating projects from the old era using a new technological environment and media to create this new media art that represents the new technological era we live in.

Reference: http://www.thomson-craighead.net/thap.html

Link to the website: https://jiawen21.github.io/CCLAB_fall-2022/blank_p5_template/

Brief Description: This p5.js sketch is one that never made it to the official submission. This was supposed to be for another mini-project a few weeks ago but I ended up choosing another sketch over this. The theme of this website is black and white because the p5. sketch is black and white, so I feel like a white and black website would really fit the overall theme of the sketch. The reason why the embedded link isn’t in white is because no matter what color I tried changing it to, it’s just forever in purple color.

Reflection: 

1. Naming files can help keep the folder organized. Inside the folders, there are many files. We can keep the HTML code in one file and the CSS code in another file. When it comes to images, we can put them in the same folder so that it’s easier to find them whenever we need to use the images again. Also, when we need to src the images, we can go to the same folder to find the images so that not only is it time-conservative but also everything is in one place.
2. I use ID when I want to apply unique features for one certain part of my website. I use class when I want to reuse that feature again so that I don’t need to rewrite the code again and again,
3. I’m not sure if this is a limitation but there is a black border on the top. It seems like the coding won’t affect the black border there.
4. In HTML, I can give it an exact position of where I want the image to be. In word editor, I need to move my mouse to move the image but it wouldn’t give me an exact number for the position the image is at. HTML is more number precise but it takes some more time while word editor is less number precise and takes less time to move the images around. In addition, I can alter the text in a more creative way in HTML whereas, in the word editor, I can’t do that. 
5. P5.js is a more interactive way for users to play, while HTML and CSS are more visual ways to play with.  It’s not interactive but when p5.js, HTML, and CSS are combined together, it creates a really fun interactive way for users to interact with. 

Examples of ill effects could be when I search something up on google and then I go to my social media and see relevant ads to things I just looked up on google. It gives me this feeling that I am being stalked and that my information is being leaked to big companies as they can trace down all my interest and what my life is like. Another example could be government knowing exactly which location I’m at. In China, when I use the metro app to take the subway, they track my location down so they could calculate how much I have to pay for transportation. I don’t like it when apps track my location because I feel like they know everything I’m doing especially what places I’ve been to.

The URI is the key to universality. Links help turn the Web’s content into something bigger where everyone around the world can have access to it. The isolation occurs because each piece of information does not have a URI. Connections among data exist only within a site. So the more you enter, the more you become locked in.

Openness is when you can build your Web site or company without anyone’s approval. Open standards also foster one’s imagination. I think Facebook is an example of web openness because mark Zuckerberg created Facebook on the web without anyone’s approval. Close world is when we can’t send a link to someone else to see. You are no longer on the Web. For example, when I use an app instead of a website is when it an example of a closed world. Keeping it open is a way to let more people invent new services

The Web is an application that runs on the Internet. The Internet is a network that puts information into packets and ships them among computers through wireless media. I’m not sure, but I think p5.js could be considered as a web that runs on the internet. Once I copy and paste the link, it could be shared among everyone on the internet. I consider it an open standard. Anyone can put information or change the code.

Some future progress that the author envisions are open data, where putting data on the web and linking them and connecting people everywhere around the world. The author also envisions a future of social machines, where people use social media to share their thoughts and life. There is also the future of web science and free bandwidth. Web science reveals intriguing insights into the Web’s design, operation, and impact on society. Whereas, free, very low bandwidth service could improve education, health, and the economy in these regions.

I think we have already achieved open data and social machines. There’s data everywhere on the web and people are constantly putting new data and changing the data every day. We have also achieved social machines because social media is everywhere on the web. We have restaurant reviews on the web and people can even reserve seats on the web. For web science, I don’t know much about it but I feel like if it’s talking about web design, then it’s definitely becoming bigger since many people are pursuing web design as their career choice. Also, a lot of places are providing free bandwidth but there are still some poor countries that don’t have it. For places that have better bandwidth, students can learn online and gain more knowledge of the outside world. It helps to expand so much knowledge to poorer places, offering them a lot more opportunities.

 

 

                                                     Flower Meadow   

Link to code: https://editor.p5js.org/jiawen21/sketches/KIzy3WUZF                                                  

The Elevator Pitch: As the day changes to night and night changes to day, everything changes except for the four lonely-looking flowers. We have four flowers in a meadow, each with its own unique color, with its petals rotating while yellow-looking snow particles fall down as the day changes to night

Abstract: The concept of this project is to create a garden of flowers.  Users can interact with the product by clicking the mouse to change the day into night or night into day. Users can also duplicate more colorful flowers by using a mouse press and every time when it’s refreshed, there’s a different color. As the four flowers stand there looking lonely, we also got yellow-looking snow falling down from the sky. When it’s at night, the yellow snow looks like fireflies. A garden full of flowers often reminds me of fireflies flying around and their chirping sound,  which creates this peaceful feeling, thus I hope to recreate this feeling in my project.

 

As the environment is changing and the particles are getting less and less until there is none, the only thing that doesn’t change is the four flowers rooting in the soil. In a way, the flowers could represent almost all the students in NYUSH. Everyone in NYUSH, whether it’s the students or faculties are constantly adapting to different environments, such as a new country, culture, language, food, or a sudden covid lockdown. Everything around us is changing and happening so fast and we’re in the midst of everything, just like the flowers. As everything is happening, the flower still stays so strong, so I think we as humans should be like those flowers.

Part 2

The process started out with one flower. One flower became two and then three and it went to four. After that, I added soil to the ground because the flower garden needs soil. The reason why the soil is black and not brown is that I feel like black fits the overall color theme. I added random colors to the flowers because I didn’t want to restrict the flowers to just one color. When I think of flowers, I think of many colors so I feel like a rainbow of colors fits the concept more. The background for daytime is blue instead of white because I feel like the white background is too bland, and the half-moon is white so if I did a white background for daytime, the half-moon wouldn’t appear because it’s also white. In the beginning, there was no change between day and night. It was just two clouds where users can move the clouds. However, I feel like the interaction is kind of boring so I added the day and night so there is actually a time frame involved in the process.

Throughout the process, I definitely learn a lot about class functions and interaction that I could do with keypress and mouse press. I didn’t do key pressed because I find the key pressed kind of annoying. If there’s a key pressed, I usually have to find the key first and then pressed it, which I find the experience not convenient. With the mouse pressed, it’s much easier and I don’t need to spend time looking for a key to press. If I had the chance to redo it again, I hope to add more flowers or add some petals to the flower’s stem so the stem doesn’t look very lonely with just one stick. I also would like the flower to sway back and forth but I feel like this process would be a bit challenging for the coding knowledge that I have right now. A discovery that I encountered along the way is accumulating particles. I didn’t plan that and I discovered it by accident when I was trying my code out. I find that very interesting and I hope to do more of those functions in future projects.

What I had originally imagined in mind compared to the final product that I have is somewhat different. What I had originally imagined in my mind is a place full of sunflowers and adding time function so the sunflower could grow as time goes on. I also wanted to make the sunflower seeds and petals fly around as the wind sway the flower back and forth. However, as I started coding, I realized that coding would be a hard task for my current coding skills that I have, so I decided to just do an easy version off the idea. Originally, I didn’t plan to do the changing from day to night, but I got some suggestions during the interaction day to add some background, so I added day and night to it. I really like how it turned out. The part that I’m not satisfied with is the flower because I feel like the flower isn’t very interactive. Last but not least, the feedback that I got is very helpful.  The feedback I got led me to think that not only does the project need to look good for the users but more importantly, it also needs to be user-friendly so that the user finds it comfortable, fun, and easy to interact with.

Images during the process:

 

Link to the project: https://editor.p5js.org/jiawen21/sketches/or5Rf1MMU

Description: It is an object floating in the galaxy and then if you clock o the object or anywhere on the canvas, it will explode into different colors of particles.

Video of my project: Screen Recording 2022-10-31 at 10.24.33 PM

Reflection:

• Object-Oriented Programming helps organizes software design around data, or objects, rather than functions and logic. The class is part of object-oriented programming. A class is a way of organizing information about a type of data so the person can reuse the elements many times without retyping the code. An instance is an object that belongs to a class. When instance of a class is coded, we can allocate the memory and the rest so an object can be created based on the class. 
• OOP allows code to be reusable and makes it more simple for programming. For example, when the class can be instantiated once a call has been made, it can be used in any part of the application. We can reuse the class over and over again.
• The project that I created is a circle in the middle and then when you click on it, it will explode into many colors of particles. Another way to make it explode is when the mouse is pressed and you click anywhere on the canvas, the object will explode into many particles. The methods that I used are explode() and reappear().
• What I find it challenging is figuring out what methods I could apply and how to apply them to my program such as what function I need in order for the methods to work.

Link to project: https://editor.p5js.org/jiawen21/sketches/rucX-aSN0

Description: This is a dancing creature that changes color every time it is refreshed. Its feature is swaying the body back and forth.

Screen record of the dancing creature:Screen Recording 2022-10-24 at 10.07.16 PM

This part is the one I’m most proud of and the one that I spend the most time on. I struggled to make the dancing creature move and I had to do some research before getting the gist of how the sin and frame count and frequency work here.

Reflection:

The benefit of not relying on a code outside the class is that everything is in one place rather than all over the place. Class makes it easier so when people read the code, it’s much easier to understand. It’s sort of like a shortcut because you don’t need to write the same code multiple times. You can reuse the code as many times as you want.

The challenging part is that the code has to be unique from others. Also the idea of not knowing what kind of movement they will be coding. For example, will they be moving left to right or spinning?

Reusability helps us save a lot more time in coding because with modularity I used the same modules somewhere else in my code but slightly changed it to make it different. In my code I reused. For example, in the code sort of reused the left leg for the right leg but changed the rotation from X to Y. But the line values themselves were still the same. As for modularity, it means if one person draws a boundary on the code, that part of the code would still work and not be affected.

 

Link to project:https://editor.p5js.org/jiawen21/sketches/EPKEc-PGY

video of my result: Screen Recording 2022-10-17 at 8.08.48 PM

 Small section of my code:

This section of the code took the longest time for me. I remember doing something similar for the first mini-project and I thought it was hard because, at that time, I didn’t know much about coding. However, this time the task felt much easier than the first time. This time, I know how to use push and pop, as well as rotating my shapes to the position  I want. These were the ones that I struggle with the first time and now it’s so much easier.

 

 

Description: This is a duplication of my creature going from big to small. I really like the effect of the size slowly changing. The rotation also creates a really fun effect to look at.

Reflection:

1. We use translate to move the object from the original position to the translated position. For example, moving the object from its origin x units horizontal and y units vertical. The purpose of the push function is to “saves the current drawing style settings and transformations, while pop() restores these settings”. These two functions allow us to change our style and transformation.
2. The user-defined function makes coding much easier because less time is needed to rewrite the same code. The entire code can be sorted into may several smaller parts. We can customize the specific job that the part can do without rewriting the code again.
3. The parameters that I used are the function drawMonster(x, y) and the function drawCreature(x, y). Parameters made it easy to code because I don’t have to code the same code too many times. I could just write the parameter into the function and then customize it however I want.
4. I used translate, rotate, and size functions which changes the way my canvas moved and looks. I really like the size function because with just one input of a number, the whole canvas changed to the size I want. I don’t need to go back and changed every size of the shape.

Link to project:https://editor.p5js.org/jiawen21/sketches/y2arT9aQm

Description: We’re looking at a solar system with an orbiting pattern of colorful circles. The circle goes from small to medium to big. It creates this 3D illusion.

Code:

I took references from the slides and change the numbers and added some new codes to it.  I think this part was what really helped my design. When I change i <number, it changes the sizes of the circle, which really affected what my project will look like. At first, I played around with the number and then I ended up having a “happy accident”, where the design turned out really colorful and illusional.

Reflection:

If I were to draw this by hand, it’ll take me a long time to draw. This drawing would require a lot of patience, time, and accuracy between the size of the circles, the line, the color, etc. However programming, it takes less time and it’s much faster and more accurate. With programming, all I need to do is put in some code, and the programming will do the circles and the ellipse for me. I don’t have to draw the lines and the circles over and over again. The loop function in the programming is very useful when it comes to this part. Also, I’ve got small circles in my project so if I were to draw this by hand, it’ll be really hard.

I’ve used the for()loop. I’d played with loops through angles, patterns, colors, and randomness. I think the pattern and the color change made the result look really good. My project started with small circles and as it stat expanding, it becomes bigger and bigger. When I look at it, it creates this illusion for me as if the circles are popping out. I also like how every time when I refresh, the color changes and it creates a different design and a different feeling for each time I refresh it.

I think a good generative pattern is one that creates this effect or illusion of sucking you in. It makes you want to keep on looking at it. It has this organized structure that creates this pattern that is fun to look at. Every time when I look at it, it looks like I’m looking at it for the first time because the combination of pattern and color together creates a different feeling and affects to it every time I refresh the page.