How to add/remove a shape with a key press in Processing? - processing

I want to add/remove an ellipse using a press of a button in Processing. I use void keyPressed() and void keyReleased() for the keys. But how can I use if statements to add/remove an ellipse?
Now that i can add more , and remove some ellipses. For example, if i have one i can press a button then have one more. Or press a button to remove one. But now I would like to move those ellipses (max 4) using different key sets for each of them. How can i do that?

What you need to do is have a boolean to be read whenever the ellipse is to be drawn. If that is true draw it, if it not don't! THe keypress should just switch that boolean. Like this:
boolean iShouldDrawTheEllipse = true;
void draw() {
background(0);
if(iShouldDrawTheEllipse) ellipse(50,50,10,10);
}
void keyPressed() {
iShouldDrawTheEllipse = !iShouldDrawTheEllipse;
}

You can use some booleans to determinate which ellipse you have to print and which not.
E.G.
void keyPressed(){
switch(keyCode){
case 'z':
drawingFirstEllipse = !drawingFirstEllipse;
break;
case 'x':
drawingSecondEllipse = !drawingSecondEllipse;
break;
case 'c':
drawingThirdEllipse = !drawingThirdEllipse;
break;
case 'v':
drawingFourthEllipse = !drawingFourthEllipse;
break;
}
}
Then in your void draw(void) method you can easily draw the ellipses:
void draw(){
background(0);
if(drawingFirstEllipse) ellipse(50, 50, 10, 10);
if(drawingSecondEllipse) ellipse(50, 50, 70, 10);
if(drawingThirdEllipse) ellipse(50, 50, 130, 10);
if(drawingFourthEllipse) ellipse(50, 50, 190, 10);
}
I hope I helped [;

Related

p5js leaving traces on canvas

I am doing an audio visualisation application that changes the size of a shape based on the values of meyda's zcr feature. However once the shape is drawn, it still leaves a traces of the previous value on the canvas. Is the a way I can remove these traces?
I assigned the zcr values to the shapes height however the drawn shape does not refresh its appearance even though the values are changed.
function setup() {
createCanvas(800,600);
background(180);
playStopButton = createButton('play');
playStopButton.position(20, 20);
playStopButton.mousePressed(playStopSound);
amplitude = new p5.Amplitude();
rectH = 0;
if (typeof Meyda === "undefined"){
console.log("meyda could not be found");
} else {
analyzer = Meyda.createMeydaAnalyzer({
"audioContext": getAudioContext(),
"source": mySound,
"bufferSize": 512,
"featureExtractors": ["zcr"],
"callback": features => {
console.log(features);
rectH = features.zcr;
}
});
}
}
function draw() {
rectMode(RADIUS);
rect(80,300, 80, rectH);
console.log(rectH);
}
draw and set up function for reference.
Move the a 'background(180);' from the setup() to the draw() function.
Like this:
function draw() {
background(180);
rectMode(RADIUS);
rect(80,300, 80, rectH);
console.log(rectH);
}

Toggle function not working in Processing (ControlP5)

I just made my image generator work with PNG files. For now, it's divided into 3 categories (backgrounds, objects & texts). These are now all combined, and with every mouse click it randomises these PNGs.
I made three toggles, where you could to choose to show either the background and the objects on top, all of them, or all separate. Whenever I run the sketch, it shows the "grey" background, but when I use the toggles, it doesn't show anything, or shows a flickering image, where the mouse-click can't be used to go to the next image. I can't seem to find the problem. Hopefully, you can help. :)
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();
}
Here are a couple of things where the logic your wrote in your code might not match what you had in mind:
When you call display() on mouse it renders those 3 images once (also it will be different images within those since it's using a randomised index). Similarly in draw(), when an does get picked to be rendered, frames will be flickering fast as a random index is generated multiple times per second(each frame). You may want to randomise indices in a different event (e.g. mouse or key press) and store this value in a variable you can re-use.
the conditions you use in draw(): you probably meant to check if the values are true(toggled enabled/turned on in controlP5) ? (e.g. e.g. if (showBackground==true) and initialise the toggles with false, instead of true?)
a big one: in draw() , after each condition(showBackground,showGrids,showObjects), if it's false, you're clearing the the whole frame (so a previous image would be erased)
you have 3 arrays, but you use the size of the first(myImageArray.length) only, which means, even though you may have more images for myImageArray2 and myImageArray3, you're not loading, nor displaying them.
The third grid is labeled "showGrid" when it should be "showGrids": if you aren't consistent with the toggle labels and variable names, toggles won't update the variable names.
you should use more descriptive names for the arrays: it will make it easier to scan/follow your code on the long run.
there's no need to add toggles multiple times in the for loop where you load images: once will do.
Here's what I mean:
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
}
}
Note that currently the same index is used for all 3 arrays.
You may want to add a separate index variable for each array (e.g. currentObjectIndex, currentBackgroundIndex, currentGridIndex) that you can increment independently of each other.
I recommend having a bit more patience and double checking your code first.
Visualise what each line of code will do, then check if it actually does what you expect it to do. Either you will learn something new or improve your logic.
Also, if mentally joggling 3 arrays is tricky (and it can be), go one step back: try your logic with one array only until you get the hang of it, then move on.
A step backwards is sometimes a step forward when you're going in the wrong direction.
As creative as you'd like to be with Processing, bare in mind, the interface to plugging your ideas to it is still a series of one instruction at a time, each precisely tuned to do exactly what you want it to do. There's room for fun, but unfortunately you need to get past the boring parts first

