#2 Form Generator

Description

This is a generater that allows you to generate a Mondrian style image randomly.
Click on the page to switch the color and shape. You can save a copy of the random result by pressing any key.

Design Process

For the maximum scale and minimum scale, I thought the maximum for one part could be the minimum for another part.
I chose a Mondrian paint as the basic form, and give random values to the shape positions and colors. As you can see in the axis below, I labeled each spot that controls the shape, the coordinates can be picked randomly within a certain range, to keep the shapes in order but in different combinations. This could also make sure that the rectangles stick to each other, instead of being overlapped or separated. check my code here

Reflection

At first, I wanted to make the shapes change in real-time according to the mouse position, but couldn’t figure out how to keep the spots move within a very certain scale. So I choose to make it static.
I tried to use as much mouse function as possible but the mouseWheel() function made it uneasy to scroll down and browse the content on the webpage. The way people can interact with a web page is very limited with such simple code. Perhaps I should consider trying mouseover next time :/