Relatively new to coding… and by that I mean I’ve never done it before.
Our assignment is to assign different functions to the number keys. In the example code given, our professor assigned text to pop up when you press the keys, but I would like to change it to pull up an image instead.
Any tips appreciated.
Have a look at the first 3 textual tutorials on the website (you need setup and draw)
Look at keypressed/keyReleased in the reference on the Website
Then for each key have a boolean variable that you set to true on key pressed (see reference boolean)
Display an image when it’s boolean variable is true - use „if“ to check (see „if“ in the reference)
So load all images in setup()
And then: one key, one boolean variable, one „if“, one image!!!
Post your entire code and we can talk about it
Chrisir
Thank you!
Also, not sure if it makes a difference but she has it set up as a key release rather than a key press…
Doesn’t matter really, use keyReleased then
Looking forward to seeing your code
This is literally all I have so far. I understand practically nothing… I got an image to successfully load and thats about it
// image upload code (don't delete)
PImage fish;
void setup(){
size(1000,760);
fish=loadImage("fish.jpg");
}
void draw(){
background(0);
image(fish,0,0);
}
//key commands code (need to figure out how to call to image, instead of text)
void keyReleased () {
if (key == '1') {
image ("fish.jpg",0,0);
}
else if (key == '2') {
text ("#Nonsense = #BS", x, y);
}
else if (key == '3') {
text ("#BS != #BA", x, y);
}
else if (key == '4') {
text ("#BA #humbug", x, y);
}
else if (key == '5') {
text ("#Humbucker pickup", x, y);
}
else if (key == '6') {
text ("#Pickup Stix", x, y);
}
else if (key == '7') {
text ("#Sticks it to you", x, y);
}
else if (key == '8') {
text ("#U2", x, y);
}
else if (key == '9') {
text ("#Tupac", x, y);
}
else if (key == '0') {
text ("#Pack It In", x, y);
}
else if (key == '-') {
text ("#Delete Your Account", x, y);
}
else {
background (0);
y = 1010;
}
}
Then for each key have a boolean variable that you set to true on key pressed
See reference for boolean
Just repeat the fish stuff like
PImage subflower; before setup()
Then loadImage like you have it now in setup()
And then in draw() display the image
To have it selected by key press you want to make the displaying in draw() depending on an if-clause with a boolean variable
This boolean in turn gets altered by the key
Each image has to be done this way
Each image has its related boolean variable
Okay so for that I would assign this code to every number key needed? (10 in my case)
boolean a = false;
if (!a) {
rect(30, 20, 50, 50);
}
a = true;
if (a) {
line(20, 10, 90, 80);
line(20, 80, 90, 10);
}
if so, where it says “rect” and “line” is that where I would put in image(fish,0,0);?
Err…
Is this your entire sketch?
Why did you abandon the sketch with setup and draw and keyReleased??
Without these functions you don’t have an interactive sketch in the first place.
Otherwise the lines look promising!!!
Save the old sketch under a new name and play with it, understand it…
// image upload code (don't delete)
PImage fish0;
PImage fish1;
PImage fish2;
PImage fish3;
PImage fish4;
PImage fish5;
PImage fish6;
PImage fish7;
PImage fish8;
PImage fish9;
void setup(){
size(1000,760);
fish0=loadImage("0 fish pink.jpg");
fish1=loadImage("1 fish red.jpg");
fish2=loadImage("2 fish orange.jpg");
fish3=loadImage("3 fish yellow.jpg");
fish4=loadImage("4 fish green.jpg");
fish5=loadImage("5 fish dark green.jpg");
fish6=loadImage("6 fish blue.jpg");
fish7=loadImage("7 fish dark blue.jpg");
fish8=loadImage("8 fish dark purple.jpg");
fish9=loadImage("9 fish purple.jpg");
}
void draw(){
background(0);
image(fish0,0,0);
image(fish1,0,0);
image(fish2,0,0);
image(fish3,0,0);
image(fish4,0,0);
image(fish5,0,0);
image(fish6,0,0);
image(fish7,0,0);
image(fish8,0,0);
image(fish9,0,0);
}
is this right for how to get all the images?
Ok, almost there!!!
image code looks fantastic!!
Idea here is now that you have your „a“ boolean from the previous sketch and have an „a“ for every image!!!
like a0, a1 etc all declared false before setup
In draw() add if(a0) before every image command! Like if (a0) image(fish0…);
if(a1) image(fish1…);
In keyReleased set a0 to true when 0 is pressed, a1 to true when 1 is pressed and so forth (for example)
OMG YAY. Okay so here is the code I have so far that is working (:
I have a question regarding the true/false things I have set up under each key… do I have to type out each individual one (ex: a1= true, a2=false, a3=false,etc.) or is there a cleaner way to say “a1=true, a2-5= false?”
btw Thank you so much. God bless you.
// Uploading all images
PImage fish1;
PImage fish2;
PImage fish3;
PImage fish4;
PImage fish5;
boolean a1=false;
boolean a2=false;
boolean a3=false;
boolean a4=false;
boolean a5=false;
void setup() {
size(1000, 760);
fish1=loadImage("0 fish pink.jpg");
fish2=loadImage("1 fish red.jpg");
fish3=loadImage("2 fish orange.jpg");
fish4=loadImage("3 fish yellow.jpg");
fish5=loadImage("4 fish green.jpg");
}
void draw() {
background(0);
if (a1) image(fish1, 0, 0);
else if (a2)image(fish2, 0, 0);
else if (a3)image(fish3, 0, 0);
else if (a4)image(fish4, 0, 0);
else if (a5)image(fish5, 0, 0);
}
//key commands
void keyReleased () {
if (key == '1') {
a1=true;
a2=false;
a3=false;
a4=false;
a5=false;
} else if (key == '2') {
a1=false;
a2=true;
a3=false;
a4=false;
a5=false;
} else if (key == '3') {
a1=false;
a2=false;
a3=true;
a4=false;
a5=false;
} else if (key == '4') {
a1=false;
a2=false;
a3=false;
a4=true;
a5=false;
} else if (key == '5') {
a1=false;
a2=false;
a3=false;
a4=false;
a5=true;
} else {
background (0);
}
}
Code looks fantastic!!!
Well done.
There are ways to shorten that, especially when you had 100 images or 1000 customers for your shop.
First idea
Try boolean a1,a2,a3,a4,a5; before setup () !!
I forgot what the default value is for boolean; when it’s false, you are done. 1 line instead of 5!! Yay!
Arrays
See tutorial array to see how we would treat a 100 images in a convenient list
You could at beginning of keyReleased set all a1,a2… to false - before if
Then in each if just set the a1 to true you need in that if 
Saves also a lot of lines - disadvantage when another/wrong key was pressed, old image would disappear
you are a total life saver and wonderful confidence booster. I appreciate all of your patience and help today. Thank you again. I will post the final code when I finish it (it is not going to be rainbow fish haha)
please format your code posting here at forum
( topic editor )
by pasting it into the
</> code button
of the editor header menu ( context name: Preformatted text )
it looks like
```
type or paste code here
```
also can use the ``` manually above and below your code.
or select the already pasted “code” and use [ctrl][shift][c]
thank you.
also we recommend that the code from processing IDE ( PDE )
is formatted there first, like with /Edit/Auto Format/ or [ctrl][t]
now we need you to
REPAIR ALL
your above CODE POSTING,
not make a new / better post.
( just think about the hundred people opening your topic in the future )
Here is my final code for the project (:
I found the integer function to be much cleaner than the boolean set up I had going
Thank you again so much!
// Uploading all images
PImage elon1;
PImage elon2;
PImage elon3;
PImage elon4;
PImage elon5;
PImage elon6;
PImage elon7;
PImage elon8;
PImage elon9;
//used the integer system instead of boolean (much cleaner due to amount of images)
int a=99;
void setup() {
size(1000, 760);
elon1=loadImage("elon1.jpg");
elon2=loadImage("elon2.jpg");
elon3=loadImage("elon3.jpg");
elon4=loadImage("elon4.jpg");
elon5=loadImage("elon5.jpg");
elon6=loadImage("elon6.jpg");
elon7=loadImage("elon7.jpg");
elon8=loadImage("elon8.jpg");
elon9=loadImage("elon9.jpg");
}
//assigning images to correct numbers
void draw() {
background(0);
if (a=='1') image(elon1, 0, 0);
else if (a=='2')image(elon2, 0, 0);
else if (a=='3')image(elon3, 0, 0);
else if (a=='4')image(elon4, 0, 0);
else if (a=='5')image(elon5, 0, 0);
else if (a=='6')image(elon6, 0, 0);
else if (a=='7')image(elon7, 0, 0);
else if (a=='8')image(elon8, 0, 0);
else if (a=='9')image(elon9, 0, 0);
}
//key commands
void keyReleased () {
if (key == '1') {
a='1';
} else if (key == '2') {
a='2';
} else if (key == '3') {
a='3';
} else if (key == '4') {
a='4';
} else if (key == '5') {
a='5';
} else if (key == '6') {
a='6';
} else if (key == '7') {
a='7';
} else if (key == '8') {
a='8';
} else if (key == '9') {
a='9';
} else {
background (0);
}
}