let currMode;
function
setup() {
createCanvas(500, 400);
textSize(16);
let rectModes = [CORNER, CORNERS, CENTER, RADIUS];
let index = 0;
currMode = rectModes[index];
let closeBtn = createButton(
"Change rectMode"
);
closeBtn.position(220, 40);
closeBtn.mouseClicked(() => {
if
(index < rectModes.length - 1) index++;
else
index = 0;
currMode = rectModes[index];
});
}
function
draw() {
clear();
text(
"Click on the button to"
+
" change the rectMode()"
, 20, 20);
fill(
"green"
);
rectMode(CORNER);
rect(100, 100, 100, 100);
fill(
"red"
);
rectMode(currMode);
rect(100, 100, 50, 50);
circle(100, 100, 10);
circle(200, 100, 10);
circle(100, 200, 10);
circle(200, 200, 10);
fill(
"black"
);
text(
"Current Mode: "
+ currMode, 20, 250);
switch
(currMode) {
case
CORNER:
text(
"1st Parameter: upper-left"
+
" corner x coord"
, 20, 280);
text(
"2nd Parameter: upper-left"
+
" corner y coord"
, 20, 300);
text(
"3rd Parameter: width"
, 20, 320);
text(
"4th Parameter: height"
, 20, 340);
break
;
case
CORNERS:
text(
"1st Parameter: upper-left corner"
+
" x coord"
, 20, 280);
text(
"2nd Parameter: upper-left corner"
+
" y coord"
, 20, 300);
text(
"3rd Parameter: opposite corner x"
, 20, 320);
text(
"4th Parameter: opposite corner y"
, 20, 340);
break
;
case
CENTER:
text(
"1st Parameter: shape's center"
+
" point x coord"
, 20, 280);
text(
"2nd Parameter: shape's center"
+
" point y coord"
, 20, 300);
text(
"3rd Parameter: width"
, 20, 320);
text(
"4th Parameter: height"
, 20, 340);
break
;
case
RADIUS:
text(
"1st Parameter: shape's center"
+
" point x coord"
, 20, 280);
text(
"2nd Parameter: shape's center"
+
" point y coord"
, 20, 300);
text(
"3rd Parameter: half of shape's"
+
" width"
, 20, 320);
text(
"4th Parameter: half of shape's"
+
" height"
, 20, 340);
break
;
default
:
break
;
}
}