# Help with creating axis & naming it

**URL:** https://discourse.processing.org/t/help-with-creating-axis-naming-it/15554
**Category:** Coding Questions
**Tags:** homework
**Created:** [November 16, 2019, 9:23pm UTC](https://discourse.processing.org/t/help-with-creating-axis-naming-it/15554 "2019-11-16T21:23:56Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![madf](https://avatars.discourse-cdn.com/v4/letter/m/6bbea6/32.png) [@madf](https://discourse.processing.org/u/madf)
#### Post date: [November 16, 2019, 9:23pm UTC](https://discourse.processing.org/t/help-with-creating-axis-naming-it/15554/1 "2019-11-16T21:23:56Z")

</div>

I am about to cry, I am so confused and lost. I’ve looked all over the [processing.org](http://processing.org) resources but maybe my question is just too simple for it. I can’t figure out how to create and name an axis or how to create the little hash marks. ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c8d802d241385281773e0664c50ab9224b92f3fa.png)

This is my code so far:

```auto
JSONArray cats;
color[]colors={#f0f0f5,#ffccff,#cc9900,#99ccff,#0033cc,#00cc66,#ffcc00};
void setup(){
  size(600,400);
  background(255);
  cats=loadJSONArray("cats.json");
  JSONObject cat=cats.getJSONObject(0); //This tells processing to retrieve the first object in the cats array.
  String name=cat.getString("name");
  String breed=cat.getString("breed");
  int age=cat.getInt("age");
  println(name+";"+breed+","+age);
}
void draw(){
  stroke(153);
  textSize(15);
  text("LEGEND",440,120);
  text("Cat",430,150);
  text("Age",515,150);
  text("madf graph",250,40); //the title 
  for(int i=0;i<cats.size();i++){
    JSONObject cat=cats.getJSONObject(i);
    fill(colors[i]); 
    int age=cat.getInt("age");
    String name=cat.getString("name");
    rect(i*30 + 80, 310, 30, -age*20);
    rect(385,i*25+160,25,25);
    fill(0);
    text(name,430,i*25+175);
    text(age,520,i*25+175);
  }
}

```

Any guidance would be greatly appreciated.

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [November 17, 2019, 7:08am UTC](https://discourse.processing.org/t/help-with-creating-axis-naming-it/15554/2 "2019-11-17T07:08:11Z")

</div>

i would say for your graph area,

- the axis are 2 `lines();`

- the the name of the axis is some `text("Age",x,y);`  
at the end of the line

- the numbers on the exis is text  
by a for loop  
`for ( int i = 0; i<= 15; i+=5 ) text(i,x0,y0-i*20);` // the 20 comes from your rectangle -age\*20 info

---

<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: [November 17, 2019, 8:56am UTC](https://discourse.processing.org/t/help-with-creating-axis-naming-it/15554/3 "2019-11-17T08:56:01Z")

</div>

> [@madf](#):
>
> rect(i_30 + 80, 310, 30, -age_20);

this line implicitly contains how you calculate the y position

So when you want to draw two text marks use the same y but other x (65 I guess)

Use 7 and 13 as age : text(“7”, 65, … );

Don’t use a for loop

---

<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: [November 17, 2019, 12:26pm UTC](https://discourse.processing.org/t/help-with-creating-axis-naming-it/15554/4 "2019-11-17T12:26:50Z")

</div>

> **[Tutorials](https://processing.org/tutorials/)**
>
> Links to videos that cover the Processing basics.

[https://processing.org/tutorials/drawing/](https://processing.org/tutorials/drawing/)

> **[Reference](https://processing.org/reference/)**
>
> Find further documentation of the Processing language

> **[line() / Reference](https://processing.org/reference/line_.html)**
>
> Draws a line (a direct path between two points) to the screen. The version of line() with four parameters draws the line in 2D. To color a line, use the stroke() function. A line cannot …

> **[strokeWeight() / Reference](https://processing.org/reference/strokeWeight_.html)**
>
> Sets the width of the stroke used for lines, points, and the border around shapes. All widths are set in units of pixels. Using point() with strokeWeight(1) or smaller may draw nothing to …

> **[background() / Reference](https://processing.org/reference/background_.html)**
>
> The background() function sets the color used for the background of the Processing window. The default background is light gray. This function is typically used within draw() to clear th…

> **[loadJSONArray() / Reference](https://processing.org/reference/loadJSONArray_.html)**
>
> Loads an array of JSON objects from the data folder or a URL, and returns a JSONArray. Per standard JSON syntax, the array must be enclosed in a pair of hard brackets \[\], and each object…

> **[text() / Reference](https://processing.org/reference/text_.html)**
>
> Draws text to the screen. Displays the information specified in the first parameter on the screen in the position specified by the additional parameters. A default font will be used unless a font is s…

> [@madf](#):
>
> I am about to cry, I am so confused and lost.

You can achieve anything if you work at it and persevere. I know this from experience.  
Your codes so far is a good start.

> [@madf](#):
>
> I’ve looked all over the [processing.org](http://processing.org) resources but maybe my question is just too simple for it.

This is a simple exercise.  
Start working with lines and plotting them; the example shows plotting of rectangles and lines are much easier.  
Notice that offsets (+80) and variables (-age\*20) are used in plotting rectangle and can apply to lines.

```auto
rect(i*30 + 80, 350, 30, -age*20);

```

Add a background otherwise you keep redrawing over the screen and it looks worse.

Plot the lines and labels after the loop so you are not drawing them over each other unnecessarily.

I worked through this exercise and it is achievable for you:

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

🙂

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [November 17, 2019, 4:50pm UTC](https://discourse.processing.org/t/help-with-creating-axis-naming-it/15554/5 "2019-11-17T16:50:13Z")

</div>

> [@madf](#):
>
> can’t figure out how to create and name an axis

The key concept to understand is that Processing is fairly low-level. It doesn’t have commands like “create and name an axis” – it has commands like “draw a line” – then you tell it where to draw the lines to make the axes, like you would with a pencil on paper.

If you want to create axes with higher-level commands, there are libraries – like [Grafica](https://jagracar.com/grafica.php) – that do have higher-level things like axis commands for doing this: [Default plot sketch - jagracar](https://jagracar.com/sketches/defaultPlot.php) . However you have posted what looks like an exercise or homework assignment, so using a library is probably not the point of what you are learning – you are learning how to think through how to make the lines and hashes yourself, and where they go.
