# Assigning an Image to a Keyrelease

**URL:** <https://discourse.processing.org/t/assigning-an-image-to-a-keyrelease/17167>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [January 18, 2020, 9:42pm UTC](https://discourse.processing.org/t/assigning-an-image-to-a-keyrelease/17167 "2020-01-18T21:42:22Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dubs](https://avatars.discourse-cdn.com/v4/letter/d/d6d6ee/32.png) [@Dubs](https://discourse.processing.org/u/Dubs)\
**Post date:** [January 18, 2020, 9:42pm UTC](https://discourse.processing.org/t/assigning-an-image-to-a-keyrelease/17167/1 "2020-01-18T21:42:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 18, 2020, 9:54pm UTC](https://discourse.processing.org/t/assigning-an-image-to-a-keyrelease/17167/2 "2020-01-18T21:54:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Dubs](https://avatars.discourse-cdn.com/v4/letter/d/d6d6ee/32.png) [@Dubs](https://discourse.processing.org/u/Dubs)\
**Post date:** [January 18, 2020, 10:24pm UTC](https://discourse.processing.org/t/assigning-an-image-to-a-keyrelease/17167/3 "2020-01-18T22:24:56Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 18, 2020, 10:29pm UTC](https://discourse.processing.org/t/assigning-an-image-to-a-keyrelease/17167/4 "2020-01-18T22:29:39Z")

</div>

Doesn’t matter really, use keyReleased then

Looking forward to seeing your code

---

<div class="post-metadata">

**Author:** ![Dubs](https://avatars.discourse-cdn.com/v4/letter/d/d6d6ee/32.png) [@Dubs](https://discourse.processing.org/u/Dubs)\
**Post date:** [January 18, 2020, 10:36pm UTC](https://discourse.processing.org/t/assigning-an-image-to-a-keyrelease/17167/5 "2020-01-18T22:36:13Z")

</div>

This is literally all I have so far. I understand practically nothing… I got an image to successfully load and thats about it

```auto
// 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;
   }
   
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 18, 2020, 10:39pm UTC](https://discourse.processing.org/t/assigning-an-image-to-a-keyrelease/17167/6 "2020-01-18T22:39:26Z")

</div>

Then for each key have a boolean variable that you set to true on key pressed

See reference for boolean

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 18, 2020, 10:43pm UTC](https://discourse.processing.org/t/assigning-an-image-to-a-keyrelease/17167/8 "2020-01-18T22:43:47Z")

</div>

> [@Dubs](#):
>
> how to import multiple images

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 18, 2020, 10:44pm UTC](https://discourse.processing.org/t/assigning-an-image-to-a-keyrelease/17167/9 "2020-01-18T22:44:57Z")

</div>

See this article

[https://processing.org/reference/boolean.html](https://processing.org/reference/boolean.html)

---

<div class="post-metadata">

**Author:** ![Dubs](https://avatars.discourse-cdn.com/v4/letter/d/d6d6ee/32.png) [@Dubs](https://discourse.processing.org/u/Dubs)\
**Post date:** [January 18, 2020, 10:48pm UTC](https://discourse.processing.org/t/assigning-an-image-to-a-keyrelease/17167/10 "2020-01-18T22:48:49Z")

</div>

Okay so for that I would assign this code to every number key needed? (10 in my case)

```auto
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);?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 18, 2020, 10:52pm UTC](https://discourse.processing.org/t/assigning-an-image-to-a-keyrelease/17167/11 "2020-01-18T22:52:29Z")

</div>

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!!!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 18, 2020, 10:53pm UTC](https://discourse.processing.org/t/assigning-an-image-to-a-keyrelease/17167/12 "2020-01-18T22:53:02Z")

</div>

Save the old sketch under a new name and play with it, understand it…

---

<div class="post-metadata">

**Author:** ![Dubs](https://avatars.discourse-cdn.com/v4/letter/d/d6d6ee/32.png) [@Dubs](https://discourse.processing.org/u/Dubs)\
**Post date:** [January 18, 2020, 11:04pm UTC](https://discourse.processing.org/t/assigning-an-image-to-a-keyrelease/17167/13 "2020-01-18T23:04:44Z")

</div>

```auto
// 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?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 18, 2020, 11:12pm UTC](https://discourse.processing.org/t/assigning-an-image-to-a-keyrelease/17167/15 "2020-01-18T23:12:33Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![Dubs](https://avatars.discourse-cdn.com/v4/letter/d/d6d6ee/32.png) [@Dubs](https://discourse.processing.org/u/Dubs)\
**Post date:** [January 19, 2020, 12:51am UTC](https://discourse.processing.org/t/assigning-an-image-to-a-keyrelease/17167/16 "2020-01-19T00:51:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Dubs](https://avatars.discourse-cdn.com/v4/letter/d/d6d6ee/32.png) [@Dubs](https://discourse.processing.org/u/Dubs)\
**Post date:** [January 19, 2020, 12:52am UTC](https://discourse.processing.org/t/assigning-an-image-to-a-keyrelease/17167/17 "2020-01-19T00:52:13Z")

</div>

```auto
// 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); 
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 19, 2020, 12:59am UTC](https://discourse.processing.org/t/assigning-an-image-to-a-keyrelease/17167/18 "2020-01-19T00:59:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 19, 2020, 1:02am UTC](https://discourse.processing.org/t/assigning-an-image-to-a-keyrelease/17167/19 "2020-01-19T01:02:27Z")

</div>

> [@Dubs](#):
>
> have a question regarding the true/false things I have set up under each key… do I have to type out each individual one

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

---

<div class="post-metadata">

**Author:** ![Dubs](https://avatars.discourse-cdn.com/v4/letter/d/d6d6ee/32.png) [@Dubs](https://discourse.processing.org/u/Dubs)\
**Post date:** [January 19, 2020, 1:02am UTC](https://discourse.processing.org/t/assigning-an-image-to-a-keyrelease/17167/20 "2020-01-19T01:02:50Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 19, 2020, 1:43am UTC](https://discourse.processing.org/t/assigning-an-image-to-a-keyrelease/17167/21 "2020-01-19T01:43:59Z")

</div>

please format your code posting here at forum  
( topic editor )  
by pasting it into the

```auto
</> 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 )

* * *

---

<div class="post-metadata">

**Author:** ![Dubs](https://avatars.discourse-cdn.com/v4/letter/d/d6d6ee/32.png) [@Dubs](https://discourse.processing.org/u/Dubs)\
**Post date:** [January 21, 2020, 6:50pm UTC](https://discourse.processing.org/t/assigning-an-image-to-a-keyrelease/17167/22 "2020-01-21T18:50:26Z")

</div>

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!

```auto
// 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); 
  }
}

```

[Next page](https://discourse.processing.org/t/assigning-an-image-to-a-keyrelease/17167.md?page=2)