切换功能在Processing（ControlP5）中不起作用

Question

我刚刚让我的图像生成器使用PNG文件。目前，它分为3类（背景，对象和文本）。现在这些都是组合在一起的，每次鼠标点击它都会随机化这些PNG。

我做了三个切换，在那里你可以选择显示背景和顶部的对象，所有这些或所有单独的。每当我运行草图时，它会显示“灰色”背景，但是当我使用切换时，它不会显示任何内容，或显示闪烁的图像，鼠标单击不能用于转到下一个图像。我似乎无法找到问题。希望你能提供帮助。 :)

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

以下是您在代码中编写的逻辑可能与您的想法不符的几个问题：

1. 当您在鼠标上调用display（）时，它会将这3个图像渲染一次（因为它使用的是随机索引，因此它们将是不同的图像）。类似地，在draw（）中，当拾取被渲染时，帧将快速闪烁，因为随机索引每秒生成多次（每帧）。您可能希望在不同的事件（例如鼠标或按键）中随机化索引，并将此值存储在您可以重复使用的变量中。
2. 你在draw（）中使用的条件：你可能想检查值是否为true（在controlP5中启用/启用切换）？ （例如if (showBackground==true)并用false初始化切换，而不是真的吗？）
3. 一个大的：在draw()，在每个条件（showBackground,showGrids,showObjects）之后，如果它是假的，你将清除整个帧（所以先前的图像将被删除）
4. 你有3个阵列，但你只使用第一个（myImageArray.length）的大小，这意味着，即使你有更多的图像用于myImageArray2和myImageArray3，你也不会加载，也不会显示它们。
5. 第三个网格标记为“showGrid”，它应该是“showGrids”：如果您与切换标签和变量名称不一致，则切换不会更新变量名称。
6. 您应该为数组使用更具描述性的名称：从长远来看，它将使您更容易扫描/遵循您的代码。
7. 没有必要在加载图像的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一样富有创意，请记住，将想法插入其中的界面仍然是一次一个指令系列，每个指令都经过精确调整，可以完全按照您的要求进行操作。有空的乐趣，但不幸的是你需要首先通过无聊的部分