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!
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…?
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.
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:
https://ibb.co/YTVgsdf
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.
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
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:
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");
img.loadPixels();
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]);
}
}
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):
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