Typing Library in Processing

I was wondering if there was a library in Processing that would allow you to type and it would show up on the screen while a program was running. Or a way I could do this without a library. I am working on a paint like program and I want to allow the user to be able to hit t then click an area then type so they can add text to their picture. I can add things like text size and other things myself. Thanks in advance.
SnapDraggen
If all you want to do is get user input (and judging by your other question, this is the case), then just use the keyPressed() function along with the key variable:
void draw(){
rect(25, 25, 25, 25);
}
void keyPressed() {
if (key == 'r' || key == 'R') {
fill(255, 0, 0);
}
else if (key == 'g' || key == 'G') {
fill(0, 255, 0);
}
else if (key == 'b' || key == 'B') {
fill(0, 0, 255);
}
else{
fill(0);
}
}
But if you want a component that you can type into, then either create your own (using the keyPressed() function to get input) or look into libraries such as ControlP5 or G4P.

keyDown() Not working Processing

I'm using Processing to make something and basically my keyDown() is not working. It supposed to be triggered when any key is pressed but the function is not being called. Code below:
int playerno=0; //determines player
boolean ready=true;
void setup() {
size(700, 700);
background(#FFFFFF);
fill(#000000);
textSize(50);
text("Press Any Key To Start", 350, 350);
}
void keyPressed() {
if (ready) {
fill(#FFFFFF);
rect(350, 350, 200, 100);
fill(#000000);
textSize(50);
text("Game Ready", 350, 350);
boolean ready=false;
}
}
This will won't work without draw function. Also you are declaring new local variable ready inside keypressed() this is bad mistake. Try move your drawing code from "keyDown()" into "drawing" like this:
void draw() {
if (ready == false) {
background(#FFFFFF); //This is needed for redrawing whole scene
fill(#FFFFFF);
rect(350, 350, 200, 100);
fill(#000000);
textSize(50);
text("Game Ready", 350, 350);
}
}
void keyPressed() {
if (ready) {
ready=false;
}
}

List of Scrollable Checkboxes in Processing

I am a newbie to programming GUIs and Processing. My questions is how can I get a list of checkboxes that I can scroll through? What I want is exactly the list of countries on the right here (http://goo.gl/MIKHi4).
I looked through the ControlP5 library and was able to find Checkboxes, but I don't know how I can make a scrollable list of them.
Thank you.
I had also been searching for this last week and hoping that there was a ready-for-use library for me to easily add the scrollable checkboxes to my application, but finally I had no luck. At last, what I did was implementing my own scrollable list of checkboxes.
Firstly, I added a ControlP5 slider as the scroll bar, and then at each frame, got value from the slider and draw the specific checkboxes based on that value.
Suppose that you have a list of 200 countries for the user to select. Then the code will be like:
ControlP5 cp5;
Slider scrollBar;
PFont fLabel;
int boxOver = -1; //Indicate mouse is over which checkbox
boolean[] boxSelected; //Checkbox selected or not
void setup() {
size(1024, 800);
colorMode(HSB, 360, 100, 100);
cp5 = new ControlP5();
scrollbar = cp5.addSlider("scrollbar")
.setPosition(1005, 110)
.setRange(0, 180)
.setSize(15, 490)
.setHandleSize(30)
.setSliderMode(Slider.FLEXIBLE)
.setValue(180); //Put handler at top because 0 value is at bottom of slider
fLabel = createFont("Arial", 12, false);
boxSelected = new boolean[200];
for(int i=0;i<200;i++) {
boxSelected[i] = false;
}
}
void draw() {
noFill();
stroke(200, 255);
rect(820, 110, 200, 490); //The outline of the scrollable box
stroke(150, 255);
int count = 0;
//Suppose that you want to display 20 items each time
for(int i=180-(int)scrollBar.getValue();i<180-(int)scrollBar.getValue()+20;i++) {
if(boxOver < 0) {
if(mouseX>=825 && mouseX<837 && mouseY >= 120+count*24 && mouseY <= 132+count*24) {
boxOver = i;
cursor(HAND);
}
}
if(boxSelected[i]) {
fill(50); //If the box is selected, fill this box
} else {
fill(360);
}
rect(825, 120+count*24, 12, 12); //Draw the box
//Draw the label text
textFont(fLabel);
fill(50);
text(countries[i], 843, 132+count*24); //Suppose the country names are stored in countries[]
count++;
}
}
void mousePressed() {
if(boxOver >=0) {
boxSelected[boxOver] = !boxSelected[boxOver]; //Toggle selection
}
}
Hope this helps you, or anyone who may encounter the same problem in the future.
There is now an example in the experimental examples called ControlP5SliderList

Resources