Adding background image to existing code

Core Library Questions

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

import processing.serial.*;
import processing.opengl.*;
Serial serial;
int serialPort = 1;
int sen = 3;
int div = 3;
Normalize n[] = new Normalize[sen];
MomentumAverage cama[] = new MomentumAverage[sen];
MomentumAverage axyz[] = new MomentumAverage[sen];
float[] nxyz = new float[sen];
int[] ixyz = new int[sen];
float w = 256; // board size
boolean[] flip = {
false, true, false};
int player = 0;
boolean moves[][][][];
PFont font;
void setup() {
size(800, 600, P3D);
frameRate(25);
font = loadFont("TrebuchetMS-Italic-20.vlw");
textFont(font);
textMode(SCREEN);
println(Serial.list());
serial = new Serial(this, Serial.list()[serialPort], 115200);
for(int i = 0; i < sen; i++) {
n[i] = new Normalize();
cama[i] = new MomentumAverage(.01);
axyz[i] = new MomentumAverage(.15);
}
reset();
}
void draw() {
updateSerial();
drawBoard();
}
void updateSerial() {
String cur = serial.readStringUntil('\n');
if(cur != null) {
String[] parts = split(cur, " ");
if(parts.length == sen ) {
float[] xyz = new float[sen];
for(int i = 0; i < sen; i++)
xyz[i] = float(parts[i]);
if(mousePressed && mouseButton == LEFT)
for(int i = 0; i < sen; i++)
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

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

Re: Re: Adding background image to existing code

8 months ago

i tried stuffs like

               
                PImage b;
                void setup(){
                 ...
                 b = loadImage("fondo_fade.png");
                 ...
                }
                 
                void draw(){
                 image(b, 0, 0); 
                 ...
                }
               
               
                but i keep getting errors , like i said i am new to processing 
               
               
                could u be more specific

quarks

Re: Adding background image to existing code

8 months ago

Change draw() to

void draw(){
background(b);
// ...
}

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

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

import processing.serial.*;
import processing.opengl.*;
Serial serial;
int serialPort = 1; // << Set this to be the serial port of your Arduino - ie if you have 3 ports : COM1, COM2, COM3
// and your Arduino is on COM2 you should set this to '1' - since the array is 0 based
int sen = 3; // sensors
int div = 3; // board sub divisions
Normalize n[] = new Normalize[sen];
MomentumAverage cama[] = new MomentumAverage[sen];
MomentumAverage axyz[] = new MomentumAverage[sen];
float[] nxyz = new float[sen];
int[] ixyz = new int[sen];
float w = 256; // board size
boolean[] flip = {
false, true, false};
int player = 0;
boolean moves[][][][];
PFont font;
PImage b;
void setup() {
size(800, 600, P3D);
frameRate(25);
b = loadImage("data/1.jpg");
font = loadFont("TrebuchetMS-Italic-20.vlw");
textFont(font);
textMode(SCREEN);
println(Serial.list());
serial = new Serial(this, Serial.list()[serialPort], 115200);
for(int i = 0; i < sen; i++) {
n[i] = new Normalize();
cama[i] = new MomentumAverage(.01);
axyz[i] = new MomentumAverage(.15);
}
reset();
}
void draw() {
updateSerial();
drawBoard();
}
background(b);
void updateSerial() {
String cur = serial.readStringUntil('\n');
if(cur != null) {
String[] parts = split(cur, " ");
if(parts.length == sen ) {
float[] xyz = new float[sen];
for(int i = 0; i < sen; i++)
xyz[i] = float(parts[i]);
if(mousePressed && mouseButton == LEFT)
for(int i = 0; i < sen; i++)
n[i].note(xyz[i]);
nxyz = new float[sen];
for(int i = 0; i < sen; i++) {
float raw = n[i].choose(xyz[i]);
nxyz[i] = flip[i] ? 1 - raw : raw;
cama[i].note(nxyz[i]);
axyz[i].note(nxyz[i]);
ixyz[i] = getPosition(axyz[i].avg);
}
}
}
}
}
float cutoff = .2;
int getPosition(float x) {
if(div == 3) {
if(x < cutoff)
return 0;
if(x < 1 - cutoff)
return 1;
else
return 2;
}
else {
return x == 1 ? div - 1 : (int) x * div;
}
}
void drawBoard() {
background(255);
float h = w / 2;
camera(
h + (cama[0].avg - cama[2].avg) * h,
h + (cama[1].avg - 1) * height / 2,
w * 2,
h, h, h,
0, 1, 0);
pushMatrix();
noStroke();
fill(0, 40);
translate(w/2, w/2, w/2);
rotateY(-HALF_PI/2);
box(w);
popMatrix();
float sw = w / div;
translate(h, sw / 2, 0);
rotateY(-HALF_PI/2);
pushMatrix();
float sd = sw * (div - 1);
translate(
axyz[0].avg * sd,
axyz[1].avg * sd,
axyz[2].avg * sd);
fill(255, 160, 0);
noStroke();
sphere(18);
popMatrix();
for(int z = 0; z < div; z++) {
for(int y = 0; y < div; y++) {
for(int x = 0; x < div; x++) {
pushMatrix();
translate(x * sw, y * sw, z * sw);
noStroke();
if(moves[0][x][y][z])
fill(255, 0, 0, 200);
else if(moves[1][x][y][z])
fill(0, 0, 255, 200);
else if(
x == ixyz[0] &&
y == ixyz[1] &&
z == ixyz[2])
if(player == 0)
fill(255, 0, 0, 200);
else
fill(0, 0, 255, 200);
else
fill(0, 100);
box(sw / 3);
popMatrix();
}
}
}
fill(0);
if(mousePressed && mouseButton == LEFT)
msg("defining boundaries");
}
void keyPressed() {
if(key == TAB) {
moves[player][ixyz[0]][ixyz[1]][ixyz[2]] = true;
player = player == 0 ? 1 : 0;
}
}
void mousePressed() {
if(mouseButton == RIGHT)
reset();
}
void reset() {
moves = new boolean[2][div][div][div];
for(int i = 0; i < sen; i++) {
n[i].reset();
cama[i].reset();
axyz[i].reset();
}
}
void msg(String msg) {
text(msg, 10, height - 10);
}

could you please help me out here ?

I am new to these, we are using it for our semester project

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

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

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

void draw() {
background(b);
updateSerial();
drawBoard();
}

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

Re: Re: Adding background image to existing code

8 months ago

Thanks guys !!!!!!! it worked

Top Reply