切换功能在加工中不起作用（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. 当你的鼠标调用显示（）它呈现那些3张图片一次（也因为它使用了随机索引，所以它们会有不同的图像）。类似地，在draw（）中，当渲染被选中时，由于随机索引每秒生成多次（每帧），帧将快速闪烁。您可能希望在不同事件中随机化索引（例如，鼠标或按键），并将该值存储在可重复使用的变量中。
2. 您在draw（）中使用的条件：您可能想要检查值是否为true（在controlP5中启用/打开时切换）？ （egeg if (showBackground==true)与false初始化切换，而不是真实的？）
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个数组是非常棘手的（也可能是），那么退一步：只用一个数组尝试你的逻辑，直到你掌握它为止，然后继续前进。 当你走错了方向时，向后退步有时会向前迈进一步。

作为您想要处理的创意，铭记于心，将您的想法插入其中的界面仍然是一次一系列的指令，每个指令都精确地按照您的要求进行调整做。有空间有趣，但不幸的是，你需要先穿过无聊的部分