# How to draw this graph
**URL:** https://discourse.processing.org/t/how-to-draw-this-graph/42376
**Category:** Electronics (Arduino, etc.)
**Tags:** homework
**Created:** [July 7, 2023, 4:43pm UTC](https://discourse.processing.org/t/how-to-draw-this-graph/42376 "2023-07-07T16:43:16Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@kusspuss](https://discourse.processing.org/u/kusspuss)
#### Post date: [July 7, 2023, 4:43pm UTC](https://discourse.processing.org/t/how-to-draw-this-graph/42376/1 "2023-07-07T16:43:16Z")
i want to draw this kind of graph
please guide me thank you
---
### Author:  [@svan](https://discourse.processing.org/u/svan)
#### Post date: [July 7, 2023, 4:53pm UTC](https://discourse.processing.org/t/how-to-draw-this-graph/42376/2 "2023-07-07T16:53:58Z")
Do you have source code from your attempts to draw the graph?
---
### Author:  [@kusspuss](https://discourse.processing.org/u/kusspuss)
#### Post date: [July 8, 2023, 2:44pm UTC](https://discourse.processing.org/t/how-to-draw-this-graph/42376/3 "2023-07-08T14:44:32Z")
thank you for reply , i try to draw
```auto
float graphX; // X-coordinate of the graph
float graphY; // Y-coordinate of the graph
void setup() {
size(750, 500); // Set the size of the window
graphX = width / 2; // Set the initial X-coordinate of the graph to the center of the window
graphY = height / 2; // Set the initial Y-coordinate of the graph to the center of the window
}
void draw() {
background(255); // Set the background color to white
// Set the stroke color and weight for axes and origin
stroke(0); // Set the stroke color to black
strokeWeight(1); // Set the stroke weight to 1
// Update the position of the graph based on mouse movement
if (mousePressed) {
graphX += mouseX - pmouseX; // Update the X-coordinate of the graph based on mouse movement on the X-axis
graphY += mouseY - pmouseY; // Update the Y-coordinate of the graph based on mouse movement on the Y-axis
}
// Define the width and height of the axes
float xAxisWidth = width * 0.99; // Change the width as desired (e.g., 80% of the window width)
float yAxisHeight = height * 0.80; // Change the height as desired (e.g., 50% of the window height)
// Draw the right half of the x-axis with the updated graph position
line(graphX, graphY, graphX + xAxisWidth/2, graphY); // Draw a horizontal line
// Draw arrowhead at the end of the x-axis
float arrowSize = 8; // Size of the arrowhead
triangle(graphX + xAxisWidth/2 - arrowSize, graphY - arrowSize/2,
graphX + xAxisWidth/2 - arrowSize, graphY + arrowSize/2,
graphX + xAxisWidth/2, graphY); // Draw the triangle arrowhead
// Draw angle label on the x-axis
textAlign(RIGHT);
fill(0);
text("Angle", graphX + xAxisWidth/2 - 160, graphY + 30); // Display the angle label
// Draw the upper half of the y-axis with the updated graph position
line(graphX, graphY - yAxisHeight, graphX, graphY); // Draw a vertical line
// Draw arrowhead at the end of the y-axis
triangle(graphX - arrowSize/2, graphY - yAxisHeight + arrowSize,
graphX + arrowSize/2, graphY - yAxisHeight + arrowSize,
graphX, graphY - yAxisHeight); // Draw the triangle arrowhead
// Draw "h_dot" label on the y-axis
textAlign(RIGHT);
fill(0);
text("h_dot", graphX - 35, graphY - yAxisHeight + 200); // Display the "h_dot" label below the y-axis
// Draw the origin O(0,0)
fill(255, 0, 0); // Set the fill color to red
noStroke(); // Disable stroke for the origin
float originSize = 10; // Size of the origin representation
ellipse(graphX, graphY, originSize, originSize); // Draw a small circle at the origin
// Write x-axis values
textAlign(CENTER);
fill(0);
for (int i = 0; i <= 60; i += 10) {
float xPos = map(i, 0, 60, graphX, graphX + xAxisWidth/2);
text(i, xPos, graphY + 15);
}
// Write y-axis values
textAlign(RIGHT, CENTER);
fill(0);
for (int i = 0; i <= 60; i += 10) {
float yPos = map(i, 0, 60, graphY, graphY - yAxisHeight);
text(i, graphX - 12, yPos);
}
}
```
please guide me how to divide x-axis and y-axis into smaller segments(10)
---
### Author:  [@svan](https://discourse.processing.org/u/svan)
#### Post date: [July 8, 2023, 3:51pm UTC](https://discourse.processing.org/t/how-to-draw-this-graph/42376/4 "2023-07-08T15:51:21Z")
Try adding variables for the x-axis and y-axis ranges:
```auto
// x axis label range
int xMin = 0;
int xMax = 100;
int xStep = 10;
// y axis label range
int yMin = 0;
int yMax = 100;
int yStep = 10;
```
Then when you create the values for each axis:
```auto
// Write x-axis values
textAlign(CENTER);
fill(0);
stroke(0);
for (int i = xMin; i <= xMax; i += xStep) {
float xPos = map(i, xMin, xMax, graphX, graphX + xAxisWidth/2);
line(xPos, graphY, xPos, graphY + 5);
text(i, xPos, graphY + 20);
}
// Write y-axis values
textAlign(RIGHT, CENTER);
fill(0);
stroke(0);
for (int i = yMin; i <= yMax; i += yStep) {
float yPos = map(i, yMin, yMax, graphY, graphY - yAxisHeight);
line(graphX - 5, yPos, graphX, yPos);
text(i, graphX - 12, yPos);
}
```
I also dropped the x-axis “Angle” label by 10 just to make it look better.
---
### Author:  [@kusspuss](https://discourse.processing.org/u/kusspuss)
#### Post date: [July 8, 2023, 4:11pm UTC](https://discourse.processing.org/t/how-to-draw-this-graph/42376/5 "2023-07-08T16:11:00Z")
i am also trying to make these smaller segments on x-axis and y-axis line but could not make it
please need guide
smaller lines “|”
---
### Author:  [@kusspuss](https://discourse.processing.org/u/kusspuss)
#### Post date: [July 8, 2023, 4:53pm UTC](https://discourse.processing.org/t/how-to-draw-this-graph/42376/6 "2023-07-08T16:53:03Z")
thank you got it now
---
### Author:  [@kusspuss](https://discourse.processing.org/u/kusspuss)
#### Post date: [July 8, 2023, 5:17pm UTC](https://discourse.processing.org/t/how-to-draw-this-graph/42376/7 "2023-07-08T17:17:23Z")
```auto
float graphX; // X-coordinate of the graph
float graphY; // Y-coordinate of the graph
// x axis label range
int xMin = 0;
int xMax = 100;
int xStep = 10;
// y axis label range
int yMin = 0;
int yMax = 100;
int yStep = 10;
void setup() {
size(750, 500); // Set the size of the window
graphX = width / 2; // Set the initial X-coordinate of the graph to the center of the window
graphY = height / 2; // Set the initial Y-coordinate of the graph to the center of the window
}
void draw() {
background(255); // Set the background color to white
// Set the stroke color and weight for axes and origin
stroke(0); // Set the stroke color to black
strokeWeight(1); // Set the stroke weight to 1
// Update the position of the graph based on mouse movement
if (mousePressed) {
graphX += mouseX - pmouseX; // Update the X-coordinate of the graph based on mouse movement on the X-axis
graphY += mouseY - pmouseY; // Update the Y-coordinate of the graph based on mouse movement on the Y-axis
}
// Define the width and height of the axes
float xAxisWidth = width * 0.99; // Change the width as desired (e.g., 80% of the window width)
float yAxisHeight = height * 0.80; // Change the height as desired (e.g., 50% of the window height)
// Draw the right half of the x-axis with the updated graph position
line(graphX, graphY, graphX + xAxisWidth/2, graphY); // Draw a horizontal line
// Draw arrowhead at the end of the x-axis
float arrowSize = 8; // Size of the arrowhead
triangle(graphX + xAxisWidth/2 - arrowSize, graphY - arrowSize/2,
graphX + xAxisWidth/2 - arrowSize, graphY + arrowSize/2,
graphX + xAxisWidth/2, graphY); // Draw the triangle arrowhead
// Draw angle label on the x-axis
textAlign(RIGHT);
fill(0);
text("Angle", graphX + xAxisWidth/2 -167, graphY + 40); // Display the angle label
// Draw the upper half of the y-axis with the updated graph position
line(graphX, graphY - yAxisHeight, graphX, graphY); // Draw a vertical line
// Draw arrowhead at the end of the y-axis
triangle(graphX - arrowSize/2, graphY - yAxisHeight + arrowSize,
graphX + arrowSize/2, graphY - yAxisHeight + arrowSize,
graphX, graphY - yAxisHeight); // Draw the triangle arrowhead
// Draw "h_dot" label on the y-axis
textAlign(RIGHT);
fill(0);
text("h_dot", graphX - 35, graphY - yAxisHeight + 205); // Display the "h_dot" label below the y-axis
// Draw the origin O(0,0)
fill(255, 0, 0); // Set the fill color to red
noStroke(); // Disable stroke for the origin
float originSize = 10; // Size of the origin representation
ellipse(graphX, graphY, originSize, originSize); // Draw a small circle at the origin
// Draw vertical lines on the x-axis
for (int i = xMin; i <= xMax; i += xStep) {
float xPos = map(i, xMin, xMax, graphX, graphX + xAxisWidth/2);
line(xPos, graphY, xPos, graphY - 5);
for (int j = 1; j < xStep; j++) {
float xPosMinor = map(i+j, xMin, xMax, graphX, graphX + xAxisWidth/2);
line(xPosMinor, graphY, xPosMinor, graphY - 2);
}
}
// Draw horizontal lines on the y-axis
for (int i = yMin; i <= yMax; i += yStep) {
float yPos = map(i, yMin, yMax, graphY, graphY - yAxisHeight);
line(graphX, yPos, graphX + 5, yPos);
for (int j = 1; j < yStep; j++) {
float yPosMinor = map(i+j, yMin, yMax, graphY, graphY - yAxisHeight);
line(graphX, yPosMinor, graphX + 2, yPosMinor);
}
}
// Write x-axis values
textAlign(CENTER);
fill(0);
stroke(0);
for (int i = xMin; i <= xMax; i += xStep) {
float xPos = map(i, xMin, xMax, graphX, graphX + xAxisWidth/2);
line(xPos, graphY, xPos, graphY + 5);
text(i, xPos, graphY + 25);
// Draw smaller divisions
int numSubDivisions = 10; // Number of smaller divisions within each major division
float majorDivisionWidth = xAxisWidth / (float)(xMax - xMin) * xStep;
float subDivisionWidth = majorDivisionWidth / numSubDivisions;
for (int j = 1; j < numSubDivisions; j++) {
float subXPos = xPos + (j * subDivisionWidth);
line(subXPos, graphY, subXPos, graphY + 3.8);
}
}
// Write y-axis values
textAlign(RIGHT, CENTER);
fill(0);
stroke(0);
for (int i = yMin; i <= yMax; i += yStep) {
float yPos = map(i, yMin, yMax, graphY, graphY - yAxisHeight);
line(graphX - 5, yPos, graphX, yPos);
text(i, graphX - 12, yPos);
}
}
```
please check this , these ticks are out of line
---
### Author:  [@svan](https://discourse.processing.org/u/svan)
#### Post date: [July 9, 2023, 12:06am UTC](https://discourse.processing.org/t/how-to-draw-this-graph/42376/8 "2023-07-09T00:06:02Z")
Don’t let subXPos go past the end of the X-axis:
```auto
for (int j = 0; j < numSubDivisions; j++) {
float subXPos = xPos + (j * subDivisionWidth);
if (subXPos < graphX + xAxisWidth/2) {
line(subXPos, graphY, subXPos, graphY + 3.8);
}
}
```
You also have some _redundant code_ (shortened version follows):
```auto
float graphX; // X-coordinate of the graph
float graphY; // Y-coordinate of the graph
// x axis label range
int xMin = 0;
int xMax = 100;
int xStep = 10;
// y axis label range
int yMin = 0;
int yMax = 100;
int yStep = 10;
void setup() {
size(750, 500); // Set the size of the window
graphX = width / 2; // Set the initial X-coordinate of the graph to the center of the window
graphY = height / 2; // Set the initial Y-coordinate of the graph to the center of the window
}
void draw() {
background(255); // Set the background color to white
// Set the stroke color and weight for axes and origin
stroke(0); // Set the stroke color to black
strokeWeight(1); // Set the stroke weight to 1
// Update the position of the graph based on mouse movement
if (mousePressed) {
graphX += mouseX - pmouseX; // Update the X-coordinate of the graph based on mouse movement on the X-axis
graphY += mouseY - pmouseY; // Update the Y-coordinate of the graph based on mouse movement on the Y-axis
}
// Define the width and height of the axes
float xAxisWidth = width * 0.99; // Change the width as desired (e.g., 80% of the window width)
float yAxisHeight = height * 0.80; // Change the height as desired (e.g., 50% of the window height)
// Draw the right half of the x-axis with the updated graph position
line(graphX, graphY, graphX + xAxisWidth/2, graphY); // Draw a horizontal line
// Draw arrowhead at the end of the x-axis
float arrowSize = 8; // Size of the arrowhead
triangle(graphX + xAxisWidth/2 - arrowSize, graphY - arrowSize/2,
graphX + xAxisWidth/2 - arrowSize, graphY + arrowSize/2,
graphX + xAxisWidth/2, graphY); // Draw the triangle arrowhead
// Draw angle label on the x-axis
textAlign(RIGHT);
fill(0);
text("Angle", graphX + xAxisWidth/2 -167, graphY + 40); // Display the angle label
// Draw the upper half of the y-axis with the updated graph position
line(graphX, graphY - yAxisHeight, graphX, graphY); // Draw a vertical line
// Draw arrowhead at the end of the y-axis
triangle(graphX - arrowSize/2, graphY - yAxisHeight + arrowSize,
graphX + arrowSize/2, graphY - yAxisHeight + arrowSize,
graphX, graphY - yAxisHeight); // Draw the triangle arrowhead
// Draw "h_dot" label on the y-axis
textAlign(RIGHT);
fill(0);
text("h_dot", graphX - 35, graphY - yAxisHeight + 205); // Display the "h_dot" label below the y-axis
// Draw the origin O(0,0)
fill(255, 0, 0); // Set the fill color to red
noStroke(); // Disable stroke for the origin
float originSize = 10; // Size of the origin representation
ellipse(graphX, graphY, originSize, originSize); // Draw a small circle at the origin
// Write x-axis values
textAlign(CENTER);
fill(0);
stroke(0);
for (int i = xMin; i <= xMax; i += xStep) {
float xPos = map(i, xMin, xMax, graphX, graphX + xAxisWidth/2);
line(xPos, graphY, xPos, graphY + 5);
text(i, xPos, graphY + 25);
int numSubDivisions = 10; // Number of smaller divisions within each major division
float majorDivisionWidth = xAxisWidth / (float)(xMax - xMin) * xStep;
float subDivisionWidth = majorDivisionWidth / numSubDivisions;
for (int j = 0; j < numSubDivisions; j++) {
float subXPos = xPos + (j * subDivisionWidth);
if (subXPos < graphX + xAxisWidth/2) {
line(subXPos, graphY, subXPos, graphY + 3.8);
}
}
}
// Write y-axis values
textAlign(RIGHT, CENTER);
fill(0);
stroke(0);
for (int i = yMin; i <= yMax; i += yStep) {
float yPos = map(i, yMin, yMax, graphY, graphY - yAxisHeight);
line(graphX - 5, yPos, graphX, yPos);
text(i, graphX - 12, yPos);
}
}
```
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [July 9, 2023, 11:34am UTC](https://discourse.processing.org/t/how-to-draw-this-graph/42376/9 "2023-07-09T11:34:41Z")
Hello @kusspuss,
Consider removing all the _graphX_ and _graphY_ offsets (replace with 0 for testing and later remove them as required) and replace them with a single translate:
```auto
// Update the position of the graph based on mouse movement
if (mousePressed) {
graphX += mouseX - pmouseX; // Update the X-coordinate of the graph based on mouse movement on the X-axis
graphY += mouseY - pmouseY; // Update the Y-coordinate of the graph based on mouse movement on the Y-axis
}
translate(graphX, graphY);
```
This is another approach to your divisions:
```auto
for (int i = xMin; i <= xMax; i += 1) {
//float xPos = map(i, xMin, xMax, 0, xAxisWidth/2); // Replaced below
float xSpace = (xAxisWidth/2)/(xMax-xMin);
float xPos = i*xSpace;
if(i%10 == 0)
{
line(xPos, 0, xPos, 10);
text(i, xPos, 25);
}
else
{
line(xPos, 0, xPos, 5);
}
}
```
I tried the above:
`:)`
---
### Author:  [@kusspuss](https://discourse.processing.org/u/kusspuss)
#### Post date: [July 10, 2023, 6:10am UTC](https://discourse.processing.org/t/how-to-draw-this-graph/42376/10 "2023-07-10T06:10:10Z")
> [@glv](#):
>
> Consider removing all the _graphX_ and _graphY_ offsets (replace with 0 for testing and later remove them as required) and replace them with a single translate:
thank you very much as you mentioned “Consider removing all the _graphX_ and _graphY_ offsets (replace with 0 for testing and later remove them as required) and replace them with a single translate:” this thing i do not understand
---
### Author:  [@kusspuss](https://discourse.processing.org/u/kusspuss)
#### Post date: [July 10, 2023, 6:10am UTC](https://discourse.processing.org/t/how-to-draw-this-graph/42376/11 "2023-07-10T06:10:47Z")
thank you very much perfectly got it
---
### Author:  [@kusspuss](https://discourse.processing.org/u/kusspuss)
#### Post date: [July 10, 2023, 6:12am UTC](https://discourse.processing.org/t/how-to-draw-this-graph/42376/12 "2023-07-10T06:12:28Z")
i think i am doing something wrong , please need guide
---
### Author:  [@svan](https://discourse.processing.org/u/svan)
#### Post date: [July 10, 2023, 7:20am UTC](https://discourse.processing.org/t/how-to-draw-this-graph/42376/13 "2023-07-10T07:20:54Z")
The following source code should place tick marks on both axes. If you set the xAxisWidth as a percentage of the window width (similar to what you did for yAxisHeight) you will see all ten subdivisions on the xAxis just like the yAxis.
```auto
float graphX; // X-coordinate of the graph
float graphY; // Y-coordinate of the graph
// x axis label range
int xMin = 0;
int xMax = 100;
int xStep = 10;
// y axis label range
int yMin = 0;
int yMax = 100;
int yStep = 10;
void setup() {
size(750, 500); // Set the size of the window
graphX = width / 2; // Set the initial X-coordinate of the graph to the center of the window
graphY = height / 2; // Set the initial Y-coordinate of the graph to the center of the window
}
void draw() {
background(255); // Set the background color to white
// Set the stroke color and weight for axes and origin
stroke(0); // Set the stroke color to black
strokeWeight(1); // Set the stroke weight to 1
// Update the position of the graph based on mouse movement
if (mousePressed) {
graphX += mouseX - pmouseX; // Update the X-coordinate of the graph based on mouse movement on the X-axis
graphY += mouseY - pmouseY; // Update the Y-coordinate of the graph based on mouse movement on the Y-axis
}
// Define the width and height of the axes
float xAxisWidth = width * 0.65; // Change the width as desired (e.g., 80% of the window width)
float yAxisHeight = height * 0.80; // Change the height as desired (e.g., 50% of the window height)
// Draw the right half of the x-axis with the updated graph position
line(graphX, graphY, graphX + xAxisWidth, graphY); // Draw a horizontal line
// Draw arrowhead at the end of the x-axis
float arrowSize = 8; // Size of the arrowhead
triangle(graphX + xAxisWidth - arrowSize, graphY - arrowSize/2,
graphX + xAxisWidth - arrowSize, graphY + arrowSize/2,
graphX + xAxisWidth, graphY); // Draw the triangle arrowhead
// Draw angle label on the x-axis
textAlign(RIGHT);
fill(0);
text("Angle", graphX + xAxisWidth/2 + 15, graphY + 40); // Display the angle label
// Draw the upper half of the y-axis with the updated graph position
line(graphX, graphY - yAxisHeight, graphX, graphY); // Draw a vertical line
// Draw arrowhead at the end of the y-axis
triangle(graphX - arrowSize/2, graphY - yAxisHeight + arrowSize,
graphX + arrowSize/2, graphY - yAxisHeight + arrowSize,
graphX, graphY - yAxisHeight); // Draw the triangle arrowhead
// Draw "h_dot" label on the y-axis
textAlign(RIGHT);
fill(0);
text("h_dot", graphX - 35, graphY - yAxisHeight + 205); // Display the "h_dot" label below the y-axis
// Draw the origin O(0,0)
fill(255, 0, 0); // Set the fill color to red
noStroke(); // Disable stroke for the origin
float originSize = 10; // Size of the origin representation
ellipse(graphX, graphY, originSize, originSize); // Draw a small circle at the origin
// Write x-axis values
textAlign(CENTER);
fill(0);
stroke(0);
for (int i = xMin; i <= xMax; i += xStep) {
float xPos = map(i, xMin, xMax, graphX, graphX + xAxisWidth);
line(xPos, graphY, xPos, graphY + 8);
text(i, xPos, graphY + 25);
int numSubDivisions = 10; // Number of smaller divisions within each major division
float majorDivisionWidth = xAxisWidth / (float)(xMax - xMin) * xStep;
float subDivisionWidth = majorDivisionWidth / numSubDivisions;
for (int j = 0; j < numSubDivisions; j++) {
float subXPos = xPos + (j * subDivisionWidth);
if (subXPos < graphX + xAxisWidth) {
line(subXPos, graphY, subXPos, graphY + 4);
}
}
}
// Write y-axis values
textAlign(RIGHT, CENTER);
fill(0);
stroke(0);
for (int i = yMin; i <= yMax; i += yStep) {
float yPos = map(i, yMin, yMax, graphY, graphY - yAxisHeight);
line(graphX - 8, yPos, graphX, yPos);
text(i, graphX - 12, yPos);
int numSubDivisions = 10; // Number of smaller divisions within each major division
float majorDivisionWidth = yAxisHeight / (float)(yMax - yMin) * yStep;
float subDivisionWidth = majorDivisionWidth / numSubDivisions;
for (int k = 0; k < numSubDivisions; k++) {
float subYPos = yPos + (k * subDivisionWidth);
if (graphY > subYPos) {
line(graphX - 4, subYPos, graphX, subYPos );
}
}
}
}
```
---
### Author:  [@kusspuss](https://discourse.processing.org/u/kusspuss)
#### Post date: [July 10, 2023, 7:21am UTC](https://discourse.processing.org/t/how-to-draw-this-graph/42376/14 "2023-07-10T07:21:29Z")
somehow i try this but not sure will be good to draw a graph between these cordinates
```auto
float graphX; // X-coordinate of the graph
float graphY; // Y-coordinate of the graph
// x axis label range
int xMin = 0;
int xMax = 100;
int xStep = 10;
// y axis label range
int yMin = 0;
int yMax = 100;
int yStep = 10;
void setup() {
size(750, 500); // Set the size of the window
graphX = width / 2; // Set the initial X-coordinate of the graph to the center of the window
graphY = height / 2; // Set the initial Y-coordinate of the graph to the center of the window
}
void draw() {
background(255); // Set the background color to white
// Set the stroke color and weight for axes and origin
stroke(0); // Set the stroke color to black
strokeWeight(1); // Set the stroke weight to 1
// Update the position of the graph based on mouse movement
if (mousePressed) {
graphX += mouseX - pmouseX; // Update the X-coordinate of the graph based on mouse movement on the X-axis
graphY += mouseY - pmouseY; // Update the Y-coordinate of the graph based on mouse movement on the Y-axis
}
// Define the width and height of the axes
float xAxisWidth = width * 0.99; // Change the width as desired (e.g., 80% of the window width)
float yAxisHeight = height * 0.80; // Change the height as desired (e.g., 50% of the window height)
// Draw the right half of the x-axis with the updated graph position
line(graphX, graphY, graphX + xAxisWidth/2, graphY); // Draw a horizontal line
// Draw arrowhead at the end of the x-axis
float arrowSize = 8; // Size of the arrowhead
triangle(graphX + xAxisWidth/2 - arrowSize, graphY - arrowSize/2,
graphX + xAxisWidth/2 - arrowSize, graphY + arrowSize/2,
graphX + xAxisWidth/2, graphY); // Draw the triangle arrowhead
// Draw angle label on the x-axis
textAlign(RIGHT);
fill(0);
text("Angle", graphX + xAxisWidth/2 - 167, graphY + 40); // Display the angle label
// Draw the upper half of the y-axis with the updated graph position
line(graphX, graphY - yAxisHeight, graphX, graphY); // Draw a vertical line
// Draw arrowhead at the end of the y-axis
triangle(graphX - arrowSize/2, graphY - yAxisHeight + arrowSize,
graphX + arrowSize/2, graphY - yAxisHeight + arrowSize,
graphX, graphY - yAxisHeight); // Draw the triangle arrowhead
// Draw "h_dot" label on the y-axis
textAlign(RIGHT);
fill(0);
text("h_dot", graphX - 35, graphY - yAxisHeight + 205); // Display the "h_dot" label below the y-axis
// Draw the origin O(0,0)
fill(255, 0, 0); // Set the fill color to red
noStroke(); // Disable stroke for the origin
float originSize = 10; // Size of the origin representation
ellipse(graphX, graphY, originSize, originSize); // Draw a small circle at the origin
// Write x-axis values
textAlign(CENTER);
fill(0);
stroke(0);
for (int i = xMin; i <= xMax; i += xStep) {
float xPos = map(i, xMin, xMax, graphX, graphX + xAxisWidth/2);
line(xPos, graphY, xPos, graphY + 5);
text(i, xPos, graphY + 25);
int numSubDivisions = 10; // Number of smaller divisions within each major division
float majorDivisionWidth = xAxisWidth / (float)(xMax - xMin) * xStep;
float subDivisionWidth = majorDivisionWidth / numSubDivisions;
float subDivisionSpacing = subDivisionWidth / (numSubDivisions - 8);
// Draw smaller divisions within each major division
for (int j = 1; j <= numSubDivisions; j++) {
float subXPos = xPos + (j * subDivisionSpacing);
if (subXPos < graphX + xAxisWidth / 2) {
line(subXPos, graphY, subXPos, graphY + 3.7);
}
}
}
// Write y-axis values
textAlign(RIGHT, CENTER);
fill(0);
stroke(0);
for (int i = yMin; i <= yMax; i += yStep) {
float yPos = map(i, yMin, yMax, graphY, graphY - yAxisHeight);
line(graphX - 5, yPos, graphX, yPos);
text(i, graphX - 12, yPos);
int numSubDivisions = 10; // Number of smaller divisions within each major division
float majorDivisionHeight = yAxisHeight / (float)(yMax - yMin) * yStep;
float subDivisionHeight = majorDivisionHeight / numSubDivisions;
// Draw smaller divisions within each major division
for (int j = 1; j < numSubDivisions; j++) {
float subYPos = yPos - (j * subDivisionHeight);
if (subYPos > graphY - yAxisHeight) {
line(graphX, subYPos, graphX - 2.7, subYPos);
}
}
}
}
```
---
### Author:  [@svan](https://discourse.processing.org/u/svan)
#### Post date: [July 10, 2023, 7:44am UTC](https://discourse.processing.org/t/how-to-draw-this-graph/42376/15 "2023-07-10T07:44:07Z")
If you stop using xAxisWidth/2 (and use smaller percentage of width instead), especially in map() then you will get the expected 10 tick marks per unit for the xAxis and won’t need the extra subDivisionSpacing. You did manage to get tick marks on both axes, however; it’s up to you which version you use.
---
### Author:  [@kusspuss](https://discourse.processing.org/u/kusspuss)
#### Post date: [July 10, 2023, 7:44am UTC](https://discourse.processing.org/t/how-to-draw-this-graph/42376/16 "2023-07-10T07:44:43Z")
the version as you mentioned is very perfect, thank you very much going for it
---
### Author:  [@svan](https://discourse.processing.org/u/svan)
#### Post date: [July 10, 2023, 7:49am UTC](https://discourse.processing.org/t/how-to-draw-this-graph/42376/17 "2023-07-10T07:49:54Z")
Enjoyed working with you on this project; keep writing code. Persistence usually pays off.
---
### Author:  [@kusspuss](https://discourse.processing.org/u/kusspuss)
#### Post date: [July 10, 2023, 7:50am UTC](https://discourse.processing.org/t/how-to-draw-this-graph/42376/18 "2023-07-10T07:50:44Z")
yes thank you so much now going to parsing values and try draw graph
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [July 10, 2023, 10:13am UTC](https://discourse.processing.org/t/how-to-draw-this-graph/42376/19 "2023-07-10T10:13:44Z")
> [@kusspuss](#):
>
> thank you very much as you mentioned “Consider removing all the _graphX_ and _graphY_ offsets (replace with 0 for testing and later remove them as required) and replace them with a single translate:” this thing i do not understand
You can translate everything in one line instead of adding an offset to each x and y throughout the whole program to move it.
References:
> **[2D Transformations](https://processing.org/tutorials/transform2d/)**
>
> Learn how to translate, rotate, and scale shapes using 2D transformations.
> **[translate() / Reference](https://processing.org/reference/translate_.html)**
>
> Specifies an amount to displace objects within the display window. The x parameter specifies left/right translation, the y parameter specifies up/down translation, and the z param…
`:)`
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [July 10, 2023, 10:36am UTC](https://discourse.processing.org/t/how-to-draw-this-graph/42376/20 "2023-07-10T10:36:18Z")
An example using a single _translate()_ and combining snippets from my previous post:
```auto
// Translate a line
// By: glv
// Date: 2023-07-10
void setup()
{
size(500, 500);
}
void draw()
{
background(255);
int xMin = 0;
int xMax = 100;
float scale = 1.5;
float xAxisWidth = width/2;
stroke(0);
fill(0);
translate(mouseX, mouseY);
for (int i = xMin; i <= xMax; i += 2) {
//float xPos = map(i, xMin, xMax, 0, xAxisWidth/2); // Replaced below
float xSpace = (xAxisWidth)/(xMax-xMin);
float xPos = i*xSpace*scale;
if(i%5 == 0)
{
line(xPos, 0, xPos, 10);
text(i, xPos, 25);
}
else
{
line(xPos, 0, xPos, 5);
}
}
}
```
Only an example… concepts will need to be integrated into a project.
`:)`
[Next page](https://discourse.processing.org/t/how-to-draw-this-graph/42376.md?page=2)