CC Lab - FA2020

– LINKS AND SCREENSHOTS –

Project: https://all-way-long.vercel.app/

Github: https://github.com/Koapush/final-project

Screenshots:

 

– DOCUMENTATION –

Proposal: https://docs.google.com/document/d/12cGFsfuVNG3HFag44pnznVF59eZljDRxxG1ThrWJklY/edit#

Documentation (Project Diary indeed):

https://docs.google.com/document/d/1iUjkcgC-osHLeHc2by9rLDHIfNc8d2QeFOjg9e4ji3k/edit#

Final Project Documentation – Jyoti & Cara

11.30 Class time｜Task List

• Tasks:

• • Search inspirations
  • Determine project idea

12.1  Studio Night｜Got the IDEA!!!! Group the best 🙂

• Idea:
  • Use PoseNet to interact (direct the ball)
  • Ball animation-like interaction
• Inspiration: https://www.pinterest.com/pin/544654148681222728/

12.2 Class time｜about the transitions

• Peer Review with helpful suggestions: https://docs.google.com/document/d/1VBpsCQSbu6Nz6UMWersfLnu5Y6lemorBTAuXs8mIbIw/edit#
• Suggestion from Prof: 

shifting by frameCounts

12.3 Morning – Jyoti｜First Trials

• Lerp() reference: https://www.youtube.com/watch?v=8uLVnM36XUc
• LerpColor() inspiration: https://editor.p5js.org/juliamaltz/sketches/H1sO_VBSb
• Basic oop: https://editor.p5js.org/tj1059/sketches/kGfhfS1DW
• Changes with interaction: https://editor.p5js.org/tj1059/sketches/KYHCsC11T

12.3 Studio Night｜overall project｜connection 1-3

• Interfaces

1. Generative Visuals
2. Interactive Experience
3. Data Visualization 
4. Creative Coding 

	Transition	Scene
1	Single ball; “move your head/?” https://p5js.org/zh-Hans/examples/simulate-particle-system.html	Starting: fire → draw line → virus
2		Generative arts: ?
3	1 scene to Virus	Virus: project2 https://editor.p5js.org/tj1059/sketches/KYHCsC11T
4	Split Virus to small dots:  https://editor.p5js.org/cy1503/sketches/ZpB4Uu4kL https://editor.p5js.org/tj1059/sketches/ooULCGGai	Data Vis: inspiration-like： https://p5js.org/zh-Hans/examples/simulate-particles.html https://www.pinterest.com/pin/527906387572207816/ https://www.youtube.com/watch?v=d620nV6bp0A
5	Waving and rasing line/black https://glitch.com/~ccl-jyoti-project3 https://p5js.org/zh-Hans/examples/simulate-particles.html	Ending: Erasing effect; green data-like effect; “creative coding” words https://www.openprocessing.org/sketch/47504

12.5 Have the ball scatter in different directions:

12.6 Studio Night | scene 3, connection 3-4, scene 4

12.7 Studio Night | Adding poseNet 

Small demo: https://glitch.com/edit/#!/ember-shadow-gum?path=script.js%3A25%3A1

12.9 Studio | Considering a slow loading time and technical issue,we decided to remove poseNet and use mouse control instead. Modified our idea: based on what we have, but means a lot of new challenges. 

12.9 Asynchronous User Test |

Project: https://koapush.github.io/final-project/

Feedback: https://docs.google.com/document/d/1mvDs_U8zBXq5E237Lm3Og1gXczj62AnvRVZyw01XSwo/edit

Todo List

1. Posenet
2. lerpcolor()
3. 判断逻辑
4. Random限制

Question:

1. Starting page Initial set to be in the middle
2. drawline() 不运行

We actually had a quite intensive working period from 12.9 and till the night of the IMA Show (12.11) and changed so great parts of the entire project that we didn’t put them all into words. Yet it could still be told from the changes we’ve made between the user test and our finalized version.

To be more specific, after the user test, we started to consider the overall theme of our project, and were trying to combine all we’ve learned throughout the whole semester together. This seems to already diverge from the original idea (i.e, a project with various ball-focused interactions inspired by the animation), but we all appreciated it and thus started to make changes. As for other main changes, we tried the posenet function for one time and then decided not to apply it due to the technical lag and the changes we’ve made based on the “creative-coding-journey” idea, which now seems to be more a pages-changing effect than an interaction-only visualization. We even gave up many of what we had for User Test to keep the consistency of each “page”.

 

– REFLECTION –

