'Filling' the gaps between lines

General Discussion Other

solrrt

'Filling' the gaps between lines

Answered

Need more info
Answered
Working on it

in General Discussion • Other • 7 months ago

I'm trying to work out the logic for how I'd accomplish this.

Let's say I've got a couple of lines that intersect, like this:
http://farm9.staticflickr.com/8530/8554745759_ffc2b255fa_o.png

I'd like to then fill in the blank spaces like this:
http://farm9.staticflickr.com/8242/8555855632_c6780cf35f_o.png

I know you're probably thinking I should just draw a triangle and fill it, but I'd like to draw many lines, and have the blank spaces filled at random after they intersect.

Should I just use triangles and try to make them aware of where they are relative to each other? Or is there a more obvious solution I'm overlooking?

Replies(18)

asimes

Re: 'Filling' the gaps between lines

7 months ago

You need to define blank spaces more specifically. Based on the image, I can't see any reason why the top and bottom space couldn't have been filled instead of the left and right. Also, there are four "suggested" lines in that image which are the screen edges (to complete the triangles).

If you had lots of lines creating many spaces, which spaces should be filled, and which ones should not?

tfguy44

Re: 'Filling' the gaps between lines

7 months ago

Well you could... Hmm.. no.
Or... No, wait.

Uh...
...
Hmm...

I can tell you this much: There is not a more obvious solution you are overlooking. At least not one I can see.

Questions about your "random" lines:

1) Do they always go from the sketch edge to the other edge?
2) Do they always start on the left edge and end on the right edge?

solrrt

Re: 'Filling' the gaps between lines

7 months ago

@asimes
The four 'suggested' lines are just two that intersect, but I see what you mean.

If I had an image like this, I'd just want to fill the spaces randomly, the trick is defining them first:
http://farm9.staticflickr.com/8102/8554814905_4fb8274503_o.png

@tfguy44
They will always go from edge-to-edge, yes.
And they will always go from right to left, yes.

asimes

Re: 'Filling' the gaps between lines

7 months ago

Just to make sure we understood "suggested" in the same way... there are two lines that cross (the blue ones). You could think about them as four lines if you wanted to (not what I meant earlier). What I meant by suggested were the horizontal and vertical lines that are the screen edges.

Without those, you have two lines / line segments on a plane and mathematically a plane is infinite. That means you can't test the two blue lines as surrounding an area without the screen edges counting as lines.

All of that only matters if you want to do your area checking with geometric information. Another option could be something like a paint-bucket tool. You pick a random pixel on the screen and flood its neighbors unless the neighbor has the color of one of the lines. This will fill random areas with the same color.

tfguy44

Re: 'Filling' the gaps between lines

7 months ago

DAMN.

I tried writing a paint-filling method and I get a "YOU'RE DOING TOO MUCH RECURSION!" error.
I need to sleep on this. I'll have a smarter solution tomorrow.
DAMN DAMN DAMN.

PGraphics b;
void setup() {
size(300, 700);
// Off-screen image for exact boundries.
b = createGraphics(width, height, P2D);
// Array of lines.
PVector[] allLines = new PVector[10];
// Populate array with random lines.
for ( int i = 0; i < allLines.length; i++) {
allLines[i] = new PVector( random(height), random(height), 0 );
}
// Draw off-screen image.
b.beginDraw();
b.background(0);
b.stroke(255);
for ( int i = 0; i < allLines.length; i++) {
b.line( 0, allLines[i].x, width, allLines[i].y );
}
int numSectors = 1;
for ( int i=0; i < numSectors; i++ ) {
int x = int(random(width));
int y = int(random(height));
fillFrom(x, y);
}
b.endDraw();
image( b.get(), 0, 0 );
// Draw scene.
//background(0);
//stroke(255);
//smooth();
//strokeWeight(4);
//for( int i = 0; i < allLines.length; i++){
// line( 0, allLines[i].x, width, allLines[i].y );
//}
//
}
void draw() {
} // Do nothing.
void fillFrom( int x, int y ) {
b.stroke(255, 0, 0);
b.point( x, y);
if ( x-1>0 && b.get(x-1, y) == color(0) ) {
fillFrom( x-1, y );
}
if ( x+1<width && b.get(x+1, y) == color(0) ) {
fillFrom( x+1, y );
}
if ( y-1>0 && b.get(x, y-1) == color(0) ) {
fillFrom( x, y-1 );
}
if ( y+1<height && b.get(x, y+1) == color(0) ) {
fillFrom( x, y+1 );
}
}

kooogy

Re: Re: 'Filling' the gaps between lines

7 months ago

google 'seed fill' (or 'flood fill')

tfguy's is inefficient, which you can probably tell by the error. you only need to check 3 directions for every point after the start point for instance - you know that the point you've come from is already correct.

alternatively, use your own stack.

solrrt

Re: 'Filling' the gaps between lines

7 months ago

@kooogy

A flood fill looks promising. I'll give it a shot!

solrrt

Re: 'Filling' the gaps between lines

7 months ago

I'm playing around with pixels[] and get() right now. How exactly do I interpret what it returns to me?

When I pull the pixels from the white part of an image, it returns -1

When I pull the pixels from the black part of an image, it returns -16777216

tfguy44

Re: 'Filling' the gaps between lines

7 months ago

I wasn't trying for efficiency.

Anyway, the "number" returned by get() is better interpreted as a color.

asimes

Re: 'Filling' the gaps between lines

7 months ago

Print it out as Hexadecimal and use tfguy44's link as reference

solrrt

Re: 'Filling' the gaps between lines

7 months ago

You guys are giving me some great suggestions, and I appreciate it!

I'm learning some of these functions, and I'm wondering why my code below doesn't work. It fills the top half of the canvas with white, the bottom half with black, I loop through and change the top to red, the bottom to green, except it fills it all with green instead. My hex filter isn't working:

color white = color(255);
color black = color(0);
color r = color(255, 0, 0);
color g = color(0, 255, 0);
size(250, 250);
background(125);
noStroke();
// Fill top half with white
fill(white);
rect(0, 0, 250, 125);
// Fill bottom half with black
fill(black);
rect(0, 125, 250, 250);
loadPixels();
for (int i = 0; i < (width*height); i++) {
color b = pixels[i];
// If the pixel color is white, turn it red
if (hex(b) == "FFFFFFFF") {
pixels[i] = r;
}
// If it's anything other than white, turn it green
else {
pixels[i] = g;
}
// output.println(hex(b));
}
updatePixels();

amnon.owed

Re: 'Filling' the gaps between lines

7 months ago

I think asimes' suggestion to use hexadecimal was meant in tandem with the link to help you understand the structure of the color variable in Processing. However you don't need to use hex in your code as such. You can just use your pre-defined variables directly...

Adapted Code

color white = color(255);
color black = color(0);
color r = color(255, 0, 0);
color g = color(0, 255, 0);
size(250, 250);
background(125);
noStroke();
// Fill top half with white
fill(white);
rect(0, 0, 250, 125);
// Fill bottom half with black
fill(black);
rect(0, 125, 250, 250);
loadPixels();
for (int i=0; i<pixels.length; i++) {
color c = pixels[i];
if (c == white) {
pixels[i] = r;
} else {
pixels[i] = g;
}
}
updatePixels();

amnon.owed

Re: 'Filling' the gaps between lines

7 months ago

For what it's worth, here is my attempt...

(press the mouse to restart)

Code Example

int numLines = 10;
HashSet <PVector> Q = new HashSet <PVector> ();
HashSet <PVector> Qadd = new HashSet <PVector> ();
color newCol, bgColor = color(0);
boolean done;
void setup() {
size(400, 700);
drawLines();
}
void draw() {
if (!done) {
while (!Q.isEmpty()) {
Qadd.clear();
loadPixels();
for (PVector p : Q) {
int curX = (int) p.x;
int curY = (int) p.y;
pixels[curX+curY*width] = newCol;
addValidXY(curX+1, curY);
addValidXY(curX-1, curY);
addValidXY(curX, curY+1);
addValidXY(curX, curY-1);
}
updatePixels();
Q.clear();
Q.addAll(Qadd);
}
loadPixels();
for (int i=0; i<pixels.length; i++) {
if (pixels[i]==bgColor) {
newCol = color(random(50, 255), random(50, 255), random(50, 255));
Q.add(new PVector(i%width, i/width));
return;
} else if (i==pixels.length-1) {
done = true;
}
}
}
}
void mousePressed() {
drawLines();
}
void drawLines() {
background(bgColor);
stroke(255);
for (int i=0; i<numLines; i++) {
float y1=random(height);
float y2=y1+random(-200, 200);
line(0, y1, width, y2);
}
done = false;
}
void addValidXY(int x, int y) {
if ((x < 0 || x >= width) || (y < 0 || y >= height)) return;
else if (pixels[x+y*width] != bgColor) return;
else { Qadd.add(new PVector(x, y)); }
}

tfguy44

Re: 'Filling' the gaps between lines

7 months ago

The problem is on line 25. When comparing strings, you need to use .equals():

if ( hex(b).equals("FFFFFFFF") ){

But what you're actually trying to compare at this point is colors, which can be compared directly:

if( b == white ){

This is also a lot easier to read!

solrrt

Re: 'Filling' the gaps between lines

7 months ago

Thanks guys!

solrrt

Re: 'Filling' the gaps between lines

7 months ago

@amnon.owed,

I'm trying to run your method, but I'm getting a "Cannot find a class or type named "HashSet" error.
I'm running the latest beta of Processing, which version did you build that with?

amnon.owed

Re: 'Filling' the gaps between lines

7 months ago

I used Processing 1.5.1 Many default imports have been removed from the latest beta's. Add this line:

import java.util.HashSet;

firstprim

Re: 'Filling' the gaps between lines

6 months ago

Hello all here on this topic. I just posted my own description of the problem.

https://forum.processing.org/topic/filling-an-area-that-is-enclosed-defined-by-randoms-lines

Maybe this gives an input to work out a new way or code in Processing. I wonder that there shall be no function in Processing, like in good old BASIC 20 years ago.

I solved it many years ago different with an algorithm - as I could not use BASIC on the workstation my art should be shown - as it was Unix. The algorithm was to check each 3rd dot moving from left to right, line by line. When the dot was black I changed this to the "fill"-color and the dot right place of it in case it was black also - and same for the dot on left side if it was black.

I am no programmer any more :( but luckily Alzheimer did not hit me until now. I am looking for a smart-code as I want to publish the recoded art with the code *grins

thank you all.

Top Reply