Author: Zhaniya_Korpebayeva

Garden Walk
Here is the link: link

For my Midterm project I was inspired by the idea of catching games. In fact, this time I thought long enough about the idea of my project, because there were so many options. Once I chose a game that I want to create, I began to describe the concept and in the process of research found other interesting games that captivated me more. One of the interesting sites I found https://codeguppy.com/, there I came across many impressive concepts, moreover, on this site I looked tutorials to create the game (collision, score counter, etc.).
The point of the game is that the player needs to collect 11 flowers to make your bouquet. The complexity of the game is that each time the speed of falling flower increases, and at the end of the player must be careful to quickly collect the falling flowers. If one flower falls and the player does not have time to catch it, the game is lost.
To build the Garden Walk game, I was inspired by the cartoon “Sofia the First”, a cute cartoon about a girl who unexpectedly becomes a princess, and characteristic of every princess, she lives in harmony with the flora and fauna around her. As for the painting in the background of the main game I chose (I have no idea why) a painting by Claude Monet. I chose as my theme and in the process just picked out pictures that I liked. For the audio I chose a quiet music for background sound and short sounds to announce the winning/losing.
Basically I liked the way the totally random images looked together and the way everything looked in the game. I’m also particularly proud of the work done on the game screen functions, where I was initially confused.
In the process, I ran into all kinds of problems that would eventually affect the outcome of the work. It took me a long time to figure out the variables and the gameplay steps, which led me to get confused with my own data. However, thanks to some useful tutorials on the internet, I was able to solve these problems as well. Furthermore, in the process, I wanted to change the player’s movement. I spent some time exploring different options, and achieved small results with the use of OOP. In this link you can see another outcome of my attempts.
here

Also, here are some useful links that helped me get ahead in my work:

link1

link2

link3

In general, I am happy with the result of my work. I believe I still have a lot to work on, yet it was a good start. In the future, I would like to eliminate past mistakes and add to my game:
* Many types of flowers so that there is variety.
* Change Sofia’s movement so that she moves all over the canvas and can catch flowers at any point.
* Make the game more difficult with the addition of “trash” So if the player caught trash, his game will be lost.
* Create a unified design for the entire game

For this assignment I didn’t have any ideas or inspiration to create the artwork as such, everything happened more intuitively so that I could better understand the information covered in the lessons. I referred to images such as the starry sky or the summer garden, but did not attempt to recreate an exact copy. At this stage, dealing with arrays and classes was a priority for me. I worked a lot with velocity for the second work with triangles(garden). Thus, I determined the coordinates of triangles and their further movement.

Useful links for me (there were a lot of them, but here are some of them):
https://happycoding.io/tutorials/p5js/, The Coding Train, https://openprocessing.org/class/57891/

Since this time I have been dealing with basics of OOP for a long time, I spent more time understanding how the new tools are interconnected with each other. For the next time I would like to make a more or less advanced version of my work, devote more time to the visual. For example, I’m confused about how to add a background image, next time I would like to learn this. Moreover, I would add a couple of shapes and make the triangles real butterflies and the circles stars. Also, I would like to add the effect of “shooting stars” to the stars, since I started to get acquainted with this function.

Concept:
For this assignment, I practiced a lot with the new features and made different digital artworks, just to try and play with all the different features and possibilities of loops. Thus, looking at different patterns, I remembered stained glass windows. Stained glass is a special kind of monumental and decorative art. .Stained-glass windows can be considered transparent paintings, drawings, patterns made of glass or on glass.
In the process of getting to know “loop” I discovered the random() function (which is my favorite due to its unlimited possibilities). Before getting to the idea itself, I played around with different shapes and “for” loops.

I tried to recreate like a stained glass picture. As a base, I took an autumn illustration from the internet and uploaded it into my code, after which I created something similar to a stained glass painting using the “for” loop. There were some tutorials from “The Coding Train” and a couple of other sources that I found helpful(https://www.youtube.com/watch?v=ig0q6vfpD38
https://www.youtube.com/watch?v=V56cH9R_X4k).

Reflections&future improvements:
I think that this task helped me a lot to understand correctly the work of for loop, random(), role of each variable and the importance of deep analysis before work. With more experience and practice, I hope to create similar interactive patterns with animations. For example, so that different stained-glass windows change when clicked. In the next works, I want to learn more advanced animations, like creating moving waves (in the form of patterns. )

This assignment was a great start for me to get introduced to p5.js. Since I had never worked with p5.js before, I spent a lot of time understanding and “playing” with the functions and their application. To create a self-portrait, I decided to take one of my photos as a basis. The reference page of p5.js helped me a lot in this work. I also watched tutorials recommended by other students. All this helped me take the first step in working with the assignment.

In fact, I really enjoyed picking the right coordinates, even though it’s a tedious task. For instance, I wanted to add an eyeliner to my self-portrait and do it in the same way as I created my eyebrows, bangs and eyes before. Also, I really wanted to try to create some kind of animation/interactivity in my work. In the process, I tried several options that I saw in some tutorials. I liked the works with painting over the background, they had a vibe that reminded me of many “anti-stress” coloring videos.

Since this is my first work, the result is pretty simple. However, I believe there is still a lot that can be done with this assignment. Going forward, as we go through the new features and functionality that p5.js provides to the user, I hope to improve my skills and apply them to fix past mistakes. I would like to learn how to use more shapes, because even with the triangle I had to learn a lot of new information. Moreover, next time I’d like to make sure that my interactive background remains just a background without interfering with the portrait itself. Also, so that when user clicks, the portrait itself does not disappear, but remains on the screen. To conclude, assignment 1 was very helpful to me in terms of practice. I really enjoyed trying out new features and seeing the results of my work and I hope it only gets better with more improvements.