Loading...
Logo
Processing Forum
Hello! I'm really, really new to Processing and for my games programming class we've been enlisted to create a 'bouncing puck' type code that'll see the puck bounce off four walls and change colour when coming into contact with each one, then return to white when it's in the middle, change colour when it hits another and so on. So far I've got a moving puck and a layout- but I can't seem to get the colour to change no matter how much I fiddle with the code, and I've also ran into an issue regarding my boundaries- on two off the walls (the bottom and right wall) the puck will 'bounce off' rather then going into the walls like it does on the top one and the left. I was wondering if anyone knew how I could fix it so the puck would bounce off all the walls rather then two?

We were given some codes that were meant to help us, but no matter what I do it doesn't seem to want to work.

My code currently looks like this;

//ints!
int posX, posY, rad;
int lineX;

//colours!
color lightgrey = color(245, 245, 245);
color midgrey = color(175, 175, 175);
color white = color(255);
color yellow = color(252, 255, 183);
color pink = color(255, 193, 193);
color bblue = color(222, 241, 255);
color ggreen = color(222, 255, 227);

//floats!
float halfY = height/2;
float halfX = width/2;
float wholeX = width;
float wholeY = height;
float xspeed = 2;
float yspeed = 2;
float x = width*0.5;
float y = height/2.666;
float x1 = 1;
float y1 = 1;
float r = height*0.8;
float quartY = height/4;
float quartY2 = height/1.333;
float circx = width*0.1666;
float rect1 = width*0.9333;
float rect2 = height*0.05;
float rect3 = height*0.95;



void setup ()
{
  println ("s2893849");
  println ("Tori Maslen"); 

  smooth();

  size(300, 400);

  //declaring
  posX = 0;
  posY = height/2;
  rad = 10;
  xspeed = 2.2;
  yspeed = 1.5;
  r = height*0.09;
  wholeX = width;
  wholeY = height;
  halfY = height/2;
  halfX = width/2;
  x = width*0.5;
  y = height/2.666;
  x1 = 1;
  y1 = 1;
  quartY = height/4;
  quartY2 = height/1.333;
  circx = width*0.1666;
  rect1 = width*0.9333;
  rect2 = height*0.05;
  rect3 = height*0.95;
}

void draw()
{
  //background setup
  background(white);
  strokeWeight(4);
  stroke(midgrey);
  //find the middle.
  //line (X, posY, wholeX, posY);
  //netball court segments.
  line (X, quartY, wholeX, quartY);
  line (X, quartY2, wholeX, quartY2);
  //println(quartY2);
  fill(lightgrey);

  //centre circle.
  ellipse(halfX, halfY, circx, circx);
  //shooters circles.
  ellipse(halfX, Y, circx*2, circx*2);
  ellipse(halfX, wholeY, circx*2, circx*2);

  //borders.
    strokeWeight(4);
    fill(yellow);
    rect(x1, y1, rect2, wholeY);
    fill(pink);
    rect(rect1, y1, rect2, wholeY);
    fill(bblue);
    rect(x1, rect3, wholeX, rect2);
    fill(ggreen);
    rect(x1, y1, wholeX, rect2);



  x = x + xspeed;
  y = y + yspeed;

  if ((x > 260) || (x < 0))
  {

    xspeed = xspeed * -1;
  }


  if ((y > 360) || (y < 0))
  {

 
    yspeed = yspeed * -1;
  }
 
  //setting up the 'puck'.
  stroke(midgrey);
  strokeWeight(4);
  fill(lightgrey);
 

    
  if  (y >= 100 || y1 < 400)
     {
    fill (45);
     }

  else if (posY<60)
    {
    fill(pink); //green
    }

    else if (posY > 70)
    {
      fill(0, 0, 255); //blue
    }
  else
  {
    fill (255); //white
  }

  ellipse(x, y, r, r);

  posX++;;

  if (posX > width)
  {
    posX = 0;
  }
}









Replies(10)

It's useless using Processing's variables width & height before setup()! Both are zero!

What is the relation between x & y w/ posX & posY?
posY = height/2 and never changes!
And posX just increases by 1 until width. But it is never used for anything else!  

You should have a clear definition on which role each variable does in your program.
Otherwise, it's hard to decypher and fix your code!  
I'm sorry for all the mess, haha!

Basically all the variables were created in a rush to place everything- I didn't really think when making them, as sad as that sounds! It's my third class of doing this type of thing, and I just can't seem to get the knack of it. One of the girls in my class has been telling me if I can find where I want to place stuff with hardcodes, I can then use those to create the variables by going  xxx divided by width or height, so I've just been doing that to create the variables. 

With x and y in relation to posX and posY, I was having issues down the bottom of the code with "ellipse(x, y, r, r);" because of the ..I guess we can call it a 'trick' the girl taught me, when I wanted to use the values of posY (which I now see I also have as halfY, whoops!) things just started getting messy and I started to freak out a little.
What a mess! I ran your code through the washer:

