Final Project Link:
https://editor.p5js.org/tina06c/sketches/-UPf5vBMD
Description:
This interactive project is a puzzle that the user must solve by typing on the keyboard. A tangram is a shape puzzle where the user must figure out where each shape should land on the big square. For this specific puzzle, the user must figure out which keys will return which shapes to the square. There is a hint that shows when the mouse is hovered over the big white square. When the user presses on the screen, the color of the shapes and background changes.
Screen recording of project:
https://drive.google.com/file/d/1vj4KnBhHE9mVjsQjaiTpkHt3UpASUt88/view?usp=share_
Coding:
My thinking process was to first decide on the rules of the puzzle that I was going to do. After coming up with the basic rules I then decided to first draw lines to see where I wanted the specific shapes to be at on my canvas. Below is my first attempt:
I had no trouble with the rest of my coding after I started to officially draw shapes and code for their movements on the canvas. I used link 1 below to find the code for specific colors and I used link 2 below to find functions to draw the shapes I needed.
Link 1:
https://www.rapidtables.com/web/color/RGB_Color.html
Link 2:
Reflections:
I used global variables in my code in order to establish the coordinates of my shapes. The use of global variables made it easy to manipulate and change my code according to how I wanted the shapes to move on my campus without too much hassle. In my code I used if statements to detect what keys were pressed and if a specific key was pressed then a specific output would be displayed on the screen. In addition, if statements were used to change the background and shapes’ colors and I used if statements to detect if the mouse was hovered over the big white square. The difference between key and Keycode was that key is related to the specific character keys which Keycode are all the other functional keys of our keyboard.
Leave a Reply