Функция Toggle не работает в обработке (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(), когда a выбирается для отображения, кадры будут мерцать быстро, поскольку случайный индекс генерируется несколько раз в секунду (каждый кадр). Вы можете захотеть рандомизировать индексы в другом событии (например, мыши или нажатия клавиши) и сохранить это значение в переменной, которую вы можете повторно использовать.
2. условия, которые вы используете в draw(): вы, вероятно, должны были проверить, являются ли значения true (включено или включено в controlP5)? (Egeg 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 массива сложны (и это может быть), перейдите на один шаг назад: попробуйте свою логику с одним массивом только до тех пор, пока вы не повесите его, а затем перейдите. Шаг назад - это шаг вперед, когда вы идете в неправильном направлении.

Как творческий, как вы хотели бы быть с обработкой, в виду, интерфейс для подключения ваших идей к нему по-прежнему представляет собой серию из одной инструкции за раз, каждая из которых точно настроена на то, что вы хотите, чтобы она делать. Там есть место для забавы, но, к сожалению, вам нужно пройти мимо расточных деталей сначала