切换功能在处理 (ControlP5) 中不起作用

Question

我刚刚让我的图像生成器可以处理 PNG 文件。目前，它分为 3 类（背景、对象和文本）。这些现在全部组合在一起，每次单击鼠标都会随机化这些 PNG。

我制作了三个开关，您可以在其中选择显示背景和顶部的对象、全部或单独显示。每当我运行草图时，它都会显示 "grey" 背景，但是当我使用切换时，它什么都不显示，或者显示闪烁的图像，无法使用鼠标单击转到下一张图片。我似乎找不到问题所在。希望你能帮忙。 :)

import controlP5.*;

boolean showBackground = false;
boolean showObjects = false;
boolean showGrids = false;

ControlP5 cp5;

PImage[] myImageArray = new PImage[8];
PImage[] myImageArray2 = new PImage[15];
PImage[] myImageArray3 = new PImage[15];



void setup() {
  size(1436, 847);
  background(211, 211, 211);

  for (int i=0; i<myImageArray.length; i++) {
    myImageArray[i] = loadImage  ( "o" + i + ".png");
    myImageArray2[i] = loadImage  ( "g" + i + ".png");
    myImageArray3[i] = loadImage( "b" + i + ".jpg");
    cp5 = new ControlP5(this);

    // create a toggle and change the default look to a (on/off) switch look
    cp5.addToggle("showBackground")
      .setPosition(40, 250)
      .setSize(50, 20)
      .setValue(true)
      .setMode(ControlP5.SWITCH);

    cp5.addToggle("showObjects")
      .setPosition(40, 400)
      .setSize(50, 20)
      .setValue(true)
      .setMode(ControlP5.SWITCH);


    cp5.addToggle("showGrid")
      .setPosition(40, 600)
      .setSize(50, 20)
      .setValue(true)
      .setMode(ControlP5.SWITCH);
  }
  display();
}
void display() {

  image(myImageArray3[(int)random(myImageArray.length)], 0, 0, 1436, 847); // b

  image(myImageArray2[(int)random(myImageArray.length)], 0, 0, 1436, 847); // g

  image(myImageArray[(int)random(myImageArray.length)], 0, 0, 1436, 847); // o
}
void mousePressed() {
  display();
}

void draw() {
  pushMatrix();

  if (showBackground==false) {
    image(myImageArray3[(int)random(myImageArray.length)], 0, 0, 1436, 847); // b
  } else {
    background(211, 211, 211);
  }
  if (showGrids==false) {
    image(myImageArray2[(int)random(myImageArray.length)], 0, 0, 1436, 847); // g
  } else {
    background(211, 211, 211);
  }
  if (showObjects==false) {
    image(myImageArray[(int)random(myImageArray.length)], 0, 0, 1436, 847); // o
  } else {
    background(211, 211, 211);
  }

  popMatrix();
}

Answer 1

在以下几点中，您在代码中编写的逻辑可能与您的想法不符：

当您在鼠标上调用 display() 时，它会渲染这 3 个图像一次（而且它们中的图像也会不同，因为它使用的是随机索引）。同样在 draw() 中，当一个 does 被选中进行渲染时，帧将快速闪烁，因为每秒（每帧）多次生成随机索引。您可能希望在不同的事件（例如鼠标或按键）中随机化索引并将此值存储在一个变量中，您可以 re-use.
您在 draw() 中使用的条件：您可能想检查值是否为 true（在 controlP5 中切换为 enabled/turned）？（例如 if (showBackground==true) 并使用 false 初始化切换，而不是 true？）
一个大的：在 draw() 中，在每个条件 (showBackground,showGrids,showObjects) 之后，如果它为假，您将清除整个帧（因此之前的图像将被删除）
你有 3 个数组，但你只使用第一个 (myImageArray.length) 的大小，这意味着，即使你可能有更多 myImageArray2 和 myImageArray3 的图像，你没有加载，也没有显示它们。
第三个网格被标记为 "showGrid" 而它应该是 "showGrids"：如果您与切换标签和变量名称不一致，切换将不会更新变量名称。
您应该为数组使用更具描述性的名称：这将使 scan/follow 您的代码更容易运行.
无需在加载图像的 for 循环中多次添加切换：一次即可。

我的意思是：

import controlP5.*;

boolean showBackground = false;
boolean showObjects = false;
boolean showGrids = false;

ControlP5 cp5;

PImage[] objects = new PImage[8];
PImage[] grids = new PImage[15];
PImage[] backgrounds = new PImage[15];

int currentImage = 0;

void setup() {
  size(1436, 847);
  //load objects
  for (int i=0; i<objects.length; i++) {
    objects[i] = loadImage  ( "o" + i + ".png");
  }
  //load grids
  for(int i = 0 ; i < grids.length; i++){
    grids[i] = loadImage  ( "g" + i + ".png");
  }
  //load backgrounds
  for(int i = 0 ; i < grids.length; i++){
    backgrounds[i] = loadImage( "b" + i + ".jpg");
  }
  //setup UI
  cp5 = new ControlP5(this);
  // create a toggle and change the default look to a (on/off) switch look
  cp5.addToggle("showBackground")
    .setPosition(40, 250)
    .setSize(50, 20)
    .setValue(false)
    .setMode(ControlP5.SWITCH);

  cp5.addToggle("showObjects")
    .setPosition(40, 400)
    .setSize(50, 20)
    .setValue(false)
    .setMode(ControlP5.SWITCH);


  cp5.addToggle("showGrids")
    .setPosition(40, 600)
    .setSize(50, 20)
    .setValue(false)
    .setMode(ControlP5.SWITCH);
}
void mousePressed() {
  //go to next image index
  currentImage = currentImage + 1;
  //check if the incremented index is still valid, otherwise, reset it to 0 (so it doesn't go out of bounds)
  if (currentImage >= objects.length) {
    currentImage = 0;
  }
}

void draw() {
  //clear current frame
  background(211);//for gray scale value you can just use one value: the brightness level :)

  if (showBackground==true) {
    image(backgrounds[currentImage], 0, 0, 1436, 847); // b
  } 
  if (showGrids==true) {
    image(grids[currentImage], 0, 0, 1436, 847); // g
  } 
  if (showObjects==true) {
    image(objects[currentImage], 0, 0, 1436, 847); // o
  }
}

请注意，目前所有 3 个数组都使用相同的索引。您可能希望为每个数组添加一个单独的索引变量（例如 currentObjectIndex, currentBackgroundIndex, currentGridIndex），您可以彼此独立地递增。

我建议您多一些耐心，并先仔细检查您的代码。可视化每一行代码将做什么，然后检查它是否确实按照您的预期进行。要么你会学到新东西，要么提高你的逻辑。

此外，如果在头脑中操纵 3 个数组很棘手（而且可能如此），请退后一步：仅使用一个数组尝试您的逻辑，直到掌握它的窍门，然后继续。当你朝着错误的方向前进时，有时倒退一步就是前进一步。

尽管您希望使用 Processing 发挥创意，但请记住，将您的想法插入其中的界面仍然是一次包含一系列指令，每条指令都经过精确调整以完全按照您的要求执行去做。有好玩的地方，但不幸的是你需要先通过无聊的部分

切换功能在处理 (ControlP5) 中不起作用

Toggle function not working in Processing (ControlP5)

processing

image

generator