# How to draw this graph

i want to draw this kind of graph

1 Like

Do you have source code from your attempts to draw the graph?

2 Likes

thank you for reply , i try to draw

``````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)

Try adding variables for the x-axis and y-axis ranges:

``````//  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:

``````  // 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.

1 Like

i am also trying to make these smaller segments on x-axis and y-axis line but could not make it

smaller lines â€ś|â€ť

thank you got it now

``````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

Donâ€™t let subXPos go past the end of the X-axis:

``````   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):

``````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);
}
}

``````
1 Like

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:

``````  // 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:

``````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:

`:)`

1 Like

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

thank you very much perfectly got it

i think i am doing something wrong , please need guide

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.

``````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 );
}
}
}
}
``````

1 Like

somehow i try this but not sure will be good to draw a graph between these cordinates

``````
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);
}
}
}
}

``````

1 Like

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.

1 Like

the version as you mentioned is very perfect, thank you very much going for it

Enjoyed working with you on this project; keep writing code. Persistence usually pays off.

1 Like

yes thank you so much now going to parsing values and try draw graph

1 Like

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:

`:)`

1 Like

An example using a single translate() and combining snippets from my previous post:

``````// 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.

`:)`

1 Like