How would I make this checker pattern move left and right?

seth5110

I made a checker pattern with a while loop, and I want one set of loops to move 6px to the right and then back. I also have a second loop that I want to move 6px to the left and then back. I keep trying different things, but it keeps leaving a gap. The code I have so far is just the checker pattern, any help would be appreciated.

1. float g=0;
2. int g2=0;
3. int g3=0;
4. int g4=0;
5. float h=0;
6. int h2=0;
7. int h3=0;
8. int h4=0;
9. color c1=(#000000);
10. color c2=color(170,39,126);
11. color c3=color(27,136,132);
12. float n=0;
14. void setup()
15. {
16. size(800,800);
17. for(int i=0;i<height; i++)
18. {
19. color c=lerpColor(c1,c2,n);
20. stroke(c);
21. line(0,i,width,i);
22. n+=0.001;
23. }
25. }
26. void draw()
27. {
28. while(g<375){
29. checkers(g,h);
30. checkers(g-50,h+50);
31. checkers(g-100,h+100);
32. checkers(g-150,h+150);
33. checkers(g-200,h+200);
34. checkers(g-250,h+250);
35. checkers(g-300,h+300);
36. checkers(g-350,h+350);
37. g=g+50;
38. }
40. while(g2<350){
41. checkers(g2-25,h2+25);
42. checkers(g2-75,h2+75);
43. checkers(g2-125,h2+125);
44. checkers(g2-175,h2+175);
45. checkers(g2-225,h2+225);
46. checkers(g2-275,h2+275);
47. checkers(g2-325,h2+325);
48. g2=g2+50;
49. }
51. while(g3<850){
52. checkers(g3+400,h3+775);
53. checkers(g3+450,h3+725);
54. checkers(g3+500,h3+675);
55. checkers(g3+550,h3+625);
56. checkers(g3+600,h3+575);
57. checkers(g3+650,h3+525);
58. checkers(g3+700,h3+475);
59. checkers(g3+750,h3+425);
60. g3=g3+50;
61. }
63. while(g4<850){
64. checkers(g4+475,h4+750);
65. checkers(g4+525,h4+700);
66. checkers(g4+575,h4+650);
67. checkers(g4+625,h4+600);
68. checkers(g4+675,h4+550);
69. checkers(g4+725,h4+500);
70. checkers(g4+775,h4+450);
71. g4=g4+50;
72. }
73. }
74. void checkers(float g, float h)
75. {
76. noStroke();
77. fill(0);
78. rect(0+g,0+h,25,25);
79. fill(255);
80. rect(25+g,0+h,25,25);
81. }

Chrisir

I see two chess boards cut in half

You wrote:

one set of loops to move 6px to the right

Do you want to move the entire chess board? Or just one line / one pair?

And when do you want this to happen, when you press the mouse?

Chrisir

a general chess board is done like this. Your way is much to complicate

int cellSizeX = 25;
int cellSizeY = 25;

void setup() { 
  size(600, 600); 
  background(255);
  fill(0);
} // func

void draw() {
  background(255);

  for (int x = 0; x < 15; x++) { 
    for (int y = 0; y < 15; y++) {

      // if cell is true
      if ( isEven(x) && !isEven(y) ||
        !isEven(x) && isEven(y) )
        fill(255, 2, 2); // red
      else 
      fill(1, 2, 255);  // blue

      rect(x*cellSizeX, y*cellSizeY, 
        cellSizeX-1, cellSizeY-1);
      //
    } // for
  } // for
  //
} // func

boolean isEven(int n)
{
  return n%2 == 0;
}
// 

koogs

Your way is still too complicated 8)

Square colour can be calculated on the sum of x and y...

if ( isEven(x + y) ) {
  ...
}

seth5110

So essentially I want to set an idle animation that will move g and g3 to the right 6px and then move it back. Also idle, moving g2 and g4 to the left and move back. I pretty much want to do this.

Chrisir

so do you want the change instantaneously or animated from 0 to 6 ?

just add offsetX where appropriate

set the offsetX to 6. You can use function void mousePressed() and say

if(offsetX == 6) 
    offsetX  =0;
    else 
     offsetX  =6;

to toggle between two situations

seth5110

I guess animated, and I would like to have it do this without me having to interact (clicking, keys, ect.).

Chrisir

offsetX+=offsetXAdd; 

if(offsetX>=6)
     offsetXAdd=-1; 

if(offsetX<=-6)
     offsetXAdd=1; 

seth5110

Would offsetX be a float?

Chrisir

yes

seth5110

I am also a complete novice at code, and I have no clue where to place this to make it work. I also appreciate you working with me on this.

Chrisir

you need to add offsetX to the lines in the grid you want to move

seth5110

So if had this from the previous code

1. while(g<375){
2. checkers(g,h);
3. checkers(g-50,h+50);
4. checkers(g-100,h+100);
5. checkers(g-150,h+150);
6. checkers(g-200,h+200);
7. checkers(g-250,h+250);
8. checkers(g-300,h+300);
9. checkers(g-350,h+350);
10. g=g+50;
11. }

Would I add the whole thing, part of it before the while, after the while, or after the whole thing. Sorry, I tried several ways, and it doesn't move.

1. offsetX+=offsetXAdd;
3. if(offsetX>=6)
4. offsetXAdd=-1;
6. if(offsetX<=-6)
7. offsetXAdd=1;

jeremydouglass

It can really help conceptually do understand that you are trying to do a single bouncing ball, learn how to do that, then apply it to a bunch of objects so that they all bounce in the same way at the same time.

/**
 * SimpleBounce
 * Bounce a shape back and forth along a flat line
 * 2017-10-15 Jeremy Douglass - Processing 3.3.6
 * based on processing.org/examples/bounce.html
 * see forum.processing.org/two/discussion/24554/how-would-i-make-this-checker-pattern-move-left-and-right
 */
float xstart;         // starting position of shape    
int   xmax = 12;      // maximum distance from starting position
float xpos;           // current position of shape    
float xspeed = 1;     // speed of shape
int   xdirection = 1; // currently moving left or right

void setup() {
  size(200, 200);
  frameRate(30);
  rectMode(CENTER);
  // Set the starting position and current position of the shape
  xstart = width/2;
  xpos = xstart;
}

void draw() {
  background(192);
  // Update the position of the shape
  xpos = xpos + ( xspeed * xdirection );
  // Test to see if the shape exceeds the boundaries
  if (xpos > xstart + xmax || xpos < xstart - xmax) {
    // If it does, reverse its direction by multiplying by -1
    xdirection *= -1;
  }

  // Draw the shape at its current position
  rect(xpos, height/2, 50, 50);
}

Chrisir

I agree with jeremy.

also, in this section you want checkers(g+offsetX,h);