# Need a review to improve this :)

**URL:** <https://discourse.processing.org/t/need-a-review-to-improve-this/26630>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [December 30, 2020, 11:38pm UTC](https://discourse.processing.org/t/need-a-review-to-improve-this/26630 "2020-12-30T23:38:11Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![jeanphih](https://avatars.discourse-cdn.com/v4/letter/j/e9c0ed/32.png) [@jeanphih](https://discourse.processing.org/u/jeanphih)\
**Post date:** [December 30, 2020, 11:38pm UTC](https://discourse.processing.org/t/need-a-review-to-improve-this/26630/1 "2020-12-30T23:38:11Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

Hello,  
I need some help, i have done this job , could you tell me how i can make my code better ?

Here is the code, it s juste some tips to improve my work 🙂 What would you change ? How could you get the code more readable ?

Thanks a lot for help ! 🙂

```auto

float fwidth = 1254/10;
float fheight = 862/10;
float zoom = 1;
int mouseTransX = 0;
int mouseTransY = 0;
boolean hoverSlider = false;

/* Tableaux avec les coordonnées des checkpoints et des routes */
float [][] checkpointcoord = {
  // 1 Basilica S Pietro 2 Castle Sant Angelo 3 Pantheon 4 Quirinale 5 Piazza della repubblica 6 Arco Di Tito 7 Collosseo 8 Isola Tiberina  
  {fwidth*1.55, fwidth*2.75, fwidth*4.42, fwidth*5.7, fwidth*7.46, fwidth*6.06, fwidth*6.7, fwidth*4.47}, 
  {fheight*3.9, fheight*3.9, fheight*4.99, fheight*4.35, fheight*3.82, fheight*6.84, fheight*7.66, fheight*7.89}, 
};
float [][] roadcoord = {
  { fwidth*1.55, fwidth*2.75, fwidth*2.79, fwidth*3.93, fwidth*3.93, fwidth*4.43, fwidth*4.43, fwidth*4.82, fwidth*4.9, fwidth*5.7, fwidth*6.06, fwidth*6.38, fwidth*7.02, fwidth*7.46, fwidth*7.71, fwidth*7.27, fwidth*7.63, fwidth*7.02, fwidth*6.06, fwidth*6.66, fwidth*6.70, fwidth*6.42, fwidth*5.02, fwidth*4.92, fwidth*4.59, fwidth*4.47, fwidth*4.15, fwidth*3.83, fwidth*3.43, fwidth*2.63, fwidth*1.83, fwidth*1.69
  }, 
  { fheight*3.9, fheight*3.9, fheight*4.52, fheight*4.56, fheight*4.85, fheight*4.84, fheight*4.99, fheight*4.99, fheight*4.76, fheight*4.35, fheight*3.94, fheight*3.83, fheight*4.52, fheight*3.82, fheight*4.24, fheight*4.8, fheight*5.2, fheight*6.38, fheight*6.84, fheight*7.40, fheight*7.66, fheight*9.37, fheight*7.95, fheight*8.06, fheight*8.06, fheight*7.89, fheight*7.71, fheight*7.66, fheight*7.31, fheight*6.07, fheight*4.17, fheight*4.17
  }, 

  { fwidth*2.75, fwidth*2.79, fwidth*3.93, fwidth*3.93, fwidth*4.43, fwidth*4.42, fwidth*4.82, fwidth*4.9, fwidth*5.7, fwidth*6.06, fwidth*6.38, fwidth*7.02, fwidth*7.46, fwidth*7.71, fwidth*7.27, fwidth*7.63, fwidth*7.02, fwidth*6.06, fwidth*6.66, fwidth*6.7, fwidth*6.42, fwidth*5.02, fwidth*4.92, fwidth*4.59, fwidth*4.47, fwidth*4.15, fwidth*3.83, fwidth*3.43, fwidth*2.63, fwidth*1.83, fwidth*1.69, fwidth*1.55
  }, 
  { fheight*3.9, fheight*4.52, fheight*4.56, fheight*4.85, fheight*4.84, fheight*4.99, fheight*4.99, fheight*4.76, fheight*4.35, fheight*3.94, fheight*3.83, fheight*4.52, fheight*3.82, fheight*4.24, fheight*4.8, fheight*5.2, fheight*6.38, fheight*6.84, fheight*7.4, fheight*7.66, fheight*9.37, fheight*7.95, fheight*8.06, fheight*8.06, fheight*7.89, fheight*7.71, fheight*7.66, fheight*7.31, fheight*6.07, fheight*4.17, fheight*4.17, fheight*3.90
  }, 
};
Checkpoint [] allCheckpoint = new Checkpoint[checkpointcoord[0].length];
Road [] allRoad = new Road[roadcoord[0].length];
Slider slider1 = new Slider();

void setup() {
  size(1254, 862);
  strokeWeight(2);
  textSize(24);
  for (int i = 0; i < allCheckpoint.length; i++) {
    allCheckpoint[i] = new Checkpoint(checkpointcoord[0][i], checkpointcoord[1][i]);
  }
  for (int i = 0; i < allRoad.length; i++) {
    allRoad[i] = new Road(roadcoord[0][i], roadcoord[1][i], roadcoord[2][i], roadcoord[3][i]);
  }
}
void draw () {
  clear();
  scale(slider1.valueZoom());
  translate(mouseTransX, mouseTransY);
  
  image(loadImage("roma.jpg"), 0, 0, width, height);
  stroke(255, 0, 0);
  fill(255, 0, 0);
  for (int i = 0; i < allRoad.length; i++) {
    allRoad[i].affichage();
  }
  for (int i = 0; i < allCheckpoint.length; i++) {
    allCheckpoint[i].affichage();
    allCheckpoint[i].popup(slider1.valueZoom());
  }
  if (frameCount%40 >=39) {
    for (int i = 0; i < allCheckpoint.length; i++) {
      allCheckpoint[i].Tourist();
    }
  }
  slider1.affichage();
  fill(0);
  text(frameCount, 100, 150);
}

void mouseDragged() {
  if (hoverSlider == false ) {
    if (pmouseX < mouseX ) {
      mouseTransX += 1;
    }
    if (pmouseX > mouseX) {
      mouseTransX += -1;
      ;
    }
    if (pmouseY < mouseY) {
      mouseTransY +=1;
    }
    if (pmouseY > mouseY) {
      mouseTransY += -1;
    }
  }
}

/* Classe pour les checkpoints du bus ( maximum de touristes par arrêt/ Touristes actuels/ Toutistes qui descendent / Touristes qui montent/ Densité de touriste par arrêt)*/
class Checkpoint {
  float x, y, size;
  int maximum_de_touriste, touriste_courant, touriste_montant, touriste_descendant, densite_touriste;
  Checkpoint(float posX, float posY) {
    x = posX;
    y = posY;
    size = 40;
    maximum_de_touriste = 100; /* Maximum de touristes */
    touriste_courant = round(random(10, maximum_de_touriste)); /* Nombre courant de touristes */
    touriste_montant = round(random(10, maximum_de_touriste/2)); /* Nombre de touristes montant */
    touriste_descendant = round(random(10, maximum_de_touriste/2)); /* Nombre de touristes descendant */
    densite_touriste = round(map(touriste_courant, 0, maximum_de_touriste, 0, 100)); /* Densité de touriste */
  }
  /* Méthode pour afficher le point d'arrêt sur la carte selon la densité des touristes avec code couleur */
  void affichage() {
    noStroke();
    if (densite_touriste < 30 ) {
      fill(0, 255, 0, 180);
    } else if (densite_touriste >= 30 && densite_touriste < 70) {
      fill(255, 255, 0, 180);
    } else {
      fill(255, 0, 0, 180);
    }
    ellipse(x, y, densite_touriste, densite_touriste);
  }

  /* Méthode de mise à jour du nombre de touristes au point d'arrêt */
  void Tourist() {
    if (touriste_courant > 100 || touriste_courant <= 0) {
      touriste_courant = round(random(10, 100));
    } else {
      touriste_courant += -touriste_montant + touriste_descendant;
    }
    touriste_descendant = round(random(10, maximum_de_touriste/2));
    touriste_montant = round(random(10, maximum_de_touriste/2));
    densite_touriste = round(map(touriste_courant, 0, maximum_de_touriste, 0, 100));
  }

  /* Classe pour les tronçons */

  void popup (float value) {
    if (dist((x + mouseTransX)*value, (y + mouseTransY)*value, mouseX, mouseY)<100) {
      if (mousePressed) {
        rectMode(CENTER);
        fill(255, 255, 255, 180);
        rect(x + 100, y, 224, 72);
        textSize(16);
        fill(0);
        text(maximum_de_touriste + " :touriste maximum", x +12, y -16);
        text(touriste_courant + " :touriste actuel", x+12, y+4);
        text(densite_touriste +"%" + " : saturation", x+12, y+24);
      }
    }
  }
}
/* Classe slider */
class Slider {
  boolean clicked;
  float value;
  int posLineX, posLineY, size, posx, posy;
  Slider() {
    posLineX = 30;
    posLineY = 30;
    size = 200 + posLineX;
    posx = posLineX;
    posy = posLineY;
    value = 0;
    clicked = false;
  }
  void affichage() {
    translate(-mouseTransX, -mouseTransY);
    fill(200);
    rectMode(CORNER);
    rect(0, 0, width, 60/value);
    stroke(0);
    strokeWeight(1/value);
    line(posLineX/value, posLineY/value, size/value, posLineY/value);
    stroke(125);
    fill(125);
    ellipse(posx/value, posy/value, 20/value, 20/value);
    textSize(16/value);
    text(value * 100 + "%", (size/value) + 20/value, posy/value);
    if (dist(posx, posy, mouseX, mouseY)< 11) {

      if (mousePressed) {
        hoverSlider = true;
        clicked = true;
      }
    }
    if (mousePressed) {
      if (clicked && posx >= posLineX && posx <= size) {

        posx = mouseX;
      }
    }
    if (mousePressed == false) {
      clicked = false;
      hoverSlider = false;
    }

    if (posx < posLineX) {
      posx = posLineX;
    } else if (posx > size) {
      posx = size;
    }
  }

  float valueZoom() {
    value = map(posx, posLineX, size, 1, 4);

    return value;
  }
}
class Road {
  float x1, x2, y1, y2;
  Road(float posX1, float posY1, float posX2, float posY2) {
    x1 = posX1;
    y1 = posY1;
    x2 = posX2;
    y2 = posY2;
  }
  /* Méthode pour afficher le tronçon */
  void affichage() {
    stroke(255, 0, 0);
    line(x1, y1, x2, y2);
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 31, 2020, 1:21am UTC](https://discourse.processing.org/t/need-a-review-to-improve-this/26630/2 "2020-12-31T01:21:59Z")

</div>

Hello,

Please format your code:  
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

`:)`

---

<div class="post-metadata">

**Author:** ![jeanphih](https://avatars.discourse-cdn.com/v4/letter/j/e9c0ed/32.png) [@jeanphih](https://discourse.processing.org/u/jeanphih)\
**Post date:** [December 31, 2020, 10:17am UTC](https://discourse.processing.org/t/need-a-review-to-improve-this/26630/3 "2020-12-31T10:17:32Z")

</div>

Hello,  
thanks for answer, i did what you tell me, sorry for my mistake,  
Whats do you think of this code ? Do you think it s possible to improve this ?  
Thanks and bests regards

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 31, 2020, 12:02pm UTC](https://discourse.processing.org/t/need-a-review-to-improve-this/26630/4 "2020-12-31T12:02:32Z")

</div>

> [@jeanphih](#):
>
> thanks for answer, i did what you tell me, sorry for my mistake

It is a much better presentation!  
I am confident others will look at it now.

Don’t be sorry be happy!  
It is part of the learning process.

Last day of the year… I may take a look next year.

`:)`

Counting down (made with Processing):

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/be7fa3dc3300d2827ec9c7270e938d1b22052457.png)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 31, 2020, 12:02pm UTC](https://discourse.processing.org/t/need-a-review-to-improve-this/26630/5 "2020-12-31T12:02:42Z")

</div>

Looks Nice!

**Images:**

definitely not in draw(): `image(loadImage("roma.jpg"), 0, 0, width, height);`

make a global image roma and use loadImage(“roma.jpg”) in setup() only, otherwise slows things down

also use resize() in setup() and use image with 3 parameters only, otherwise slows things down

**empty lines**

Please use empty lines consistent. Sometimes you have 4 sometimes 0. Use a maximum of 1 and have one empty line between functions and classes

**Remark 1**

INSIDE class Checkpoint we read /\* Classe pour les tronçons \*/  
Are you sure about this?

**Remark 2**

You can write `// ====================` before each class

