切换功能在处理中不起作用 (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(toggled enabled/turned in controlP5) ？ （例如 if (showBackground==true) 并使用 false 初始化切换，而不是 true？）
3. 一个大的：在draw() 中，在每个条件（showBackground,showGrids,showObjects）之后，如果它是假的，你正在清除整个帧（所以以前的图像会被删除）
4. 您有 3 个数组，但您只使用第一个 (myImageArray.length) 的大小，这意味着，即使您可能有更多 myImageArray2 和 myImageArray3 的图像，您也没有加载，也没有显示他们。
5. 第三个网格应该是“showGrids”时被标记为“showGrid”：如果您与切换标签和变量名称不一致，切换不会更新变量名称。
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 发挥创意，但请记住，将您的想法插入其中的界面仍然是一系列一次一条指令，每条指令都经过精确调整以完全按照您的意愿执行.有乐趣的空间，但不幸的是你需要先克服无聊的部分