New to Processing

Programming Questions

derrickdm..

in Programming Questions • 1 years ago

int x,y;
int dx=1,dy=1;
int screenHeight=500;
int screenWidth=500;
int sz = 10;
int barX1=10, barY=screenHeight/2;
int barX2=50;
int score=0;

void setup(){
size(screenWidth,screenHeight);
fill(255);
stroke(255);
frameRate(100);
smooth();
x=int(random(0,screenWidth));
y=int(random(0,screenHeight));
}

void draw(){

background(0);
line(barX1,barY,barX2,barY);
ellipse(x,y,sz,sz);

//detect if ball hit left and right side
if(x<=sz/2 || x>=screenWidth-sz/2)
dx=-dx;

//detect if ball hit top and bottom
if(y<=sz/2 || y>=screenHeight-sz/2)
dy=-dy;

//detect if bar hits ball
if((y==barY-sz/2 || y==barY+sz/2 ) && (x>barX1 && x<barX2))
{
dx=-dx;
dy=-dy;
println(++score);
}

x+=dx;
y+=dy;
}

void keyPressed() {
if (key == CODED) {
if (keyCode == LEFT) {
barX1-=10;
barX2-=10;
} else if (keyCode == RIGHT) {
barX1+=10;
barX2+=10;
} else if (keyCode == UP) {
barY-=10;
} else if (keyCode == DOWN) {
barY+=10;
}
}
}

This is a sketch from my lecture on 'Motion'. We are given the additional task of modifying this set of code and transforming it into a 'Ping-Pong' game where the participation of another player is possible. However, I'm having some trouble interpreting this code, and so I've taken liberties to pose my questions to the web in hopes for guidance. Any form of help rendered will be appreciated.

Some questions I have pertaining to the aforementioned code:

Q1) Is screen.height the same as screenHeight? and additively, Is screen.width the same as screenWidth?

Q2) Why set the fill(255) in void(setup) only to set the background(0) in void(draw)?

Q3) //detect if ball hit left and right side
if(x<=sz/2 || x>=screenWidth-sz/2)
dx=-dx;

Why sz/2 of all values? ( I tried substituting this set of values with alternative values of "sz/3", "sz/4", "sz/30" and did not see any visible changes when running the programme.

I'm new to coding and programming and although technically I should be acquainted with the principles of "motion" at this point in time. Reality says otherwise. Any form of assistance will be deeply appreciated =).

On a sidenote, I'm also curious as to whether or not there are good practice habits or methodologies that should be adopted for beginners who are just starting out in programming.

I'm currently a student of the University of London International Programme in my first year of the Creative Computing Degree. Geographically I'm located in Singapore but spiritually I belong to the web. And if there's anyone out there, like me who is just starting out on Processing and is keen to engage in collaborative learning, feel free to add me on facebook =D.

Replies(5)

v.k.

Re: New to Processing

1 years ago

Q1) Is screen.height the same as screenHeight? and additively, Is screen.width the same as screenWidth?

No, screenHeight is a user created variable (u see, no color in the Processing) could be any word like ball or pet. screen.height is a constant (i think that's the correct name) that holds the monitor screen size to make a sketch full screen for instance. There is also width and height wich holds those values for the sketch window the one created at size();

Q2) Why set the fill(255) in void(setup) only to set the background(0) in void(draw)?

Made in setup runs once. Made in draw keep doing in a loop, try removing the one in draw to see. Also read the reference...

Q3) //detect if ball hit left and right side
if(x<=sz/2 || x>=screenWidth-sz/2)
dx=-dx;

Why sz/2 of all values? ( I tried substituting this set of values with alternative values of "sz/3", "sz/4", "sz/30" and did not see any visible changes when running the programme.

Testng the edges of the ball not its center. Take it off, the ball will bounce by it's center.

derrickdm..

Re: New to Processing

1 years ago

Hi v.k, thanks for engaging with my queries. Regarding the user created variable "screenHeight & screenWidth", I was confused because on the sketchbook, it shows up with colour, like: screenHeight. This colour I thought would be normally reserved for constants.

Regarding your second reply, I tried your suggestion and removed background(0) from void(draw). Indeed the results are interesting. Coupled with the description from the references, I think I have a better understanding as to why background(0) is applied in void(draw).

" Called directly after setup() and continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called. The draw() function is called automatically and should never be called explicitly. It should always be controlled with noLoop() , redraw() and loop() . After noLoop() stops the code in draw() from executing, redraw() causes the code inside draw() to execute once and loop() will causes the code inside draw() to execute continuously again. The number of times draw() executes in each second may be controlled with the delay() and frameRate() functions. There can only be one draw() function for each sketch and draw() must exist if you want the code to run continuously or to process events such as mousePressed() . Sometimes, you might have an empty call to draw() in your program as shown in the above example."

I still don't really get what you meant by "testing the edges of the ball, not its center." But no worries, I will be meeting my lecturer for a class in the afternoon and I'll be bringing these questions and your replies along as well. I think I might be a little thick and often times I have trouble visualising what the codes are trying to do.

yours respectfully,

derrick =D

v.k.

Re: New to Processing

1 years ago

U can call background() anywhere u like. The reason it's usually called at the beginning of draw is that this way it wil clear the screen for next draw() loop . This may be desired or may not. Also u can call fill() any where. It wil affect any thing drawn after it. like

fill(255,0,0); ///red

ellipse(x,y,sz,sz); ///a red circle

rect(x,y,sz,sz); /// a red square

fill(255); ///white

ellipse(x,y,sz,sz); /// an white circle

fill(0,10); /// transparent black - the second argument is the opacity 0 transp or 255 opaque

rect(0,0,width,height);

This is not code, but almost :-)

As for the ball test look at the pseudo code

draw a ball 20 pixels large with center at x and y

If x is bigger than screen reverse its movement in x axis

Then move the ball incrementing x, its center.

When the center of the ball hits the edge reverse the movement.

Well balls do not bounce by its center so u tell the program

When x plus half the ball's size (the edge of the ball) hits the edge of screen reverse movement.

Just make the ball bigger, let's say sz=100 pixels and remove the sz stuff , like this

if(x<=0 || x>=screenWidth)

dx=-dx;

and you will see

v.k.

Re: New to Processing

1 years ago

Here, a simple axample of clear or not the screen.

boolean clear = true;

int x;

void setup()

{

size(300,300);

stroke(0); // will see it only when not clear

background(0); //starts with a black screen

smooth();/// make nicer

}

void draw()

{

if (clear)

{

background(0);// only clear screen if clear is true

}

x=(x+4)%width; // lazy animation

ellipse(x,mouseY,20,20);// using the mouseY to draw at mouse position

}

void mousePressed()

{

clear = !clear; /// click any where to toogle clear. the form bolean = !boolean does that

}

also note that in this purpose background must be at the beginning of the draw. Try in the end and you will see, or should i say not see... The drawing only happens on the end of the draw...

derrickdm..

Re: New to Processing

1 years ago

Hi Vk, thanks again for breaking this problem down for me into sizeable portions for my thick noggin LOL, I really appreciate those sketch examples that you provided. Those illustrations provided me with a better understanding, I think I'm now better prepared to tackle this assignment. I'll post my sketches here when I'm done with them. Thanks again mate.

Cheers,

derrick

Top Reply