Question

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

我制作了三个切换按钮，您可以选择在顶部显示背景和对象，所有这些切换或全部分开。每当我运行草图时，它会显示＆＃34;灰色＆＃34;背景，但是当我使用切换时，它不显示任何内容，或显示闪烁的图像，鼠标点击不能用于转到下一个图像。我似乎无法找到问题所在。希望你能提供帮助。：）

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

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

1 个答案: