ToxiLibs - Applying a texture to a Voronoi-Triangle?

fridddd

ToxiLibs - Applying a texture to a Voronoi-Triangle?

in Contributed Library Questions • 2 years ago

Hello people,

Title sums it up really. I'm using toxilibs to draw a voronoi diagram and basically i want to use a texture on the triangle2D created by the voronoi diagram but trying to do so results in an error -

- texture() not available with this renderer.

This was without any renderer specified so i've tried P2D, JAVA2D, P3D and OPENGL but all without any luck. My guess is this is because of the toxilibssupport-library somehow so i've tried to bypass that by just getting the vectors from the triangle2D and use those on new vertices (processing native) but that didn't work either. I then tried searching the docs for any mention of textures and triangle2D but again without luck. By now i've ran out of clues or workarounds.

Thanks for any help on this.
FRid

import processing.opengl.*;
import toxi.geom.mesh2d.*;
import toxi.processing.*;
import toxi.geom.*;

ToxiclibsSupport gfx;
Voronoi voronoi = new Voronoi();

PImage img;

int num = 25;
Vec2D[] punt = new Vec2D[num];
Vec2D[] direction = new Vec2D[num];
Vec2D[] loc = new Vec2D[num];

void setup() {
size(600, 600);

gfx = new ToxiclibsSupport(this);
img = loadImage("5.jpg");

for (int i = 0; i < num; i++) {
    direction[i] = new Vec2D(random(0.5,1.5),random(0.5,1.5));
    loc[i] = new Vec2D(random(0,width),random(0,height));
    punt[i] = new Vec2D(loc[i]);
    voronoi.addPoint(punt[i]);
    }

}

void draw() {
background(0);
stroke(255);
strokeWeight(1);
noFill();

voronoi = null;
voronoi = new Voronoi();

for (int i = 0; i < num; i++) {
    loc[i].x = (loc[i].x+direction[i].x) % width;
    loc[i].y = (loc[i].y+direction[i].y) % height;
    punt[i] = new Vec2D(loc[i]);
    voronoi.addPoint(punt[i]);
}

fill(0, 0, 255, 100);
    noStroke();
    for (Vec2D c : voronoi.getSites()) {
      ellipse(c.x, c.y, 5, 5);
    }

stroke(0, 0, 255, 50);
    beginShape(TRIANGLES);
    //texture(img); //Uncommenting this gives me "texture() is not available with this renderer"
    for (Triangle2D t : voronoi.getTriangles()) {

      stroke(255,255,255,30);
      strokeWeight(1);
      //gfx.triangle(t, false);
      gfx.vertex(t.a);
      gfx.vertex(t.b);
      gfx.vertex(t.c);

      stroke(255,0,0);
      strokeWeight(5);
      //gfx.point(t.a);
      //gfx.point(t.b);
      //gfx.point(t.c);
      //println(t.a); Prints x/y-values but can't seem to use them on anything else but the gfx/toxi-stuff
    }
    endShape();
}

Replies(5)

fiveagon

Re: ToxiLibs - Applying a texture to a Voronoi-Triangle?

2 years ago

This is interesting and probably something I want to try in the future. Maybe you can draw into a PGraphics and then use that as an image mask?

PGraphics myTextureMask = createGraphics(width, height, JAVA2D);
gfx = new ToxiclibsSupport(this, myTextureMask);
PImage texture = loadImage("texture.jpg");
texture.mask(myTextureMask);
image(texture, 0, 0);

Remember, a PGraphics is a PImage, so I think you can using it in PImage.mask()

amnon.owed

Re: ToxiLibs - Applying a texture to a Voronoi-Triangle?

2 years ago

The texture() function is only not available for the JAVA2D renderer, which is the default renderer. All other renderers support it. However I would suggest using OPENGL because it's the fastest and the only one that will remain (together with JAVA2D) from 2.0 onwards. The reason you don't see the textures on screen is mainly because you don't use vertices with uv coordinates. These are required for a texture to display correctly. See the example below to get the basic idea. Press the mouse to change the colors.

Code Example

import processing.opengl.*;
import toxi.geom.mesh2d.*;
import toxi.geom.*;
int num = 50;
Vec2D[] loc = new Vec2D[num];
Vec2D[] direction = new Vec2D[num];
PImage img;
Rect r;
void setup() {
size(600, 600, OPENGL);
createTexture();
r = new Rect(0, 0, width, height);
for (int i=0; i<num; i++) initPoint(i);
}
void draw() {
Voronoi voronoi = new Voronoi();
for (int i = 0; i < num; i++) {
loc[i].addSelf(direction[i]);
if (!loc[i].isInRectangle(r)) { initPoint(i); }
voronoi.addPoint(loc[i]);
}
beginShape(TRIANGLES);
texture(img);
for (Triangle2D t : voronoi.getTriangles()) {
vertex(t.a.x, t.a.y, img.width/2, 0);
vertex(t.b.x, t.b.y, 0, img.height);
vertex(t.c.x, t.c.y, img.width, img.height);
}
endShape();
for (Vec2D c : voronoi.getSites()) {
ellipse(c.x, c.y, 5, 5);
}
}
void mousePressed() {
createTexture();
}
void createTexture() {
img = createGraphics(100, 100, P2D);
colorMode(HSB,360,100,100);
float hue = random(360);
for (int y=0; y<img.height; y++) {
for (int x=0; x<img.width; x++) {
int loc = x + y * img.width;
img.pixels[loc] = color(hue-y, random(100), random(100));
}
}
img.updatePixels();
}
void initPoint(int i) {
loc[i] = new Vec2D(width/2, height/2);
direction[i] = Vec2D.randomVector().scale(random(0.5, 1.5));
}

fridddd

Re: ToxiLibs - Applying a texture to a Voronoi-Triangle?

2 years ago

Nice one! Twenty-something years ago that would make for a awesome cd-cover. :)

Feel so stupid to forget the u.v-coordinates and i never should've used the gfx-support, it made things a lot more complex, i thought i needed to use it after a warning/error came up somewhere. much clearer thanks.
Too bad though, i was kinda hoping to also get the vertices on the edges of the screen (essentially quads most of the time).

Thanks for the help guys,
FRid

amnon.owed

Re: ToxiLibs - Applying a texture to a Voronoi-Triangle?

2 years ago

You could use a SutherlandHodgemanClipper, but that would indeed give you some poly's instead of triangles, thus complicating things somewhat. A simpler alternative that still produces triangles and goes all the way to the edges of the screen, is to manually add points to the edges of the screen. See the example below.

Code Example

import processing.opengl.*;
import toxi.geom.mesh2d.*;
import toxi.geom.*;
int num = 50;
Vec2D[] loc = new Vec2D[num];
Vec2D[] direction = new Vec2D[num];
Voronoi voronoi;
PImage img;
Rect r;
void setup() {
size(1280, 720, OPENGL);
createTexture();
r = new Rect(0, 0, width, height);
for (int i=0; i<num; i++) initPoint(i);
}
void draw() {
voronoi = new Voronoi();
for (int i = 0; i < num; i++) {
loc[i].addSelf(direction[i]);
if (!loc[i].isInRectangle(r)) { initPoint(i); }
voronoi.addPoint(loc[i]);
}
addSides(10);
beginShape(TRIANGLES);
texture(img);
for (Triangle2D t : voronoi.getTriangles()) {
Polygon2D p = t.toPolygon2D();
int np = p.getNumPoints();
for (int i=0; i<np; i++) {
Vec2D vec = p.vertices.get(i);
float u = sin(TWO_PI/np)*i*img.width; // incorrect for graphical effect ;-)
float v = cos(TWO_PI/np)*i*img.width;
vertex(vec.x, vec.y, u, v);
}
}
endShape();
}
void mousePressed() {
createTexture();
}
void createTexture() {
img = createGraphics(100, 100, P2D);
colorMode(HSB,360,100,100);
float hue = random(360);
for (int y=0; y<img.height; y++) {
for (int x=0; x<img.width; x++) {
int loc = x + y * img.width;
img.pixels[loc] = color(hue-y, random(100), random(100));
}
}
img.updatePixels();
}
void initPoint(int i) {
loc[i] = new Vec2D(random(width), random(height));
direction[i] = Vec2D.randomVector().scale(random(0.5, 1.5));
}
void addSides(int num) {
int stepW = width/num;
int stepH = height/num;
for (int i=0; i<num; i++) {
ArrayList <Vec2D> vecs = new ArrayList <Vec2D> ();
vecs.add(new Vec2D(i*stepW, 0));
vecs.add(new Vec2D(i*stepW, height));
vecs.add(new Vec2D(0, i*stepH));
vecs.add(new Vec2D(width, i*stepH));
voronoi.addPoints(vecs);
}
Vec2D v = new Vec2D(width, height);
voronoi.addPoint(v);
}

fridddd

Re: ToxiLibs - Applying a texture to a Voronoi-Triangle?

2 years ago

Nice solution yes! I'll take a look at the SutherlandHodgemanClipper-method and see if i can work it out.

Anyway thanks for all the help,
FRid

Top Reply