i want to draw this kind of graph
please guide me thank you
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
please need guide
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
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