p5.js Web Editor | Numerous meadow (p5js.org)
In this work, I used P5.js to create a mockup drawing board, which has three main functions: color drawing board, mosaic drawing, and text 3D drawing implementation.
In order to achieve the functionality, the main thing is the boolean setting and the if and else logic implementation.To realize the work, I set up nine booleans.
The next step is to set some function keys, this part is relatively simple, not to elaborate too much.
The third part is more complicated and requires completing the steps of clicking the function keys with the mouse to achieve the corresponding function. If you break down the specific is two steps, the first is the computer to identify the mouse click in the corresponding area, the second step is to use to achieve the function.
First, I use the above diagram to determine if the computer can accurately identify if a function key needs to be triggered, and if so, display true on the monitor.
But this will have a problem, the program will only show true if the mouse is always in the area but this is obviously a loophole. So I used a nested logic structure to solve this problem.
Function Demo
Color Demo
The first two colors are about warm tones of the color blocking key, which generates random color combinations of warm tones, and the last two are cool tones of monotone colors.
Mosaic painting
With a click on the S button, you can draw as many mosaic abstractions as you like, but of course you can adjust the colours or shapes in the program to achieve different effects.
Stereoscopic three-dimensional text painting
When you click on the E button you can use the eraser function
Reflection
Thanks to Patoot for teaching me how to make a nested logic structure.
In fact, there were a number of features I tried to add, such as button and screen interaction, but I left that part out because the colour palette took up a large part of it. In fact, I would like to refine the colours next time and use functions to automatically adjust the colour changes, which would make the interaction better.