Hero image

Rectangle Coordinates

What the code does

This demo is rather complex as it consolidates a bunch of the previous demos, so have a look at the movie to see what can be done. When the mouse cursor (white dot) is contacting either the top-left or bottom-right corner circles of the rectangle, the dot defining the corner circle will turn from blue to red. Clicking on one of the corner circles highlights it with a white outline ring. Clicking and holding the mouse button down on one of the corner circles allows one to “drag” the selected corner circle around the screen, which also alters the shape of the rectangle. The rectangle has minimum specified dimensions, so cannot be shrunk beyond this minimum limit.

Visualisation

The code

Instagram image Instagram image Instagram image Instagram image Instagram image Instagram image