HTX Frederikshavn & Hjørring

Mål: I denne opgave skal du oprette et Interaktivt kontrolpanel ved hjælp af ControlP5-biblioteket. Du skal implementere forskellige kontrolelementer som knapper, sliders og toggle-knapper, og få dem til at interagere med et grafisk element, f.eks. et roterende rektangel.

Du skal oprette følgende kontrolelementer:

• TextLabel: En lille tekst der beskriver hvad en control skal styre.
• Knap (Button): En knap, der ændrer baggrundsfarven eller farve på rektangel til en tilfældig farve, når den trykkes.
• Sliders: Tre sliders til at justere farverne rød, grøn og blå. Når sliders ændres, skal farven på baggrunden eller rektangel ændres dynamisk.
• Knob : En drejeknap til at styre sidelængde af rektangel.
• Toggle-knap (Switch): En toggle-knap, der starter og stopper rotationen af et rektangel, når den er slået til og fra.

Se din tidligere opgave, eller besøg nedenstående links for at se hvordan du opretter de relevant controls:

• Link : https://www.sojamo.de/libraries/controlP5/
• Link : https://github.com/sojamo/controlp5?tab=readme-ov-file

Her er koden, der får et rektangel til at rotere, når toggle-knappen er slået til:

import controlP5.*;
 
ControlP5 cp5;
float redValue = 100;  // Startværdi for farverne
float greenValue = 100;
float blueValue = 100;
float sideLength = 100;
boolean isRotating = false;  // Boolean til at kontrollere om rektanglet skal rotere
float angle = 0;  // Startvinkel for rotationen
 
void setup() {
  size(500, 500);
  cp5 = new ControlP5(this);
 
  // Dine controls skal du oprette her
 
}
void draw() {
  // Baggrundsfarve opdateres baseret på sliders
  background(redValue, greenValue, blueValue);
 
  // Hvis rotationen er tændt, roter rektanglet
  if (isRotating) {
    angle += 0.05;  // Hver frame øges vinklen en smule
  }
 
  // Tegn et rektangel, der roterer
  pushMatrix();
  translate(width / 2, height / 2);  // Flyt oprindelsen til midten af skærmen
  rotate(angle);  // Roter med den aktuelle vinkel
  fill(255, 0, 0);  // Farv rektanglet rødt
  rect(-sideLength/2, -sideLength/2, sideLength, sideLength);  // Tegn rektanglet
  popMatrix();
}

Her antages at der er oprette en control 'Toggle' med navnet 'toggle'.

void controlEvent(ControlEvent ev) {
 
  if (ev.isController()) {
 
    // Gem navnet på controlleren i en variabel
    String navn = ev.getController().getName();
 
    // Vi tjekker hvilken knap eller 'control' der har afgivet en event.
    if (navn.equals("toggle")) {
      isRotating = !isRotating;
    }
  }
}