– IDEA –

To be honest, coming up with a satisfying idea is far more struggling than my expectation this time. Originally we were inspired by the animation and would like to realize various visual effects and interactions so that users could highly engage with the project by controlling a single ball (possibly using posenet function). Yet with the process of realizing different interactions, we gradually stepped forward a project theme that integrates all what we’ve learned during the whole semester. We then decided to separate them into four “pages” according to the four units of our course setting, and had to gave up most of what we’d already realized at that time. 

To reflect from our current moment, for sure we won’t regret on the decisions and changes we’ve made during the process of doing this project. I’d even like to express my gratitude to my partner who was willing to brainstorm with me throughout the whole process. Yet if possible, I believe a clearer idea (or say at least a determined direction) at the beginning would benefit a lot to further develop the project and cut loss especially due to the time limit during the final. I appreciate what Professor Steele said about making a project, that is, a simple idea with deep exploration is generally better than a delicate idea yet without much effort. This was indeed what I expect for my final project yet failed to experience, nonetheless I still enjoyed a lot not only the process but also the result.

– CODING –

Coding was generally another struggling part for us throughout the whole process. Due to the frequent changes of the project idea, the according code changed quite a lot since the very first beginning and even got mess at a time when we determined to change the overall idea. Therefore we started to re-construct the frame of the entire code files so that we can have a more comprehensive and consistent understanding of what’s going on where. To be more specific, it was quite challenging to realize the transitions ideally between each “page”, which seems to be easier to realize using html-related functions rather than p5.js only. Therefore after struggling for some time, I re-organized the code structure and set three parts in total: (1) draw (i.e call classes and methods) according to the true/false state of each; (2) change each state between true and false according to the “page” (3)change the “pages” from one to another depending on each trigger. Though bugs such as calling functions once or all the time still exist, a clear structure did help us to further revise our code. And although the process of “starting coding – debugging or asking for help – realizing ideas – giving them up and trying another” happened so intensively that we even got depressed at a time, coding still taught us a lot not only to be more patient but also to be more forward-looking.

.  

 

– COOPERATION –

This is my second time working with Cara. I’d express all my gratitude towards her for not only being willing to brainstorm with me on the project but also devoting her time and efforts into our project. Compared with last time, we kind of share more different opinions on this final project during the whole process, and therefore respect for different ideas and compromise are the two things that we both benefited and further learned from our cooperation.

– OVERALL –

Approaching the end of the semester, I’d express my highest gratitude for everything for our course. Despite the challenges we encountered due to the pandemic, I’ve personally taken away far more things from our course, ranging from specific p5.js knowledge and coding skills to project design and team cooperation. Specifically, I’d like to say thank you to Professor Steele, our learning assistants Linda, all the fellows in 826 Studio and my partner Cara for all the help they offer and all that they’ve done throughout the semester. IMA is always something that can enlighten me from time to time either by requiring me to do something (e.g make projects) or by offering me something to look at (e.g IMA Show). And looking back, I’d always be able to see my progress and achievement during the process. Thanks for all sincerely.

LINKS AND SCREENSHOTS

Inspiration: https://www.pinterest.com/pin/519673244506377265/ 

Data Source: https://stockx.com/nike-air-force-1-low-travis-scott-sail

Glitch: https://glitch.com/~ccl-jyoti-project3

 

 

DOCUMENTATION

• GENERAL INTRO:

Throughout the past two weeks, we’ve been learning data iteration and parsing processes, JSON datasets employment, etc. As for this Data Visualization project, it indeed consists three micro projects, that are, Create and Visualize JSON Data, Case Study and an individual data visualization project. Given that the first two are already documented in previous posts, this documentation is more about the last project and further about my personal reflections on the data visualization learning experience.

• INSPIRATION:

https://www.pinterest.com/pin/519673244506377265/ 

Based on the previous case study and the impression on the Creative Data Visualization course’s projects showed on last year’s IMA show, what I thought about a data visualization project is a plentiful website with much work on both data processes and data visualization. Therefore I was quite struggled on Friday, not sure what data to research on and what effect to apply accordingly. Realizing that I wouldn’t be able to conduct a deep-researched and well-polished project in less than two days, I searched “data visualization” on Pinterest and surprisingly found many seemingly simple yet visually pleasing images demonstrating one set of data. To my great surprise, I found the one linked above, and was immediately reminded of my previous small project. It was really a sense of amazement to find similar ideas from someone else, and even get highly inspired. I therefore decided to further explore and develop it.

 

