Loading...
Logo
Processing Forum
Core Library Questions
cantona360
cantona360

Adding background image to existing code

in Core Library Questions  •  8 months ago  
Hello,
i am completely new to processing 

can someone please help me with this code ,

I want to add a background image to it, the background image would be placed in the processing folder/data




Copy code
  1. import processing.serial.*;
  2. import processing.opengl.*;

  4. Serial serial;
  5. int serialPort = 1; 
  6.               
  7. int sen = 3; 
  8. int div = 3;
  9. Normalize n[] = new Normalize[sen];
  10. MomentumAverage cama[] = new MomentumAverage[sen];
  11. MomentumAverage axyz[] = new MomentumAverage[sen];
  12. float[] nxyz = new float[sen];
  13. int[] ixyz = new int[sen];

  15. float w = 256; // board size
  16. boolean[] flip = {
  17.   false, true, false};

  19. int player = 0;
  20. boolean moves[][][][];

  22. PFont font;

  24. void setup() {
  25.   size(800, 600, P3D);
  26.   frameRate(25);
  27.   
  28.   font = loadFont("TrebuchetMS-Italic-20.vlw");
  29.   textFont(font);
  30.   textMode(SCREEN);
  31.   
  32.   println(Serial.list());
  33.   serial = new Serial(this, Serial.list()[serialPort], 115200);
  34.   
  35.   for(int i = 0; i < sen; i++) {
  36.     n[i] = new Normalize();
  37.     cama[i] = new MomentumAverage(.01);
  38.     axyz[i] = new MomentumAverage(.15);
  39.   }
  40.   
  41.   reset();
  42. }

  44. void draw() {
  45.   updateSerial();
  46.   drawBoard();
  47. }

  49. void updateSerial() {
  50.   String cur = serial.readStringUntil('\n');
  51.   if(cur != null) {
  52.     String[] parts = split(cur, " ");
  53.     if(parts.length == sen  ) {
  54.       float[] xyz = new float[sen];
  55.       for(int i = 0; i < sen; i++)
  56.         xyz[i] = float(parts[i]);
  57.   
  58.       if(mousePressed && mouseButton == LEFT)
  59.         for(int i = 0; i < sen; i++)
  60.           n[i].note(xyz[i]);
  
     .......... the code continues 





I check online for the syntax ,even though i found them i cant seem to incorporate it into the above code.
so can someone kindly modify the above code with the right parameters for adding a background image 

any form of help would be much appreciated 

Replies(8)

quarks
quarks

Re: Adding background image to existing code

8 months ago
Have you looked at background() this is probably the easiest way to do it especially since you are using a 3D renderer.
cantona360
cantona360

Re: Re: Adding background image to existing code

8 months ago 
i tried stuffs like 
               
Copy code
    
                
  1. PImage b;
    2. 
                
  2. void setup(){
    3. 
                
  3.  ...
    4. 
                
  4.  b = loadImage("fondo_fade.png");
    5. 
                
  5.  ...
    6. 
                
  6. }
    7. 
                
  7.  
    8. 
                
  8. void draw(){
    9. 
                
  9.  image(b, 0, 0); 
    10. 
                
  10.  ...
    11. 
                
  11. }
    12. 
               

               

                but i keep getting errors , like i said i am new to processing 
               

               

                could u be more specific
quarks
quarks

Re: Adding background image to existing code

8 months ago
Change draw() to

Copy code
  1. void draw(){
  2.       background(b);
  3.       // ...
  4. }

The only restriction is that the image MUST be the same size as the skecth canvas (as speciified in the size() method call)
cantona360
cantona360

Re: Re: Adding background image to existing code

8 months ago
I tried what you suggested but i got the error " it looks like you'r e mixing active with static modes" and the "background(b);" gets highlighted at line 51 .

i did resize the image to 800x600


Copy code
  2. import processing.serial.*;
  3. import processing.opengl.*;

  5. Serial serial;
  6. int serialPort = 1;   // << Set this to be the serial port of your Arduino - ie if you have 3 ports : COM1, COM2, COM3 
  7.                       // and your Arduino is on COM2 you should set this to '1' - since the array is 0 based
  8.               
  9. int sen = 3; // sensors
  10. int div = 3; // board sub divisions

  12. Normalize n[] = new Normalize[sen];
  13. MomentumAverage cama[] = new MomentumAverage[sen];
  14. MomentumAverage axyz[] = new MomentumAverage[sen];
  15. float[] nxyz = new float[sen];
  16. int[] ixyz = new int[sen];

  18. float w = 256; // board size
  19. boolean[] flip = {
  20.   false, true, false};

  22. int player = 0;
  23. boolean moves[][][][];

  25. PFont font;
  26. PImage b;
  27. void setup() {
  28.   size(800, 600, P3D);
  29.   frameRate(25);
  30.   b = loadImage("data/1.jpg");
  31.   font = loadFont("TrebuchetMS-Italic-20.vlw");
  32.   textFont(font);
  33.   textMode(SCREEN);
  34.   
  35.   println(Serial.list());
  36.   serial = new Serial(this, Serial.list()[serialPort], 115200);
  37.   
  38.   for(int i = 0; i < sen; i++) {
  39.     n[i] = new Normalize();
  40.     cama[i] = new MomentumAverage(.01);
  41.     axyz[i] = new MomentumAverage(.15);
  42.   }
  43.   
  44.   reset();
  45. }

  47. void draw() {
  48.   updateSerial();
  49.   drawBoard();
  50. }
  51. background(b);
  52. void updateSerial() {
  53.   String cur = serial.readStringUntil('\n');
  54.   if(cur != null) {
  55.     String[] parts = split(cur, " ");
  56.     if(parts.length == sen  ) {
  57.       float[] xyz = new float[sen];
  58.       for(int i = 0; i < sen; i++)
  59.         xyz[i] = float(parts[i]);
  60.   
  61.       if(mousePressed && mouseButton == LEFT)
  62.         for(int i = 0; i < sen; i++)
  63.           n[i].note(xyz[i]);
  64.   
  65.       nxyz = new float[sen];
  66.       for(int i = 0; i < sen; i++) {
  67.         float raw = n[i].choose(xyz[i]);
  68.         nxyz[i] = flip[i] ? 1 - raw : raw;
  69.         cama[i].note(nxyz[i]);
  70.         axyz[i].note(nxyz[i]);
  71.         ixyz[i] = getPosition(axyz[i].avg);
  72.       }
  73.     }
  74.   }
  75. }
  76. }
  77. float cutoff = .2;
  78. int getPosition(float x) {
  79.   if(div == 3) {
  80.     if(x < cutoff)
  81.       return 0;
  82.     if(x < 1 - cutoff)
  83.       return 1;
  84.     else
  85.       return 2;
  86.   } 
  87.   else {
  88.     return x == 1 ? div - 1 : (int) x * div;
  89.   }
  90. }

  92. void drawBoard() {
  93.   background(255);

  95.   float h = w / 2;
  96.   camera(
  97.     h + (cama[0].avg - cama[2].avg) * h,
  98.     h + (cama[1].avg - 1) * height / 2,
  99.     w * 2,
  100.     h, h, h,
  101.     0, 1, 0);

  103.   pushMatrix();
  104.   noStroke();
  105.   fill(0, 40);
  106.   translate(w/2, w/2, w/2);
  107.   rotateY(-HALF_PI/2);
  108.   box(w);
  109.   popMatrix();

  111.   float sw = w / div;
  112.   translate(h, sw / 2, 0);
  113.   rotateY(-HALF_PI/2);

  115.   pushMatrix();
  116.   float sd = sw * (div - 1);
  117.   translate(
  118.     axyz[0].avg * sd,
  119.     axyz[1].avg * sd,
  120.     axyz[2].avg * sd);
  121.   fill(255, 160, 0);
  122.   noStroke();
  123.   sphere(18);
  124.   popMatrix();

  126.   for(int z = 0; z < div; z++) {
  127.     for(int y = 0; y < div; y++) {
  128.       for(int x = 0; x < div; x++) {
  129.         pushMatrix();
  130.         translate(x * sw, y * sw, z * sw);

  132.         noStroke();
  133.         if(moves[0][x][y][z])
  134.           fill(255, 0, 0, 200);
  135.         else if(moves[1][x][y][z])
  136.           fill(0, 0, 255, 200);
  137.         else if(
  138.         x == ixyz[0] &&
  139.           y == ixyz[1] &&
  140.           z == ixyz[2])
  141.           if(player == 0)
  142.             fill(255, 0, 0, 200);
  143.           else
  144.             fill(0, 0, 255, 200);
  145.         else
  146.           fill(0, 100);
  147.         box(sw / 3);

  149.         popMatrix();
  150.       }
  151.     }
  152.   }
  153.   
  154.   fill(0);
  155.   if(mousePressed && mouseButton == LEFT)
  156.     msg("defining boundaries");
  157. }

  159. void keyPressed() {
  160.   if(key == TAB) {
  161.     moves[player][ixyz[0]][ixyz[1]][ixyz[2]] = true;
  162.     player = player == 0 ? 1 : 0;
  163.   }
  164. }

  166. void mousePressed() {
  167.   if(mouseButton == RIGHT)
  168.     reset();
  169. }

  171. void reset() {
  172.   moves = new boolean[2][div][div][div];
  173.   for(int i = 0; i < sen; i++) {
  174.     n[i].reset();
  175.     cama[i].reset();
  176.     axyz[i].reset();
  177.   }
  178. }

  180. void msg(String msg) {
  181.   text(msg, 10, height - 10);
  182. }
could you please help me out here ? 
I am new to these, we are using it for our semester project 
tfguy44
tfguy44

Re: Adding background image to existing code

8 months ago
Line 50 is the end of your draw() function. Your call to background() on line 51 is not inside any function!
You should replace line 93 with line 50, and then remove line 50.
GoToLoop
GoToLoop

Re: Adding background image to existing code

8 months ago
It seems @ line # 51 -> background(b);
it is outside of any function scope.

AFAIK, it shoulda been the 1st thing inside function draw()!

P.S.: In these posts:
http://forum.processing.org/topic/deleted-forum-processing-org-topic-traffic-light-functions-help
http://forum.processing.org/topic/animation-erasing-and-keeping-method

There are some tricks there to turn a loaded image scaled to canvas dimensions in setup(),
then, ready to be used for background() within draw()!

That would be useful if you hadn't pre-scaled your background image outside Processing.  
quarks
quarks

Re: Adding background image to existing code

8 months ago
In your code above line 51 is in the wrong place it should be in the draw() method so move it so it looks like this

Copy code
  1. void draw() {
  2.   background(b);
  3.   updateSerial();
  4.   drawBoard();
  5. }
Also you should remove the following line (93) from the drawBoard() method
  background(255);
since it will set the background to white, replacing your image.

cantona360
cantona360

Re: Re: Adding background image to existing code

8 months ago
Thanks guys !!!!!!! it worked 
Top Reply

Statistics

  • 8 Replies
  • 891  Views
  • 0 Followers

Actions

Related Posts