Copy code
  1. // Variables
  2. float px, py, vx, vy, r=18; // Puck's position, velocity, and radius
  3. color c; // Puck's color
  4. int bar=16; // Thickness of side bars

  5. void setup ()
  6. {
  7.   // Always put size() first
  8.   size(300, 400);
  9.   // I assume this is left in as some sort of assignment requirement
  10.   println ("s2893849");
  11.   println ("Tori Maslen");  

  12.   // Initial position, velocity, and color of the puck
  13.   px = width/2;
  14.   py = height/2;
  15.   vx = 2.2;
  16.   vy = 1.5;
  17.   c = color(245);

  18.   // Static drawing settings
  19.   smooth();
  20.   strokeWeight(4);
  21.   stroke(175);
  22.   ellipseMode(CENTER);
  23. }

  24. void draw()
  25. {
  26.   background(255);
  27.   // Lines
  28.   line (0, height/4, width, height/4);
  29.   line (0, 3*height/4, width, 3*height/4);
  30.   fill(245);
  31.   // Centre circle
  32.   ellipse(width/2, height/2, width/6, width/6);
  33.   // Shooters circles
  34.   ellipse(width/2, 0, width/3, width/3);
  35.   ellipse(width/2, height, width/3, width/3);
  36.   // Borders
  37.   fill(252, 255, 183); // Yellow - left
  38.   rect(0, 0, bar, height);
  39.   fill(255, 193, 193); // Pink - right
  40.   rect(width-bar, 0, bar, height);
  41.   fill(222, 241, 255); // Blue - bottom
  42.   rect(0, height-bar, width, bar);
  43.   fill(222, 255, 227); // Green - top
  44.   rect(0, 0, width, bar);
  45.   // Move puck
  46.   vx*=(px>width-bar-r||px<bar+r)?-1:1;
  47.   vy*=(py>height-bar-r||py<bar+r)?-1:1;
  48.   px+=vx;
  49.   py+=vy;
  50.   // Determine puck color
  51.   if (px>width-bar-r) {
  52.     c=color(255, 193, 193);
  53.   }
  54.   if (px<bar+r) {
  55.     c=color(252, 255, 183);
  56.   }
  57.   if (py>height-bar-r) {
  58.     c=color(222, 241, 255);
  59.   }
  60.   if (py<bar+r) {
  61.     c=color(222, 255, 227);
  62.   }
  63. //  if (py>height/4&&py<3*height/4) { 
  64. //    c=color(245);
  65. //  }
  66.   // Draw puck
  67.   fill(c);
  68.   ellipse(px, py, 2*r, 2*r);
  69. }
Oh, thank you so much for your help!

You're right- it is as part of an assignment. It's not due in until next Monday, but unfortunately for me this is only part one. I've emailed my lecturer for help because I just can't seem to pick up on how to implement what we learn into the codes- which I guess is a fault on my behalf, but I was starting to freak out when I didn't get a reply so this was my next option.

Yours definitely does look much neater though! I think it may be a little too clear cut for a girl who's known to be a bit hopeless at this though and only three lessons in, haha! (Which is probably obvious by the messy state of my code, haha!) but this is wonderful- really, thank you so much!
I've liked a lot your ternary expression condition using ||, tfguy44
Here's an even more compact version:  

// Move puck
px += vx *= px > width - bar-r | px < bar+r ? -1:1;
py += vy *= py > height - bar-r | py < bar+r ? -1:1;


Oh now that's just confusing. 
sorry to be a bother- with the lines-

  vx*=(px>width-bar-r||px<bar+r)?-1:1;
  vy*=(py>height-bar-r||py<bar+r)?-1:1;


are they the only way that I would be able to contain the 'puck' within the space? From what processing is telling me when I go to modify that line- it's referring to it as a boolean. After looking up in the reference, I can sadly say we definitely haven't covered that in class yet!

Once again, a big thank you for your help!
Copy code
  1. vx*=(px>width-bar-r||px<bar+r)?-1:1;
Is the same as:
Copy code
  1. if( px > width - bar - r || px < bar + r ){
  2.   vx = vx * -1;
  3. } else {
  4.   vx = vx * 1;
  5. }
Which does the same thing as:
Copy code
  1. if( px > width - bar - r || px < bar + r ){
  2.   vx = vx * -1;
  3. }
Which means:
Copy code
  1. if( px > width - bar - r){ // If the puck is close enough (px) to the right side of the screen (width) so that the radius of the puck (r) touches a point that is the width of the bar (bar) away from the left edge of the screen...
  2.   vx = vx * -1; // Change the direction (vx) the puck is moving.
  3. }
  4. if( px < bar + r ){ // if the puck is close enough (px) to the left side of the screen (0) so that the radius of the puck (r) touches a point that is the width of the bar (bar) away from the right edge of the screen...
  5.   vx = vx * -1; // Change the direction (vx) the puck is moving.
  6. }
It's just shorthand.
Thank you so much for all of your help! You're a life saver!
Whew! thank you so much for. Confusing but really helpful! Kudos!


__________________________________________________________________