Jyoti's Documentation Blog

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.

# LINK to the work:

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

There are several versions of “Game of Life” introduced in this website.

“Game of Life” was a game initially generated by the mathematician John Horton Conway in 1970. It very much inspired Generative Artists, who therefore have created different versions of it. The original work as well as the Generative Art works is already introduced on this website, among which I’d like to elaborate more about the one done by Alexander Reben, that is, puritan_commuion.

First

  Later

  After

#AESTHETIC

Compared with Conway’s original version, puritan_commuion uses different colors to express his understanding of the mechanism of Game of Life, changing from purely black-and-white to gorgeous colors including yellow, red, and purple.

# ARTISTIC

Cells boom into yellow whenever you click the start button for the very first time. It keeps booming with yellow turning into red, purple, giving people a sense of “flowers blooming in a garden”. Despite the irreversible process of colors changing into black, through the colors we can indeed feel a sense of vitality, specifically in contrast with the black-and-white version, which somehow responds to the topic, Game of LIFE.

# METHODS or TECHNOLOGY

As is introduced on the website, Conway’s original work uses four “simple” rules (as follows) to create such complicated visual patterns:

1. Any live cell with fewer than two live neighbors dies, as if caused by underpopulation.
2. Any live cell with two or three live neighbors lives on to the next generation.
3. Any live cell with more than three live neighbors dies, as if by overpopulation.
4. Any dead cell with exactly three live neighbors becomes a live cell, as if by reproduction.

As for Reben, he actually follows a new rule, changing the colors of the squares over time instead of just using black and white. Also the coding is actually demonstrated on the website. Though not being able to fully understand the coding about how it works, from the experience of p5.js I can more or less see that some seemingly complicated works might just follow a system of tricky yet not that complex coding (at least not that long). Hope that I would be able to make something at least seemingly cool before too long:D

Photograph:

Hand-drawn Sketch:

Screenshot of p5.js sketch:

Link to p5.js code:

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

Reflections:

– What are some ways (if any) that drawing on a piece of paper was easier than writing the program?

Changes are easier to make when using pens to draw on a piece of paper, while tiny adjustments in coding require much more work. Specifically, there are settled coordinate axes, therefore every dot has its own location needed to be precisely assigned in coding. Also compared with using pens, it is not that convenient to make details through coding.

– What are some ways (if any) that writing the program was easier than drawing on the piece of paper?”

Geometric patterns are clearer and easier to make through coding, especially when we need to make some similar things (e.g. vases) or regular patterns. 

– Problems you ran into: what was the symptom, what turned out to be the cause, what did you do to try to figure this out? What sources of help did you use? What would you do it differently next time?

One of the problems I run into was to make tiny adjustments in the coordinates of each item. Since my sketch includes many detailed items, the process of drawing turned to be much harder than simply drawing on a piece of paper, therefore cost me a lot of time. Nevertheless, in such process, I found “//” quite helpful since I can first double slash one line first, later try another version with tiny differences, and then remove the slash marks to recover the first try. Besides, after reading the assigned texts, I found that I could actually set variables (such as the size of the item) to avoid some repeated changes (e.g: the location). Therefore next time I’ll try to use more variables both stored in p5.js and assigned by myself to simplify the coding.