切換功能在加工中不起作用（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個數組是非常棘手的（也可能是），那麼退一步：只用一個數組嘗試你的邏輯，直到你掌握它爲止，然後繼續前進。 當你走錯了方向時，向後退步有時會向前邁進一步。

作爲您想要處理的創意，銘記於心，將您的想法插入其中的界面仍然是一次一系列的指令，每個指令都精確地按照您的要求進行調整做。有空間有趣，但不幸的是，你需要先穿過無聊的部分