Define a startingpoint from a .png file in processing


Im have a .png file with a black graph on it. (just a single black line on a complete white background)

I would like to define two starting points from stroke-functions amongst this line. one stroke function which will move upwards, and one who will move downwards.

As im new to processing, i have no idea on which function to use. I have used about an hour to load the image in to processing.

If someone could point me to which function i should use, or have some youtube videos they could recommend it would be awesome!


hi! welcome to the forum :wave:

I’m afraid I don’t quite get what you want to achieve… maybe you can share the png file that you mention, and additionally make a drawing/sketch of what you want to accomplish with code…?

1 Like


Are you trying to create a graph with both positive and negative values?


My thought is to divide the “picture” into two parts. I want to create an alternative x-axis, which is defined by the following graph:

Im trying to create a new x-axis which is defined by the following graph:

I have yet to implement the graph in processing, only the picture of it.

(Im a total noob)

I don’t understand how that will change the x-axis; the image shows changes in the y-values. The x-axis values appear to be unchanged in what you have shown. Each one of the x-axis values has a corresponding y-value which is variable. You could then plot new y-values (+/-) based on your pre-defined curve.

Ok, I see my formulation could be better.

I would like to establish an alternativ x-axis which could be used as a starting point for other functions.

Here is an example.

Lets say the graps is a straight line in the midle of the screen - when i type in a line function, i would like the line to start in the middle of the screen according to where the graph is. Does that make sense?

I still have difficulty understanding what you want to achieve… and perhaps it’s not a single “function” that solves your problem. Since you seem to have interesting ideas, I think we need to figure out some direction how we want to proceed

  • if you want to achieve a specific effect/filter that you are describing - in that case you should provide some code (even just the code that loads an image like you described) as a starting point and we can build things together
  • if you still don’t have a concrete idea, or want to explore the potential of Processing - then we can give you some references that you can work on. Here are some tutorials from Dan which are around image manipulation

Ok, im going to give it one more try with examples of code as well:

Blue lines:

size(400, 400);
line(120, ??, 340, 300);

Red line:

size(400, 400);
line(120, ??, 340, 300);

I want the output to look like this:

This means the starting point of the drawn lines always will be at the graph, no matter the x-value. 

I have watched the videos you posted, and as far as i can see (though im a beginner), I would need to use the updatePixel() - function in some way, and then define the y-value as a function of that again.

Did that make more sense?

Is this what you are trying to do? It’s fairly straight forward: 1) define your baseline 2) draw lines either positive or negative from this point. If you have a complex baseline then you would need the y value for each x value and then draw your lines off of the y value. An array could hold this curve.

int baseline = 300;

void setup() { 

void draw() { 
  line( 0, baseline, width, baseline );
  stroke(255, 0, 0);
  line(100, baseline, 100, baseline + 100);
  stroke(0, 0, 255);
  line(200, baseline, 200, baseline - 150);

Yeah, it is! Thanks!

I think it was the basline-function i was struggeling to explain.

But furter on, I have quite alot of different graphs i need to portrait - so if there is any way i could automatically extract the baseline coordinates from a picture, it would save me a lot of work.

is any way i could automatically extract the baseline coordinates from a picture

Sounds like you want an image outline which is likely non-trivial. I have no experience with this, but others in this forum may have. I would start with a web search if I had to tackle it.

it can be trivial or non trivial depending on the input images - but first of all, I think it would be better to do things step by step. why don’t you make a code based on @svan’s suggestion and share with us for further feedback? otherwise it will end up other people writing your complete code… and that’s not the idea of this forum :slight_smile:

even without reading “graph” images, you can use noise to fake those graphs, for example


If you have a bunch of images like you showed us (pure white background and clean outline) then a quick and dirty way is to scan each column and get the y value corresponding to the curve for that column. I’m using a weighted average in the exemple below.

You can either do it as you go or store the value of each column in an array to be able to refer to it later on.

I’m drawing the image first and the outcome of the algorithm on top in red. As you can see it is really close:

And the code:

PImage img;
float[] baselineY = new float[1080]; // To modify depending on the size of you image

void setup() {
  size(1080, 800);
  img = loadImage("test.png");

  for(int i = 0; i < img.width; i++) {
    int totalWeights = 0;
    int total = 0;
    // Computing weighted average of the column i
    for (int j = 0; j < img.height; j++) {
      int idx = j * img.width + i;
      int w = 255 - (img.pixels[idx] >> 16 & 0xFF); // Taking red channel
      totalWeights += w;
      total += w * j;
    baselineY[i] = total / (float)totalWeights;
  image(img, 0, 0);
  //Drawing the result of the weigthed average
  stroke(255, 0, 0);
  for(int i = 0; i < img.width; i++) {
    point(i, baselineY[i]);

Ok, i tried some stuff now.

I have extracted the x and y values from WebPlotDigitizer, and gotten a .txt files with the different x and y values i want to define the baseline.

I have tried a loadTable-function to get those y and x values in processing and define them as the baseline. This is my current code (which of course doesnt work):

int baseline = everest

void setup(){
everest = loadTable(data.txt);

void draw(){
line(0, baseline, width, baseline);
line (100, baseline, 100,baseline + 100);
line(200,baseline,200, baseline - 150);

Any pointers on how to move on further?

that is a nice, creative solution! you could share the txt file data so it’s easier for others to look at… if it’s not a big file, you can copy&paste it or you can just share the snippet of it.

also when you share txt file or the code, you can use </> button on the editor to format the code.

in the meantime this tutorial may be helpful for you