• DATA:

https://stockx.com/nike-air-force-1-low-travis-scott-sail

What data to research and demonstrate was another great struggle for me before really starting to code. I searched for quite a long time ranging from national GDP to numbers of American cinemas, yet either of them was lack of meaning or fun to display; let alone most of the given data were already visualized for the purposes of business, management or academic researches. I therefore tried to start from my personal interest, and eventually decided to research a little bit on sales and selling prices on sneakers on a well-known sneaker stats website, StockX.

Inspired by a column article writing about Travis Scott, who in some sense dominates the sneaker game during the past two years, I was intended to make a project visualizing and quantifying the exact “impact” he caused, that is, to first present the increase on selling prices and sales of each of his sneakers and to compare them with other brands, products, celebrities if possible.

Yet there seemed to be still quite much work to do on data. Some of the challenges I met include: (1) I was not able to get data directly from StockX. (2) Neither could I find the ideal data I expected for this project. (3) Trying to find data in the browser Inspection, the code was too complicated to analyze… Eventually, I could only get the coordinates data of the chart displayed on the website from the browser Inspection. Realizing the heavy work supposed to be done and due to the time limit, I had to give up the expected idea and focused on the coordinate data to explore. Though the statistics are not the exact selling price for one certain item of sneakers, it does reveal the exact variation trend since its release in 2018.

• VISUALIZATION:

Since the data I found from the browser Inspection was the coordinate of a given chart, I first wrote the JSON file on my own, and then employed it to draw a similar chart in javascript. Besides, based on the inspiration and my previous project, the spiral effect was not that hard to realize. I employed the map() function many times to use the data not only to demonstrate the variation trend of the selling price, but also to change the size of the points, the color format and transparency in order to make it more aseptically pleasing and statistically reasonable. The greatest pity was that I could not add more manipulations or enrichment to visualize due to the lack of data. Also, thanks for the professor, I’ve learned many different ways to find the maximum/minimum value in the datasets. Yet since the data was not the exact numbers, i.e, the selling prices I need, I eventually didn’t apply the function learned in professor’s tutorial. But I do understand the logic to iterate through the data array and then update the maximum/minimum whenever a bigger/smaller value came.

 

REFLECTIONS

