# Changing the background for an image (related to the arduino logo example)

**URL:** <https://discourse.processing.org/t/changing-the-background-for-an-image-related-to-the-arduino-logo-example/9707>\
**Category:** Coding Questions\
**Created:** [March 28, 2019, 3:35am UTC](https://discourse.processing.org/t/changing-the-background-for-an-image-related-to-the-arduino-logo-example/9707 "2019-03-28T03:35:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ShermanM](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@ShermanM](https://discourse.processing.org/u/ShermanM)\
**Post date:** [March 28, 2019, 3:35am UTC](https://discourse.processing.org/t/changing-the-background-for-an-image-related-to-the-arduino-logo-example/9707/1 "2019-03-28T03:35:15Z")

</div>

For the life of my, I can’t sort out why this won’t work, despite looking at several examples and tutorials online that would suggest this should work. I am largely using the example from the Arduino projects book, chapter 14 on “changing the arduino logo” but I’ve removed the actual Arduino dependency to make it easy for someone to run and review. Any help would be appreciated!

* * *

```auto
//Creating an object for the image
PImage logo;
//Creating a variable to store the background colour
int bgcolor=0;
void setup(){
 //Setting the colour mode. In this case we're useing HSB(HueSaturationBrightness). The hue will change while turning the potentiometer.
 colorMode(HSB,255);
 //loading the image directly form the Internet
 logo=loadImage("http://arduino.cc/logo.png");
 // you can use "size(logo.width,logo.height)" to automatically adjust the scale
 //if you have problems, adjust it manually:
 size(170,120);
 
}

void draw(){

  for (int i = 0; i < 255; i = i+1) {
    bgcolor = i;
    //changing the image background
    background(bgcolor,255,255);
    //Displaying the image and starting drawing on top left (0.0)
    image(logo,0,0);
    delay(10);
  }
 println("looping again");
 delay(1000);
 
}

```

* * *

---

<div class="post-metadata">

**Author:** ![ShermanM](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@ShermanM](https://discourse.processing.org/u/ShermanM)\
**Post date:** [March 28, 2019, 3:36am UTC](https://discourse.processing.org/t/changing-the-background-for-an-image-related-to-the-arduino-logo-example/9707/2 "2019-03-28T03:36:49Z")

</div>

I should note it compiles and runs, but you do not see the background change at all. I am using a windows 7 laptop

---

<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:** [March 28, 2019, 4:08am UTC](https://discourse.processing.org/t/changing-the-background-for-an-image-related-to-the-arduino-logo-example/9707/3 "2019-03-28T04:08:10Z")

</div>

-a- your linked picture is good  
( transparent… )  
-b- it loads  
-c- your draw loop

- 
  - for color and

- 
  - using delay

not good style…

try:

```auto
PImage logo; //Creating an object for the image
int bgcolor=0; //Creating a variable to store the background colour

void setup() {
  size(170, 120);
  colorMode(HSB, 255);
  logo=loadImage("http://arduino.cc/logo.png");
  println("image loaded");
}

void draw() {
  bgcolor++;
  if (bgcolor > 255 ) bgcolor = 0;
  background(bgcolor, 255, 255);
  image(logo, 0, 0);
}

```

you want more show? click

> **here**
>
> ```auto
> PImage logo; //Creating an object for the image
> int bgcolor=0; //Creating a variable to store the background colour
> String mytext="0000000000000000000000000000";
> String file = "http://arduino.cc/logo.png";
> 
> void setup() {
> size(320, 240);
> background(255); // need some INTRO
> fill(0);
> textSize(12);
> text("wait until "+file+" loaded",20,height/2);
> colorMode(HSB, 255);
> logo=loadImage(file); // load from internet can take a few seconds
> frameRate(10); // here is our BEAT
> }
> 
> void myBackground() {
> bgcolor++; // here is our COLOR SHOW
> if (bgcolor > 255 ) bgcolor = 0;
> background(bgcolor, 255, 255);
> }
> 
> void myHeader() {
> textSize(18);
> String mytextnew = "";
> for ( int i=0;i<mytext.length();i++) {
> int bit = round(random(0,1.1)); // create a random 1 OR 0
> //println("i "+i+" bit "+bit);
> if ( random(0,1) > 0.2 ) mytextnew += mytext.charAt(i);
> else mytextnew += bit; // and use it with a chance of 20% 
> }
> mytext = mytextnew; // overwrite string
> text(mytext,1,15); // and show as headerline
> }
> 
> void draw() {
> myBackground();
> myHeader();
> image(logo, 30, 30, width-60, height-60); // center and scale it ( no problem as we are slow anyhow )
> }
> 
> ```