**Remark 3**

As an idea:

I would write a headline in your Sketch (when displaying it) like “Busses in Rome”

Also when you have your points such as 1 Basilica S Pietro 2 Castle Sant Angelo 3 Pantheon  
I would write it into the map (small print) using text(). (Or is it in your image `roma.jpg`?)

Also consider to use mouse over instead of clicking on a point to see details.

Also consider to write a small text Click points to see data

**Remark 4**

` void Tourist() {`

by convention: methods start with a small letter void tourist() {

**Remark 5**

Use nf() or round to shorten the percentage number of the slider. Sometimes it shows 203.499998%

**Remark 6**

here is a faster mouse movement, yours is very slow

```auto
void mouseDragged() {
  if (hoverSlider == false ) {
    if (pmouseX < mouseX ) {
      mouseTransX += 10;
    }
    if (pmouseX > mouseX) {
      mouseTransX += -10;
      ;
    }
    if (pmouseY < mouseY) {
      mouseTransY +=10;
    }
    if (pmouseY > mouseY) {
      mouseTransY += -10;
    }
  }
}

```

**Remark 7**

Your zoom enlarges from the upper left corner, not from the center. Maybe you can fix it.

Warm regards,

Chrisir

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 31, 2020, 12:11pm UTC](https://discourse.processing.org/t/need-a-review-to-improve-this/26630/6 "2020-12-31T12:11:27Z")

</div>

Hello,

See post here for a tip:

> [@Sketch is running at low framerate (3fps) i don't know why](https://discourse.processing.org/t/sketch-is-running-at-low-framerate-3fps-i-dont-know-why/26607/2):
>
> Hello, Load the image in setup(): PImage img; void setup() { size(800, 800); img = loadImage("picture.jpg"); img.resize(width,height); } void draw() { //background(img); image(img, 0, 0, width, height); }slight_smile

`:)`

---

<div class="post-metadata">

**Author:** ![jeanphih](https://avatars.discourse-cdn.com/v4/letter/j/e9c0ed/32.png) [@jeanphih](https://discourse.processing.org/u/jeanphih)\
**Post date:** [December 31, 2020, 3:53pm UTC](https://discourse.processing.org/t/need-a-review-to-improve-this/26630/7 "2020-12-31T15:53:59Z")

</div>

Hello, thanks a lot for theses notes, i take a look to make the changes 🙂 Best wishes for 2021

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 31, 2020, 6:50pm UTC](https://discourse.processing.org/t/need-a-review-to-improve-this/26630/8 "2020-12-31T18:50:09Z")

</div>

Hello,

You have a lot of data to work with and some duplicate data.  
I was curious and cleaned it up (find and replace) and plotted it:

> **Code**
>
> ```auto
> void setup() 
> {
> size(800, 400);
> }
> 
> void draw() 
> {
> background(0);
> for(int i = 0; i<= roadcoord.length; i++)
> {
> strokeWeight(5);
>     
> stroke(255, 0, 0);
> point(50*roadcoord[0][i], 50*roadcoord[1][i]-100);  
>     
> stroke(0, 255, 0);
> point(50*roadcoord[2][i]+400, 50*roadcoord[3][i]-100); 
>     
> stroke(255, 255, 0);
> point(50*checkpointcoord[0][i]+400, 50*roadcoord[1][i]+50); 
>     
> 
> stroke(255, 0, 0);
> point(50*roadcoord[0][i], 50*roadcoord[1][i]);  
>     
> stroke(0, 255, 0);
> point(50*roadcoord[2][i]+5, 50*roadcoord[3][i]); 
>     
> stroke(255, 255, 0);
> point(50*checkpointcoord[0][i], 50*roadcoord[1][i]+5); 
> }
> }
> 
> ```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e64952d3467c3e7b6e4f9d7d2ca7eaa8349bdce2.png)

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b49a52dd7ccb9549d6fb7dc07836a784a6739f68.png)

Data I used:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/22e7f83cc183a18f0f7868a61ce48544a9d9627c.png)

Now that I can visualize the data set I would consider different ways to store it and use it.

One common set of data and an arrays of [indexes](https://www.nasdaq.com/articles/indexes-or-indices-whats-the-deal-2016-05-12) (or indices) for the different groups comes to mind.

`:)`