As for this project, it was not as satisfying as my previous ones at least to me, since there were many ideas that I failed to realize due to the time limit and, more importantly, the technical challenges. Nonetheless, I appreciate it very much since I learned more than I expected during the whole process — which won’t make me regretted on not choosing another given yet boring datasets:D. Especially as a student who is also exploring the field of Data Science, although challenging, I do learn much about browser Inspection, data manipulation via MS Excels and even writing and utilizing Python functions to transform website data into JSON file (though failed:((. Anyway, the visualization of data is far more interesting and I do expect to conduct a complete data vis project one day:)

 

INSPIRATIONS

As for this case study, I browsed many kinds of data-visualization related projects that vary from not only ways of visualization but also types and themes of data. Below are some of the projects that attract me very much:

https://pudding.cool/2018/08/wiki-death/

https://pudding.cool/2018/09/wiki-billboard/

https://observablehq.com/@codingwithfire/livecoding-election-night-visualizations

https://flowingdata.com/2020/08/14/2020-progress-bars/

https://informationisbeautiful.net/visualizations/colours-in-cultures/

 

ONE SPECIFIC CASE

Link: https://pudding.cool/2018/08/wiki-death/

One of them that impressed me was the one about the Internet reaction when a famous person dies, made by Russell Goldenberg. What caught my eyes at the very first beginning was the topic: “When a famous person dies, …. It’s a big deal”. What does he mean by “big deal” and what indeed would the author like to express? Keeping scrolling down, I was gradually obsessed and was highly inspired by both the aesthetic and informative qualities of this project.

Generally speaking, the overall project elaborates the differences in public reaction on the death of celebrities on the Internet (to be more specific, Wikipedia). To be more specific, the project starts from two well-known cases, that is, Beyonce and Prince, to directly visualize the change of pageviews on Wikipedia when big things happened. Later he introduces the main targets of the project, the chosen 84 celebrities, and goes deeper into the analysis of the certain phenomenon, like giving assumed reasons, visualizing data focused on certain aspects and differences, etc. It even bolds some of the leading sentences every time in order to step forward deeper analysis.

On the other hand, speaking of the aesthetic qualities of this project, I appreciate it very much since it applies various ways of visualization and the whole project is quite visually pleasing to me. Below are some of the effects the author applies to visualize data. Personally, I was quite impressed and highly inspired by the last one since it looks quite similar to one of my previous projects using the noise() function. I’m more than expected to explore the code for further development.

  

To sum up, I was very much inspired by this case study and have already got a basic understanding of what a data visualization project should look like. I can see that a complete project includes not only techniques but also full research as well as data collection (as for the above case, there are already some seeable improvements that can be done on the informative aspect). Anyway, I would be more than willing to explore more about data visualization (like taking a related course next semester:).

LINKS AND SCREENSHOTS

https://glitch.com/~ccl10r-jyoti-dataviz

Static (script.js):

Dynamic (newscript.js): 

 

BASIC VISUALIZATION

As for this week’s recitation, we reviewed and practiced on JavaScript Object Notation. Some of the basic syntaxes we’ve learned include loading JSON File to the Script, reading multiple objects in on JSON Object, viewing  JSON Object in the Console, etc. The exercise for this recitation was intended to practice irritating over a JSON object and visualizing the data accordingly. To be more specific, it visualizes all the given “body points” to depict a person’s figure. The pose.json file gives the data of the figure at only one frame, yet the poses.json file includes all the data of every body point at over 400 frames (say, poses), which asks us to challenge realizing a dynamic dancing effect of the figure.

Based on what we’ve learned during the class, it was not difficult to realize the first version. I used for loop to access the x, y coordinates of each body point and drew a red point accordingly. To further draw the arms and legs, since the order of the body points is already set in the JSON object, I first displayed the point index by applying text() function in the for loop. Finding that the arms and legs started from 5, 6, 11, 12 and should be lined with two other points with step 2, I applied an if() condition targeted the above four points, and declared other two variables (points) still inside the for loop so that they could be lined within the if() condition. A basic skeleton was therefore visualized.

 

 

CHALLENGE AND IMPROVEMENT

To realize the dynamic dancing effect of the poses.json, the first challenge was to access the data since the structure is more complicated than the first one. Besides, since there are different poses at different frames, what we need to irritate and draw is actually the body points accord with the frame, meaning that there should be one more irritation outside of the for loop used to draw each point. I first tried the for loop with iterator j, yet what it drew would always be on the canvas and would not be cleared out. I once set a state and tried to switch in order to separate each irritation, yet failed. Finally, I applied the clear() function, clearing out the whole canvas every time run the function. The effect was therefore visually realized, though the code was a little bit tricky.

 

IMA ONLY SURPRISE!!

I initially set the framerate to be 2 in order to observe its movement. And when doing the project, I was playing songs randomly in a music software around midnight. At one moment it played a song that I’ve never heard, yet with great surprise, I found that the beats perfectly accorded with the dancing steps! The project suddenly became sooooooo lovely that I could never help watching it again and again. Even the night became lovely too. I tried to load the music into the project without hesitation and would be more than willing to show it to everyone. It can heal everything!!!

 

REFLECTION

In this exercise project, I practiced to access data with complicated structures and visualize them using JavaScript. If I had more time, I shall first “debug” the code so that it can run and draw in the correct sense. Also further decorations surely deserve exploring:D Anyway, I pretty much like this lovely project especially with this lovely song.

LINKS AND SCREENSHOTS

Link to the Drive: https://drive.google.com/drive/folders/1t_D9OkB93uaOuWjsHds5ImUJn0ikMIpd

 

REFLECTIONS

This time we got a chance to learn about Processing. It is quite interesting to experience another “new” coding language, and thanks to the similarity to p5.js and my previous experience in Python, I was able to understand it clearly and try something on my own without many struggles.

Example:

As for this project, I first applied the example from the slides to explore the basic syntax and differences between processing and p5.js, for example, data types, void function instead of defining, etc. To think of some words for my own project, since I was sitting in the Windows Lab at that time, the date and the instruction to unlock the screen were standing right in front of my eyes, I therefore decided to apply them. I referred to the headline used in the last project, which was somehow dynamic and visually pleasing. For the words animation, I applied the void function, which includes the rotation effect within limited angles. Further, as for the challenging options, I tried the arrays and accordingly the for loop to draw all the separated words, trying to rotate them individually.

Code:

Through this project, I’ve learned about Processing, which enriches my coding experience. If I had time, I’d be more than happy to play around with Processing much more about its functions and also grasp a deeper understanding of the related language, i.e, the “Processing” family.

Links and Screenshots

Link to the sketch: https://glitch.com/~jyoti-interactive-portraiture

 

Inspiration

In terms of interactive portraiture, what first came to mind was Gavin Thomas, who has become an “Internet meme” famous for his fake smile for long. Therefore I started to search the images online, and finally decided to use this cute one as the original image.

 

 

Draft

After referring to the slides, I first reviewed the pixel array and learned the pixel iteration so that I could access each pixel of the image. To be more specific, the formula of pixel’s index, i.e. (x+y*width)*4, enables me to play around with every single pixel and the related RGB color directly and precisely. Moreover, when manipulating the pixels, I tried various types of effects including drawing circles, applying texts, and even the wavy lines. After several rounds of trials, I found the current line effect the most visually pleasing and interesting, therefore deciding to apply it and explore some further developments.

 

Further Development

Since we’ve learned the Particles in class and I’m personally quite impressed by it, I’d also like to try to apply it in this project to add to the interactive effect. Therefore another one of the reasons I chose the image as inspiration was that I could somehow make the heart shapes in a similar yet even more dynamic way. By referring to the firework effect done by Prof. Steele in class, I tried to update the heart particles starting from Thomas’s eyes, realizing the effect as if heart shapes burst from the eyes showing the pleasant. I even tried the map() function learned from the slides to color all the hearts.

.

 

Reflection

Throughout this project, I learned about pixel manipulation, which is quite visually pleasing and is full of possibilities. Though I didn’t apply too much in my own project, I do learn a lot from the tutorial slides especially the Live Webcam Video part (I actually played it for a long time:)). One pity is that I didn’t realize the challenge option, that is, to generate Particles instead of drawing shapes and move them around to reveal the original image. (Actually I tried for a little bit, yet due to the time limits, I was not able to fully realize the coloring part.) I intended to generate a large number of particles of heart shapes to achieve a mosaic-like effect, and later remove them around to reveal the clear lovely face. I’ll definitely try it later when I had time, and I believe it would be much more attractive:D Anyway, I very much enjoyed the pixel manipulation.

– LINKS AND SCREENSHOTS –

Project: https://koapush.github.io/project2/

Github: https://github.com/Koapush/project2

Screenshots:

   

 

– DOCUMENTATION –

https://docs.google.com/document/d/1G_1UNEc8uf9kAOriNEXdVEJ6epZKqb6PpfFYL9XYL-4/edit?ts=5f9179d7

10/16 afternoon: 

Discuss the general idea. Review slides and searching for inspiration. Fail to come up with a satisfying idea for both. 

10/22 lunchtime:

Based on what we have on the proposal, generating a new fundamental idea for the project. A little different from the previous one, but based on that: players click the landing positions for the ball and the ball will bounce from the clicked position. The goal is for the ball to collide with the object on the canvas to get scores. 

10.25 afternoon

Update the idea. Generate the basic function of the project. Still remain the blocker at the bottom. The object can be a monster, who can be killed by the collision from the ball after colliding several times. And it also will attack the blocker and shorten it. So the goal for players is to kill the monster before the ball falling below the canvas.

10.27

Decided that the image of the monster/virus can be like: https://giphy.com/gifs/YPbrUhP9Ryhgi2psz3

10.29

Generated a basic virus monster using for-loop.

10.30

After talking to fellows we found that the directions of balls don’t actually change a lot even the player manages to keep the ball bouncing every time with the board. So we redesigned the launching platform like this: https://editor.p5js.org/tj1059/sketches/pfdo1ZUst

10.31

Finish the general model in p5.js: https://editor.p5js.org/tj1059/sketches/sO9dtntTs. 

11.1 night

Realizing the difficulty that we should break down each state of the game separately, we decided to turn the code into an oop format so that it might be easier to call according to methods under each state.

备注-2020年10月30日

11.2 User tests

Working on modifying the code in oop mainly to solve the bug that the ball can be continuously launched even after the virus is killed and the code runs again and again. 

11.3 night

Focus on debugging. We created several classes so that the overall structure is much clearer and each state could run individually (and accordingly created separating js files suggested by fellows). We also modified the code referring to the feedback from the user test. We specifically designed the playing rules and added the interface design elements. One new problem we met now is that the code would not run once we add an audio source to it.

备注-2020年11月3日

11.4 In Class User-test

Referring to the feedback from classmates, added a Restart function; Figure out the problem of applying audio sources. 

11.5 night – Last update:((

Change the playing rule that the virus can increase its blood if it’s not hit, which increases the playability and playing time. Modify the front page and changed the font. 

   

11.6 Presentation

   

 

– REFLECTION – Coding –

Generally speaking, I’m personally pretty satisfied with our project and very much appreciate working with my partner, Cara.

As for the overall process of making this project, it goes mostly as we expected (and somehow even beyond my expectation to be honest). When first being inspired by the brick-breaking game, we intended to design a similarly interactive game (i.e, with simple design yet playable interactions). During our later process of realizing the basic model, both we ourselves came up with various new ideas through brainstorming and we were inspired by other suggestions. Though we did suffer much struggles during the whole process and for now even have any further ideas to be realized, I am more than proud to have what we have right now as our group project.

To be more specific, as for the coding part, I think we’ve mostly achieved what we expected and realized some more chilling effect that goes far beyond my original expectation. When first realizing the bouncing ball model in p5.js, we saw part of the whole picture of the difficulties that we should be able to separate each game state individually. Facing with such struggle, we then tried to modify what we had at that time into an object-oriented programming format, which was a huge challenge for us. Thanks to the help from our professor Steele, learning assistant Linda and fellows, we finally tidied up our basic logic within the code – creating different classes and methods, and defining different game states to call the according methods in order to run the game.

Things then became relatively easier to further develop our project in code, and since we’ve been constantly coming up with new ideas and hearing from others’ suggestions, we still made a lot of huge and tiny changes even after the user test. For example, we modified the visual style of our project by delicately designing the project name as well as the winning/losing page by applying one certain google font. What’s more, thanks to the cute stickers on jamboard, we added to the background music as well as the sounds for hitting effects and winning/losing page, therefore making it much more a pleasing game in any sense. As for the game itself, in order to enhance the playability within our capacity, me and Cara brainstormed for quite a long time and eventually came up with the idea of applying the blood bar and enabling it to restore automatically. The goal of the game was therefore to literally “kill” the virus before it recovers. (It was even one of my proudest development of our project:)

Other problems we met during the process of further modification include being unable to play the bgm automatically when entering the webpage (due to the settings for Chrome browser), unable to play the winning/losing sound only once in the draw() function, unable to set the canvas in the middle of the browser, etc. Every time when successfully solving a problem, say, a bug in code, I felt quite self-satisfied and large added to my pride in our project. All the problems were eventually solved, yet if I had more time, I might try to change the RESTART button into a keypress function so that it could somehow keep the coherence of the interactions. Anyway, I would say we realized what we set out to do and even achieved more than what we expected initially. 

 

– REFLECTION – Idea –

• Did the process go as planned?

Cara and I actually changed our idea/plan several times. We started our idea from the inspiration of the game Brick Breaker and would like to make an interactive game with simple and clear UI and a relatively high degree of playability, like the game Brick Breaker. Since we did want to make something different, we first changed the bricks to a moving object, and to a virus monster. Having found that the tracks for the ball are actually easy to figure out, which decreased the playability, we removed the board using a launch platform instead. User test feedback also changed our plan. For example, to increase the duration of a single trail, we added a blood bar for the virus monster, which we never thought of as we design our game. We also added visual and audio effects, as well as a restart button after the user test.

• Did you achieve what you set out to do?

Yes. We are satisfied with our job of making an interaction game with exactly simple and clear UI but nice UX and playability. 

• What (1) did you set out to do or learn, and did;

We set out to make a creative and interactive game with simple and clear UI but nice UX and playability, and we do think we did a good job on that. 

(2) did you set out to do, but didn’t

We think we did all that we thought of.

(3) did you do or learn, and hadn’t originally intended to?

We actually didn’t have a clear idea of what we were going to do, so most of what we’ve had now is not intended originally. This is not bad because we won’t be limited by a single idea, and we are ready to change to a better idea at any time. For example, the blood bar of the virus is added right the eve before the final presentation. But we do learn that we might as well have a much clear idea framework on the first stage so that we could be more efficient instead of updating ideas and the coding again and again, which wasted a lot of time.

• What would you have done differently?

We would generate a much clearer frame idea before we actually start coding so that we can be more productive and efficient. We also find that working together is indeed important for a group project. Since Jyoti and I have different schedules for the midterm, in the first and second weeks we are kind of working separately, and it’s not convenient for idea updating and collaboration. So we would definitely spend more time working together and do communications timely.

Links and Screenshots

Link to the sketch: https://editor.p5js.org/tj1059/sketches/3kL0abyyW

Inspiration

As for the poster project, I spent quite a lot of time thinking about what to make. In a traditional sense, a poster means a static paper with images and creations sticking on the wall. Yet with p5.js, I’d like to try something subtly dynamic – at least with some movements. Browsing the inspirations given in the slides, I was very much inspired by the work Joy Division, and was thinking about making something dynamic (like the lines moving up and down).

First Draft

I first started with the research work. According to the reference, it basically uses the random() function to find different points, and later manipulate them to create the basic image of the work. Since Joy Division is one of the works given as challenge options, I turned to the IMA staff to ask whether it would be ok for me to realize the idea of subtly moving it with the reference. Recommended by the staff, I then learned a similar function called noise() from Daniel Shiffman’s tutorial videos, therefore trying to start my work at that moment.

Further Development

By using for loops, vertex() function and the noise() function and thanks to the help of IMA staff, I basically realized what I proposed based on the static inspiration. I then started to polish it, first coming up with the idea of filling with rainbow-like colors since it has a long enough moving image. Also based on my experience of writing Html and Css learned in Communications Lab, I applied the google fonts to my poster (though it was the first time for me to learn that we can click the arrow beside the sketch and it also includes index.html and style.css). After that I kept playing with the noise() function which was pretty new for me, and what surprised me and was even determined as the final work just happened in one second – I roughly estimated the magnitude of the number t and changed it from division to multiplication, and the floating lines suddenly changed into something like floating sheets – which is even more aesthetically attractive to me. I, therefore, decided to use it as the final work.

   

Reflection

Through this poster project, I learned the noise() function and further get familiar with the vertex() function which I only used once in previous projects. Moreover, through the experience of playing around with the code after learning it, I further understand that I can always explore something new even after I thought I fully command it (and even after I thought I realized what I want). As for making artistic and creative works, you’ll never know what you will get.

Link and Screenshots

Link to the sketch: https://editor.p5js.org/tj1059/sketches/FnfFPWJun

   

 

 

Concept

As for this project, I was very much inspired by the work I researched for Case Study I., that is, Game of Life. It was initially generated by the mathematician John Horton Conway in 1970, and later inspired many generative artists to further develop their own works. I was impressed by the effect it achieves at the first glance, small pixels seemingly moving randomly. Through deeper research, I found that each movement, in other words, the black-and-white change was generated by the surrounding ones. As is introduced in the article, it is actually an example of cellular automation, applying basic rules to trigger unpredictable and complex behaviors. Therefore, for this very first project, I’d like to first start with the original one, and later try to further explore some further development.

 

Working Process:

• First Trial

Observing the effect and the concept of Game of Life, I first tried to construct rows and columns so that arrays could be set to each grid. By referring to the tutorial video on setting 2D Arrays, I was able to draw the grid as follows. 

   

• Difficulties and Solutions

For the next step, I intended to assign the color (either black or white) randomly to each grid so that the ideal effect could be realized every time executing the draw() function. However, I was not able to directly assign the color to each small grid, and therefore I searched online trying to find any other methods that could be applied. Fortunately, I happened to find a tutorial video about Game of Life given by Daniel Shiffman, whose Programming with p5.j videos already helped me quite a lot. According to the tutorial video, I understood that the basic logic is actually to assign different states (either 1 or 2 in this project) to different grids, which would later serve as conditions to apply if-else functions to randomly fill the grids with black and white color.

Moreover, the video even reveals how to realize the seeming “pixels moving” effect, that is, the rules for grids to live or die (introduced in the inspiration website). By setting another 2D array as the next state of the grids and letting the current state equal to the next at the end of the draw() function, I was able to apply the rules which calculate the sum of the surrounding grids (by defining function countNeighbors() ) to decide whether to change the state of the grid in other if-else conditions. To be more specific, since the draw() function executes again and again, the state of the grids changes every time, therefore making the canvas seemingly move all the time. The basic Game of Life project was therefore sketched.

• Further development

Based on the fundamental work of Game of Life, a canvas with black-and-white grids seemingly shifting, I’d like to further develop it into a colorful one to not only add to the enjoyment of visual aesthetics, but also to better correspond to the concept, that is, each grid stands for a living unit – life should be more than black and white anyway.  I was first intended to set gradually changed colors as the background of the canvas, later revealing this by state-1 grids automatically turning into colors. Meeting up with difficulties, I then rethought on the effect as well as the concept, and ultimately decided to add more interactions to change the color when pressing the keyboard and moving the mouse. The concept behind such decision lies in our subjectivity as Homo Sapiens: we can somehow change the color of life by ourselves.

Transformation functions such as rotate() are also used to further develop the sketch, which makes each living grid more active.

 

Reference:

• Conceptual Inspiration:

https://www.katevassgalerie.com/game-of-life-emergence-in-generative-art-1

• Technical Tutorial Videos:

2D Arrays: https://www.youtube.com/watch?v=OTNpiLUSiB4

Game of Life: https://www.youtube.com/watch?v=FWSR_7kZuYg

• Suggestions from Prof. Steele:

   

 

Reflection

When first hearing the concept of generative arts, I actually had no idea about what it is. Yet through weeks’ research and work, I now have more or less learned its concept and have even been able to finish my own project. Though meeting with many different difficulties and challenges, I managed to overcome them by turning to the professor and LAs and also searching online on my own. Therefore, I’m personally satisfied with this very first project, and am more than glad that I’ve acquired much knowledge, techniques and experience on generative arts, p5.js and coding.

On the other hand, since it is an inspiration-based and thus open-ended project, I do have many other ideas on the further developments that I might try after deeper learning: for example, the movement of each grid could somehow be technically improved and complicated. And to be more conceptual, it might also be intriguing if we focus on the life of only one person and let the tiny squares stand for people we would meet – the number of grids, the frequency of surroundings turning to “state 1”, and even the location of each grid would matter. In this sense, one’s connection with other people throughout the whole life could be convincingly visualized if more realistic and meaningful data could be applied.

Anyway, I gained quite a lot in this project and would be more than willing to further learn p5.js to realize more ideas.

Link and Screenshots

https://editor.p5js.org/tj1059/sketches/BdBagtnfK

 

Work Process

As for this week’s recitation, we were asked to develop a sketch of a creature by drawing and transformation functions such as translate(), rotate() and scale(). By briefly searching online, I chose the cartoon character, Pikachu, trying to draw it on p5.js and add the animations step by step.

• Draw the creature – Define functions: drawFeet(), drawBody(), drawEars(), drawTail()

To draw the Pikachu, I separated the creature by parts and accordingly defined different functions – drawFeet(), drawBody(), drawEars(), drawTail(). Inside each function I concluded the creature as different geometric shapes, using different shape functions (eg: ellipse(), curveVertex()) to sketch the outline. The beginShape() and endShape() function were quite useful when I tried to draw the tail. I could only draw lines since it’s an irregular figure, yet simply drawing lines didn’t allow me to fill it with yellow color – it was not closed. By applying the beginShape() and endShape() function, I was able to transform it into a closed figure just like an ellipse or a rectangle.

• Design animations – Apply functions: translate(), scale(), rotate(), map(), …

I first used translate() and scale() functions to combine all the separated parts as a whole. Since what I draw is the back of Pikachu with its big and symbolic tail, I was first planning to let the tail rotate when users move their mouse. In this sense, I applied the rotate() function and the map() function inside to realize such effect. As for the ears which I expected to keep rotating one of two within a certain range of angles (seemingly wiggling its ear), I changed to drawEars() function into two: leftEar() and rightEar(). I then applied the rotate() function to the left ear with an if-else condition to change the direction back and forth.

Reflections

• What is the effectiveness of utilizing translate() in your code?

By using the translate() function, I am able to change the location of the sketch much more conveniently, needless to modify every coordinate repeatedly (especially compared with the one for week1 recitation). The code therefore becomes more organized.

• What differences do you find between drawing with a common tool and programming the computer to draw for you?

Drawing with common tools fully depends on how I sketch the creature and allows simple modification (such as using an eraser), yet computer programming asks me to have a clear idea about what I want, and then to transform into programming languages. On the other hand, programming the computer to draw supports further animations which common drawing tools cannot realize.

• Are you able to identify processes in your own drawing that are changed radically because of using p5.js (JavaScript)?

The most obvious change would be: I used to start drawing with the idea changing all the time, and would use erasers very often to modify the creature. By using p5.js, I force myself to think clearly about what I’d like to draw and the overall process of drawing before the start.

• Do you think that the tools that you have used for those processes will change over time? How do you imagine them to be in the future?

I may change some of them with the deepening of learning p5.js. For example, I might further develop the animation of the left ear of Pikachu so that it can wiggle more naturally and may pause for a while every time it wiggles. Also, it might be cool to add some lightening effect to let it appear randomly. In all, further improvements largely depend on my deeper exploration into p5.js, and I hope that at the end of this semester, I would be able to mostly realize the effects I expect.