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.
Related
I personally don't know how much help I can get in this situation. I was trying to make a Flappy bird sketch off of Daniel Shiffman's videos using the p5.js web editor, however when the keyPressed() function was used (which I am familiar with because I did a bunch with Processing), I would get no response. Now originally, it was if(key === ' ') { that was being used, and when the space bar was pressed, the sketch would reset. However, when I tried with other letters, then eventually to just the keyPressed example from the reference, it still wouldn't do anything. It even worked on the website's example, however it wouldn't work in the web editor. What is happening?
Example code:
let value = 0;
function draw() {
fill(value);
rect(25, 25, 50, 50);
}
function keyPressed() {
if (value === 0) {
value = 255;
} else {
value = 0;
}
}
Try this:
//in the draw function
if (keyIsDown(LEFT_ARROW /*or what ever*/)) {
//action
}
I'm trying to implement a pause/play for a sketch with the same key, for example if I press p the sketch should stop and if I press p again, the sketch should start again. So far I used the noLoop()/loop() to do this but with two different keys (p for pause, r for start). It does work if I use keyPressed() and keyReleased() but this means to hold down the key but this doesn't answer my question. Also in the pause mode I used redraw() for a single step while noLoop() and works good.
Here is some code I tried so far with two different keys:
public void draw(){
background(random(255));
}
public void keyPressed(){
if ( key == 'p' )
noLoop();
if ( key == 'r' )
loop();
if ( key == 's' )
redraw();
}
And this is the code with the same key:
public void draw(){
background(random(255));
}
public void keyPressed(){
if ( key == 'p' )
noLoop();
if ( key == 'p' )
loop();
if ( key == 's' )
redraw();
}
In this case when I press key it doesn't have any effect.
And the last one I tried is this:
public void draw(){
background(random(255));
}
public void keyPressed(){
if ( key == 'p' )
noLoop();
else
loop();
if ( key == 's' )
redraw();
}
In this case when I press 'p' it stops the sketch but is doesn't play again. Because of the 'else' it plays again when I press any key including 's' which suppose to be just for a single step.
Any help is more than welcome.
Thanks!
Please try to post a MCVE that we can copy and paste to run ourselves. The code you've posted is almost a MCVE, but please include a draw() function so we can see exactly the same thing as you.
Here's a simple MCVE that demonstrates the problem you're having:
void draw() {
background(random(255));
}
public void keyPressed() {
if ( key == 'p' ) {
noLoop();
}
if ( key == 'p' ) {
loop();
}
}
This code will show a randomly flashing background. If you press the P key, you're expecting it to pause, but it just keeps flashing.
You need to get into the habit of stepping through your code to understand exactly what it's doing. Read through the keyPressed() function line by line, and imagine what the code will do when you press the P key.
The first if statement checks whether the key is P, and since it is, it calls the noLoop() function. Then the second if statement checks whether they key is P, and since it is, it calls the loop() function. This reverses the call to noLoop() we just made, which makes it appear as though nothing happens.
You need to track the state of your sketch. In your case, you need to track whether the sketch is currently paused. You could use a single boolean variable for this. Then use that variable to make sure you do the right thing when the P key is pressed. Something like this:
boolean paused = false;
void draw() {
background(random(255));
}
public void keyPressed() {
if ( key == 'p' ) {
paused = !paused;
if (paused) {
noLoop();
} else {
loop();
}
}
}
I have no idea how Processing knows that a user is pressing Ctrl and some character at the same time.
Multiple buttons at same time only. Is it possible?
ex: (Ctrl+r).
You have to first check if Ctrl has been pressed. If it has been pressed then you save a boolean as true. The next time you press a button you check if the button is the button you want (i.e. 'r') and if the boolean is true. If both are true then Processing knows...
Here's a demonstration:
boolean isCtrlPressed = false;
boolean isRPressed = false;
void draw() {
background(0);
fill(255);
if (isCtrlPressed) background(255, 0, 0);
if (isRPressed) background(0, 255, 0);
if (isCtrlPressed && isRPressed) background(255, 255, 0);
}
void keyPressed() {
if (keyCode == CONTROL && isCtrlPressed == false) isCtrlPressed = true;
if (char(keyCode) == 'R') isRPressed = true;
}
void keyReleased() {
if (keyCode == CONTROL) isCtrlPressed = false;
if (char(keyCode) == 'R') isRPressed = false;
}
I know this is a very old feed, but I have something that might help everyone with multiple key presses. This is for Processing's Python Mode, but I'm sure it can be implemented in some way for other modes.
import string
#string.printable is a pre-made string of all printable characters (you can make your own)
keys = {}
for c in string.printable:
#set each key to False in the keys dictionary
keys[c] = False
def keyPressed():
#If key is pressed, set key in keys to True
keys[key] = True
def keyReleased():
#If key is released, set key in keys to False
keys[key] = False
And then using multiple if statements, you can check the dictionary for whether the key is pressed or not.
if keys['w'] == True:
#Do something
if keys['s'] == True:
#Do something
if keys['a'] == True:
#Do something
if keys['d'] == True:
#Do something
if keys[' '] == True:
#Do something
And so on.
Hope this helps!
You could also override the keyPressed(KeyEvent) method and use the KeyEvent.isControlDown() method:
void keyPressed(KeyEvent ke) {
println(ke.isControlDown());
}
void draw(){
//need draw() method for keyPressed() to work
}
you can find out the "key" codes of any combination of "ctrl + *" or "Shift + *" by typing, but this method is not suitable for multi-clicking to control the game.
combination search code
void setup()
{
textAlign(CENTER,CENTER);
}
void draw()
{
background(0);
text(int(key),50,50);
}
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 [;
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