how to draw moved triangle?

Adam89z

Hello,

I am studying IT at an university in the Netherlands. We got an assignment in which we need to create a run. In this run there will be two to fourteen triangles competing each other. The goal of this game is that all the triangles will move separately by using the dice. However, they move all at the same time. The second issue is that once all the triangles passed the finish line, there should come up a box with the overal score (from first up to the last place).

Is there anyone who could help me with these two issues?

Please find below the codes.

Thanking you in advance.

int numberOfTriangles;
int margin;
float y = 0;
boolean startGame = false;


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


void draw() {


  background(0);
  if (startGame) {
    drawButton(" STOP", width-width/5, height/40, width/6, height/17);
    drawLines();
    printTexts();

    moveTriangles();
  } else {
    drawButton(" START", width-width/5, height/40, width/6, height/17);
    printTexts();
    drawLines();
    drawTriangles();
    drawSliderNumbers(width/4, height/40, width/12, height/60, 15);
   drawSliderMargin(width/20, height/40, width/12, height/60, width/3);
  }
}

void moveTriangles() {

  int p =width/120;

  float space = margin * (numberOfTriangles+1);   
  float sidesNumbers = width- space;
  float side = sidesNumbers /numberOfTriangles; 



  float x1=0;
  float x2=0;
  float x3=0;
  float y1 = height-height/20 -p;
  float y2 =height-height/20 -p;
  float y3 = height-height/20-p-side;

  float players[][] = {{x1, y1, x2, y2, x3, y3}, {x1, y1, x2, y2, x3, y3}, 
    {x1, y1, x2, y2, x3, y3}, {x1, y1, x2, y2, x3, y3}, {x1, y1, x2, y2, x3, y3}, 
    {x1, y1, x2, y2, x3, y3}, {x1, y1, x2, y2, x3, y3}, {x1, y1, x2, y2, x3, y3}, 
    {x1, y1, x2, y2, x3, y3}, {x1, y1, x2, y2, x3, y3}, {x1, y1, x2, y2, x3, y3}, 
    {x1, y1, x2, y2, x3, y3}, {x1, y1, x2, y2, x3, y3}, {x1, y1, x2, y2, x3, y3}, };

  int i = 0;
  while (i< numberOfTriangles) {
    players[i][0] =(side*i)+((i+1)*margin);
    players[i][2] = players[i][0] + side;
    players[i][4] = players[i][2] - (side/2);
    i++;
  }

  if (side<25 ||side>70) {

    fill(255);
    textSize(width/30);
    textAlign(CENTER, CENTER);
    text("game can't start with this margin", width/2, height/2);
  } else {
    i=0;
    while (i< numberOfTriangles) {
      fill(random(255), random(255), random(255));
      triangle(players[i][0], y1-y, players[i][2], y2-y, players[i][4], y3-y);
      fill(random(255), random(255), random(255));
      textAlign(CENTER, BOTTOM);
      text(i+1, players[i][4], y1-y);


      i++;
    }
    y++;

    y=constrain(y, 0, (height/1.33));
    println(mouseY);
  }
}

    void drawLines() {
      stroke(255, 0, 0);
      line(0, height/5, width, height/5);       //finish
      line(0, height - height/20, width, height - height/20);     //start
    }

    void printTexts() {
      theTexts("numberOfTriangles: " + numberOfTriangles, width/4, height/25);

      theTexts("margin : " + margin, width/20, height/25);
      theTexts("Finish Line", 0, height/5);
      theTexts("Start Line", 0, height - height/20);

    }

    String theTexts(String text, int x, int y) {
      fill(255);
      textSize(width/40);
      textAlign(LEFT, TOP);
      text(text, x, y);
      return text;
    }




    void drawButton(String notification,int x , int y, int Width , int Height) {


      fill (#00FF00);    
      rect(x, y, Width, Height);
      textSize(width/20);
      fill (0);        
      textAlign(CENTER, CENTER);
      text ( notification, width-width/8, height/20) ;
    }


    void mouseClicked() {
      int x = width-width/5;
      int y=height/40;
      int Width = width/6;
      int Height=height/17;

      if ( mouseX > x  && mouseX < x + Width
        && mouseY > y && mouseY< y + Height ) {
        startGame = ! startGame;
      }
    }

void drawTriangles() {
  int p =width/120;

  float space = margin * (numberOfTriangles+1);   //de lege afstand tussen de driehoeken
  float sidesNumbers = width- space;
  float side = sidesNumbers /numberOfTriangles; 

  float x1=0;
  float x2=0;
  float x3=0;
  float y1 = height-height/20 -p;
  float y2 =height-height/20 -p;
  float y3 = height-height/20-p-side;

  float players[][] = {{x1, y1, x2, y2, x3, y3}, {x1, y1, x2, y2, x3, y3}, 
    {x1, y1, x2, y2, x3, y3}, {x1, y1, x2, y2, x3, y3}, {x1, y1, x2, y2, x3, y3}, 
    {x1, y1, x2, y2, x3, y3}, {x1, y1, x2, y2, x3, y3}, {x1, y1, x2, y2, x3, y3}, 
    {x1, y1, x2, y2, x3, y3}, {x1, y1, x2, y2, x3, y3}, {x1, y1, x2, y2, x3, y3}, 
    {x1, y1, x2, y2, x3, y3}, {x1, y1, x2, y2, x3, y3}, {x1, y1, x2, y2, x3, y3}, };


  int i = 0;
  while (i< numberOfTriangles) {
    players[i][0] =(side*i)+((i+1)*margin);
    players[i][2] = players[i][0] + side;
    players[i][4] = players[i][2] - (side/2);
    i++;
  }

  if (side<25 ||side>60) {

    fill(255);
    textSize(width/30);
    textAlign(CENTER, CENTER);
    text("game can't start with this margin", width/2, height/2);
    // text("side = " +side, width/2, height/3);
  } else {
    i=0;
    while (i< numberOfTriangles) {
      fill(random(255), random(255), random(255));
      triangle(players[i][0], y1, players[i][2], y2, players[i][4], y3);
      fill(random(255), random(255), random(255));

      textAlign(CENTER, BOTTOM);
      text(i+1, players[i][4], y1);


      i++;
    }
  }
}

void drawSliderNumbers(float x, float y, float Width, float Height, int nPosition) {
  float cubeWidth= Width/nPosition;
  int position ;

  //println(floor((mouseX - x) / cubeWidth)); 

  if (mouseX>=x && mouseX< x + Width && mouseY>= y && mouseY<=y +Height) {
    position = floor(((mouseX -x) / cubeWidth));
    numberOfTriangles = position  ;
  } else {
    position  = numberOfTriangles ;
    numberOfTriangles =constrain(numberOfTriangles, 2, 14);
  }

  noStroke();
  fill(255);
  rect(x, y, Width, Height);

  fill(#2257F0);
  rect(x + position * cubeWidth, y, cubeWidth, Height);
}

void drawSliderMargin(float x, float y, float Width, float Height, int nPosition) {
  float cubeWidth= Width/nPosition;
  int position ;

  //println(floor((mouseX - x) / blokjeBreedte)); // we maken Nposities om te bepalen hoeveel rect we willen,ipv delen door een getaal hier

  if (mouseX>=x && mouseX< x + Width && mouseY>= y && mouseY<=y +Height ) {
    position = floor((mouseX - x) / cubeWidth);
    margin = position +2  ;
  } else {
    position = margin ;
    margin=constrain(margin, 2, width/3);
  }
  noStroke();
  fill(255);
  rect(x, y, Width, Height);
  fill(255, 0, 0);
  rect(x + position * cubeWidth, y, cubeWidth, Height);
}

koogs

Edit post, highlight code, press Ctrl-o to format.

Then, maybe, we'll be able to see what you're trying to do...

Adam89z

thank you, I have edit it :)

koogs

I have edit it

but it's only a bit. where is the setup(), where is the draw()?

what is marge? what is aantalrobots? what is spelers[]?

runnable examples will get you better answers.

jeremydouglass

22 different errors when you cut and paste into PDE.

oof.

koogs

Ok, all the code is there now, thanks. I've taken out the tabs - they just make it harder to cut and paste.

koogs

i'm not sure i understand what you're trying to do.

however, i can tell you things that look wrong.

line 50 float players[][] and line 153. why do you have two copies of the same thing? and they both have method scope so they don't exist outside of the method they are defined in. this means you can't remember where each triangle is because they keep getting recreated.

fill(random(255), random(255), random(255));

this gives the triangle a different colour EVERY FRAME. which is why they flickrer.

moveTriangles doesn't appear to move any triangles. i'd expect it to add values to the position variables... (on a per triangle basis, not the same increment to all)

Adam89z

(on a per triangle basis, not the same increment to all) ?? This is what i am trying to do. If I do it in this way (see codes below) then all the triangles will move together. However, I want that all the triangles will move separately. It is like a simulation of a run (triangles are the players). So each player needs to use the dice and the triangle which belongs to that player will make the steps.

y1+=2;
y3+=2;
y3+=2;

the Triangles will move all at the same time because I use one triangle command in for , I want that each triangle will move separately. for example a triangle move 2 pixels and the other one 5 pixels.

Secondly, I want that all the triangles will get a different colour each game. So the colours need to be given randomly to the triangles. Besides, I want that the triangles stop flickering. How can I fix that?

Thank you!

koogs

Look at classes, in the reference, Common Questions here and the tutorials on the processing site.

Basically everything that is different for each triangle needs to be a variable in your class, so position and colour in this case. Have an array (or ArrayList) of this class, make it global.

To move them just iterate through then adding a dice throw to each.

You CAN do all the above using separate arrays, given that you probably only need 2 (current score and colour), but a class is the proper way to do it. The important thing is that these arrays are global, defined before setup, initialised in setup and manipulated in draw.

koogs

(the other thing is that you don't need to store all the corners of each triangle - they never change shape so you only need to remember the centre. And then the x position is defined by how many triangles you have so you don't need to remember that. And the y position depends on the current score so you might as well just store the score instead. Score and colour, the only two things you need for each triangle.)

koogs

something like this

int count[];
color colours[];

void setup() {
  size(200, 200);
  init(10);
}

// reset all the triangles
void init(int n) {
  count = new int[n];
  colours = new color[n];
  for (int i = 0 ; i < n ; i++) {
    count[i] = 0;
    colours[i] = color(random(192, 256), random(192, 256), random(192, 256));
}

void draw() {
  background(0);
  moveTriangles();
  drawTriangles();
}

void moveTriangles() {
  // move each triangle in turn
  for (int i = 0 ; i < count.length ; i++) {
    count += random(whatever);
  }
}

void drawTriangles() {
  // draw all the triangles
  for (int i = 0 ; i < count.length ; i++) {
    int x = whatever;
    int y = something to do with count[i];
    triangle(x, y...);
  }
}

Adam89z

Thank you for your help it works now but I have another problem.

I want to see the order of which robot has arrived first to the finish line. I have this code and it works, it shows which robots has arrived first and then the order of the robots is not good anymore. This is my new code.

int numberOfTriangles=14;
int margin;
boolean startGame = false;
int breadth;
int highness ;
color[] colour = new color[numberOfTriangles]; 
int colourCount; 
int players[][] = new int [numberOfTriangles][6];



void setup() {
  background(0);
  size(600, 600);
  breadth=width;
  highness=height;
  giveColour(numberOfTriangles, colour);
  array1();
}



void draw() {
  background(0);



  if (startGame) {
    drawButton("  STOP ", breadth-breadth/5, highness/40, breadth/6, highness/17);
    drawLines();
    printTexts();

    moveTriangles( numberOfTriangles, players, margin, breadth, highness);
  } else {
    drawButton(" START", breadth-breadth/5, highness/40, breadth/6, highness/17);
    printTexts();
    drawLines();
    drawSliderNumbers(breadth/4, highness/40, breadth/12, highness/60, 15);
    drawSliderMargin(breadth/20, highness/40, breadth/12, highness/60, breadth/3);
    drawTriangles(numberOfTriangles, players, margin, breadth, highness);
  }
}

void moveTriangles(int numberOfTriangles, int players[][], int margin, int breadth, int highness) {

  int emptySpace = margin * (numberOfTriangles+1);   //de lege afstand tussen de driehoeken
  int totalSides = breadth- emptySpace;
  int side = totalSides /numberOfTriangles; 
  int spaceLinesRobots =breadth/120;

  int a = floor(random(1, 7));
  int b= floor(random(1, 7));




  int n = 1;
  for (int i=0; i<numberOfTriangles; i++) { // tekenen

    noStroke();
    fill(colour[colourCount]);
    triangle(players[i][0], players[i][1], players[i][2], players[i][3], players[i][4], players[i][5]);
    colourCount++;
    if (colourCount>numberOfTriangles-1)
      colourCount=0;

    textAlign(CENTER, BOTTOM);
    fill(255);
    text(i+1, players[i][4], players[i][1]);
    if (players[i][1]==highness/5-spaceLinesRobots)

      text("Robot" +(i+1) + "      " +n, breadth/2, highness/2 +(15*i));

    n++;
  }

  dice(a, b);






  stopMoving(side, spaceLinesRobots, players, numberOfTriangles);

  delay(300);
}


void drawLines() {
  stroke(255, 0, 0);
  line(0, highness/5, breadth, highness/5);       //finish
  line(0, highness - highness/20, breadth, highness - highness/20);     //start
}

void printTexts() {
  texts("Aantal Robots: " + numberOfTriangles, breadth/4, highness/25);

  texts("Marge : " + margin, breadth/20, highness/25);
  texts("Finish Line", 0, highness/5);
  texts("Start Line", 0, highness - highness/20);
}

String texts(String text, int x, int y) {
  fill(255);
  textSize(breadth/40);
  textAlign(LEFT, TOP);
  text(text, x, y);
  return text;
}




void drawButton(String notification, int x, int y, int breadthButton, int highnessButton) {


  fill (#00FF00);    // groen
  rect(x, y, breadthButton, highnessButton);
  textSize(breadth/20);
  fill (0);        // zwart
  textAlign(CENTER, CENTER);
  text ( notification, breadth-breadth/8, highness/20) ;
}


void mouseClicked() {
  int x = breadth-breadth/5;
  int y=highness/40;
  int breadthButton = highness/6;
  int highnessButton=highness/17;

  if ( mouseX > x  && mouseX < x + breadthButton
    && mouseY > y && mouseY< y + highnessButton ) {
    startGame = !startGame;
  }
}

color giveColour(int numberOfTriangles, color[] colour) {
  int i;
  for (i =0; i<numberOfTriangles; i++) {
    colour[i] = color(random(255), random(255), random(2, 255));
  }
  return colour[i-1];
}


int dice(int a, int b) {



  if (a==b)  // dobblestenen
    a=floor(random(1, 7));
  b= floor(random(1, 7));


  for (int t=0; t<numberOfTriangles; t++) {

    players[t][1]-=a+b;
    players[t][3]-=a+b;
    players[t][5]-=a+b;
    if (a==b) 
      a=floor(random(1, 7));
    b= floor(random(1, 7));
    //println(a, b);
  }
  return 0;
}


void stopMoving(int side, int spaceLinesRobots, int players[][], int numberOfTriangles) {

  for (int t=0; t<numberOfTriangles; t++) {
    players[t][1]=constrain(players[t][1], highness/5-spaceLinesRobots, highness - highness/20);
    players[t][3]=constrain(players[t][3], highness/5-spaceLinesRobots, highness - highness/20);
    players[t][5]=constrain(players[t][5], highness/5-spaceLinesRobots-side, highness - highness/20);
  }
}



void array1() {
  int emptySpace = margin * (numberOfTriangles+1);   //de lege afstand tussen de driehoeken
  int totalSides = breadth- emptySpace;
  int side = totalSides /numberOfTriangles; 
  int spaceLinesRobots =breadth/120;

  for (int i=0; i<numberOfTriangles; i++) {
    players[i][0] =(side*i)+((i+1)*margin);
    players[i][2] = players[i][0] + side;
    players[i][4] = players[i][2] - (side/2);
  }

  for (int i=0; i<numberOfTriangles; i++) {
    players[i][1] =highness-highness/20 -spaceLinesRobots;
    players[i][3] = players[i][1];
    players[i][5] = players[i][3]-side; 
    ;
  }
}


void drawSliderNumbers(float x, float y, float Width, float Height, int nPosition) {
  float cubeWidth= Width/nPosition;
  int position ;



  //println(floor((mouseX - x) / cubeWidth)); 


  if (mouseX>=x && mouseX< x + Width && mouseY>= y && mouseY<=y +Height) {
    position = floor(((mouseX -x) / cubeWidth));
    numberOfTriangles = position  ;
  } else {
    position  = numberOfTriangles ;
    numberOfTriangles =constrain(numberOfTriangles, 2, 14);
  }

  noStroke();
  fill(255);
  rect(x, y, Width, Height);

  fill(#2257F0);
  rect(x + position * cubeWidth, y, cubeWidth, Height);
}



void drawSliderMargin(float x, float y, float Width, float Height, int nPosition) {
  float cubeWidth= Width/nPosition;
  int position ;

  //println(floor((mouseX - x) / blokjeBreedte)); // we maken Nposities om te bepalen hoeveel rect we willen,ipv delen door een getaal hier

  if (mouseX>=x && mouseX< x + Width && mouseY>= y && mouseY<=y +Height ) {
    position = floor((mouseX - x) / cubeWidth);
    margin = position +2  ;
  } else {
    position = margin ;
    margin=constrain(margin, 2, width/3);
  }
  noStroke();
  fill(255);
  rect(x, y, Width, Height);
  fill(255, 0, 0);
  rect(x + position * cubeWidth, y, cubeWidth, Height);
}


void drawTriangles(int numberOfTriangles, int players[][], int margin, int breadth, int highness) {

  int space = margin * (numberOfTriangles+1);   //de lege afstand tussen de driehoeken
int  totalSides = breadth- space;
 int side = totalSides /numberOfTriangles;



  array1();


  if (side<25 ||side>70) {

    fill(255);
    textSize(totalSides/30);
    textAlign(CENTER, CENTER);
    text("Game kan niet gestart worden met deze marge", totalSides/2, highness/2);
  } else {
    for (int i=0; i<numberOfTriangles; i++) { // tekenen
      noStroke();
      fill(colour[colourCount]);

      triangle(players[i][0], players[i][1], players[i][2], players[i][3], players[i][4], players[i][5]);
      colourCount++;
      if (colourCount>numberOfTriangles-1)
        colourCount=0;
      textAlign(CENTER, BOTTOM);
      fill(255);
      text(i+1, players[i][4], players[i][1]);
    }
  }
}

Chrisir

your code is hard to read.

You realize that one Triangle should be in a class? Player and colours are parallel arrays.

Please read this:

https://forum.processing.org/two/discussion/8081/from-several-arrays-to-classes

width and height

You don't need this:

breadth=width; highness=height;

just stick with width and height

Highscore

you could fill an ArrayList with the winners using add

Adam89z

Thanks for your answer but I am not allowed to use class and ArrayList From my teacher. Do you have another way for this?

Thanks

Chrisir

An array for the winners?

Adam89z

Yes it's possible but how to add the values to this new array?

Chrisir

You could have 2 parallel arrays: names and scores

when one triangle crossed target line fill in both arrays using indexWinner

winnerNames[indexWinner] = ...; 
winnerScores[indexWinner] = ...; 

Then indexWinner++;

display both arrays from zero up to indexWinner with a for-loop

Adam89z

I have tried but it does not works with me. Can you please write the code for me ?

Thanks

Chrisir

are you kidding? Why? Do you know the metaphor of giving a man a fish and teach them how to fish?

Show your entire code that is your attempt at this highscore so that I can see you followed each of my steps please

Then I'll see what I can do

Adam89z

I made aan array of order,

    int order[] = new int [numberOfTriangles];
    int index = 0;


      for (int i=0; i<numberOfTriangles; i++) { // tekenen

        noStroke();
        fill(colour[colourCount]);
        triangle(players[i][0], players[i][1], players[i][2], players[i][3], players[i][4], players[i][5]);
        colourCount++;
        if (colourCount>numberOfTriangles-1)
          colourCount=0;

        textAlign(CENTER, BOTTOM);
        fill(255);
        text(i+1, players[i][4], players[i][1]);
        if (players[i][1]==highness/5-spaceLinesRobots)


    order[index] = i+1;
    text(" " + order, breadth/2, highness/2 +(15*i));
        index++;

Chrisir

go on.

Where do you use order?

This isn't your entire code.