Help with creating axis & naming it

Processing Coding Questions
1

I am about to cry, I am so confused and lost. I’ve looked all over the 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

This is my code so far:

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.

1 Like
2

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

1 Like
3

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

1 Like
4

https://processing.org/tutorials/drawing/

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

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.

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

:slight_smile:

2 Likes
5

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 – that do have higher-level things like axis commands for doing this: Default plot sketch - jagracar . 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.

2 Likes