Project Title: Random Shape, with Random Colors
Before this project, we learned how to use variables and conditionals to make a code more dynamic and flexible. Utilizing those concepts, you can create a random polygon with a random color and put it on the canvas where you want to by just pressing the touchpad.
Click here and create your own shapes!
https://editor.p5js.org/GwangunKim/sketches/gX6a2ku-R
Progress
The most important code to consider here is a “Polygon function”. It was not hard to create random colors because I only had to produce three different random variables and put them into a function “fill( )” by using a function “random( )”. However, there was no function to create random shapes, so I made an array that contained some 2D primitives and used a random function to pick one from the array.
It does not work since the “word” is not a function. Thus, I surfed p5 references to get an idea of making polygons and found that by setting all the values of angles and sides of polygons to the variables(angle, sx, sy), we can create them. Let’s see this code of my polygon function.
Then, to add an interactive method to this code, I used “mouseX/Y” and “if” statement for the user so that he can move the mouse and create a shape where he wants it. Like this:
Reflections
What are the differences between key and keyCode?
Both key and keyCode are frequently used when the user tries to input some values using a keyboard. The key variable has the most recent value of a character when a user presses his keyboard. Thus, if you press “a”, the key variable gets a character “a”. The process of keyCode getting its own value is the same as the previous one, but it stores the numerical information. For example, using a keyCode, if you press a “Pause/Break” button, a keyCode stores 19, based on the key code table, the numerical code. Therefore, you can utilize keyCode when you try to handle some special or non-characters in the code.