import controlP5.*; ControlP5 cp5; boolean drawRectangle = false; // Variable to track the shape to be drawn int shapeSize = 50; // Initial shape size int backgroundColor = 200; // Initial background color void setup() { size(400, 400); cp5 = new ControlP5(this); // Checkbox to toggle between shapes cp5.addCheckBox("toggleShape") .setPosition(20, 20) .setSize(30, 30) .addItem("Click to toggle between Rectangle or circle", 0) .setColorForeground(color(120)) .setColorActive(color(255)); // Slider to adjust shape size cp5.addSlider("adjustSize") .setPosition(20, 70) .setSize(200, 20) .setRange(10, 100) .setValue(shapeSize); // Button to change background color cp5.addButton("changeColor") .setPosition(20, 120) .setSize(120, 30) .setCaptionLabel("Change Background Color"); } void draw() { background(backgroundColor); stroke(0); if (drawRectangle) { drawRectangle(); // If drawRectangle is true, draw a rectangle } else { drawEllipse(); // If drawRectangle is false, draw an ellipse } } // Function to draw a rectangle void drawRectangle() { rectMode(CENTER); rect(width / 2, height / 2, shapeSize, shapeSize); } // Function to draw an ellipse void drawEllipse() { ellipseMode(CENTER); ellipse(width / 2, height / 2, shapeSize, shapeSize); } // Function to toggle between rectangle and ellipse based on checkbox state void controlEvent(ControlEvent theEvent) { if (theEvent.isFrom("toggleShape")) { int[] states = int(theEvent.getArrayValue()); if (states[0] == 1) { drawRectangle = true; // If checkbox is checked, set drawRectangle to true } else { drawRectangle = false; // If checkbox is unchecked, set drawRectangle to false } } } // Function to adjust shape size based on the slider value void adjustSize(float newSize) { shapeSize = int(newSize); } // Function to change background color when the button is clicked void changeColor() { backgroundColor = color(random(255), random(255), random(255)); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter