Then we started to try using three sliders to control the R/G/B color of the pattern, but that didn’t work out. Then we had a mouseReleased( ) function. Therefore, when people drag the button and release it, the shape change its color! Finally, we figured it out by using an “if( )” to decide if the mouse is on the button, and another “if( )” inside the”if( )” above to decide whether the button is being pressed. While making the slider, we met some difficulties such as limiting the button, making the slider stop after dragging and setting up the reaction after dragging the slider. But we found that then we have to set a variable in the condition of the for loop, and the loop will trash! So finally we decided to use the slider to change the color of the pattern. To make it interactive, we planned to use a slider to change the size or the quantity of the square. And made a rotate by “rotate(radians(frameCount/2))”. We simplified the pattern with one shape: the square. The pattern of the kaleidoscope is usually made of simple shapes and will interact with the players’ action. Stop the rain with the mouse!įor the interactive artwork that consists of repetition with variation, I got my idea from the kaleidoscope. Here’s the GIF of the final look of my Sketch. It seems like I have some trouble dealing with repetition of a shape using random(). The GIF below shows what happens when I generate flowers randomly in a function. But when I try to use variables to make them several times, they start jumping! I draw the flowers separately, and they made my code quite long. But while cleaning the code, I haven’t figured out how to make the random things stable once being created. The flowers, raindrops, the ground are all made by functions. Here are several codes and video that helped me figure out the rain dropping: I struggled from how to make an element drops→how to use the array→how to control the amount of the raindrops. Making rain dropping was a great challenge for me. And the flowers grow with the rain, representing that what makes me suffer will also make me stronger. So I made a sketch that changes the weather from rainy to sunny, representing my mood. This week I’ve been through so many things that make my mood kind of changes frequently between depressed/frustrated and happy. To play the game in full screen, click here. I feel like making the doodle’s y-coordinate change through time will cause a conflict between the connection of doodle’s y-coordinate and the platforms y-coordinate. There’s still a challenge that I don’t know how to make it jump. Then the doodle can only move on the platforms or fell from them! make the doodle move with mouse and stay on the platform/ drop And in the draw function, I give doodle’s x-coordinate the value of mouseX. The doodle’s coordinate is linked to the platforms’ on the setup function. Thanks to the help of resident Seho, I use another variable for the doodle to limit its position. STEP 5: Making the doodle to move through platforms And when the doodle reaches the top, the game ends! But since its x-coordinate has to be connected to mouseX, I cannot figure out how to make it move only on the platforms.įor the scoring system, the score is counting the number of platforms that appear on the canvas using frameCount. I link the variable in the “translate()” with the coordinates of the platforms, so the doodle can stand on the platform. STEP 4: Making the doodle standing on the platform and introduce the scoring system Then I start to think about how to restrict the position of the doodle to make it stand on the platforms. The doodle can move freely throughout the canvas. This step is simply put those functions together. The platforms are drawn using an array and a drawPlatforms function. The doodle is made up by a drawDoodle function that consists of “curveVertex()”,”ellipse()”,”rect()”and “line()”. The separate the game into several basic steps. And the platforms are moving upward, while the doodle survives if it doesn’t fell from the platforms. For my p5.js version of doodle jump, I make the doodle controlled by the position of the mouse. The doodle keeps jumping upward and move left and right. The original doodle jump is based on the gravity-sensor of the smartphone. Having learned the array and object, I made a doodle jump this week. I’ve been trying to make games with p5.js.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |