Adding Texture(img);

Processing Coding Questions
1

Hey There peeps.

I’m trying stuff out on the file from the Codingtrain’s SuperShape and i’m trying to add a texture(image) on the object instead of giving it a color. I tried to load in an image and set it up as a texture but i doesn’t work. Anybody an idea what is wrong with it, or can point out what i need to do!

Thanks for the help already!!

import peasy.*;
PeasyCam cam;

PVector[][] globe;
// RESOLUTIE -- < ++
int total = 25;

float offset = 0;

float m = 0;
float mchange = 0;

PImage img;


void setup() {
  size(600, 600, P3D);
  img = loadImage("test.jpg");
  //CAMERA ZOOM
  cam = new PeasyCam(this, 200);
  colorMode(HSB);
  globe = new PVector[total+1][total+1];
}

float a = 1;
float b = 1;

float supershape(float theta, float m, float n1, float n2, float n3) {
  float t1 = abs((1/a)*cos(m * theta / 4));
  t1 = pow(t1, n2);
  float t2 = abs((1/b)*sin(m * theta/4));
  t2 = pow(t2, n3);
  float t3 = t1 + t2;
  float r = pow(t3, - 1 / n1);
  return r;
}


void draw() {
  m = map(sin(mchange), -1, 1, 0, 7);
  mchange += 0.02;
  background(0);
  noStroke();
  lights();
  float r = 50;
  for (int i = 0; i < total+1; i++) {
    float lat = map(i, 0, total, -HALF_PI, HALF_PI);
    float r2 = supershape(lat, 5, 8, 5.344, 2);
    //float r2 = supershape(lat, 2, 10, 10, 10);
    for (int j = 0; j < total+1; j++) {
      float lon = map(j, 0, total, -PI, PI);
      float r1 = supershape(lon, m, 14, 30.2539, 0.5);
      //float r1 = supershape(lon, 8, 60, 100, 30);
      float x = r * r1 * cos(lon) * r2 * cos(lat);
      float y = r * r1 * sin(lon) * r2 * cos(lat);
      float z = r * r2 * sin(lat);
      globe[i][j] = new PVector(x, y, z);
    }
  }

  stroke(255);
  //fill(255);
  noFill();
  //image(img, 0, 0);
  offset += 1;
  for (int i = 0; i < total; i++) {
    //float hu = map(i, 0, total, 0, 255*6);
    //fill((hu + offset) % 255, 255, 255);
    beginShape(TRIANGLE_STRIP);
  texture(img);
    for (int j = 0; j < total+1; j++) {
      PVector v1 = globe[i][j];
      vertex(v1.x, v1.y, v1.z);
      PVector v2 = globe[i+1][j];
      vertex(v2.x, v2.y, v2.z);
    }
    endShape();
  }
}
1 Like
2

It could be that you’re using the 3 parameter version of vertex() rather than the 5 parameter version. The last two parameters are texture coordinates.

https://processing.org/reference/vertex_.html

1 Like
3

I can’t tell of that is the problem or not. When i run the program, it gave me an error that the PImage cannot be resolved to a variable.

4

@vanoevelenstef===
and it is exact: your img is not a variable…Now, you are also calling texture() BEFORE beginShape(): that cannot work.

1 Like
5

I think i figured it out why it isn’t a variable and made some changes and now it’s a variable. It doesn’t show the error anymore but the texture() still doesn’t work even with the updates the suggested…

6

Good catch @vanoevelenstef - missed the obvious when I first glanced and replied earlier. Yes you need to have the “global” img variable, and assign the result of loadImage to it, which I see from the edited first post you seem to have done? Now try the 5-arg vertex calls!

If you’re still having difficulty, try playing with a simpler example of this first, such as https://processing.org/examples/texturequad.html

7

Hey @neilcsmith!

I tried the 5-arg vertex calls, and even tried the texturequad for hours and hours. Still no result or any progress. I also tried just to draw a sphere and load an image an texture it and i didn’t manage that. Any other tips you can give me to place text on the object.

I’m just trying to experiment and learning about processing, so i can make kinetic typography. And i think the best way to this is to draw shapes in processing and adding images of fonts over it. I think that is the best and only way! Hopefully you can give me some advice!

8

This doesn’t speak to your specific shader question, but if you are interested in kinetic typography solutions in general there is an extensive tutorial series here on Generative Typography with Processing.

https://www.creativeapplications.net/processing/generative-typography-processing-tutorial/

They are Processing 2 examples, but the libraries – Geomerative – is available for Processing 3 through Contributions Manager. Also an old post on using the library for generative design here: http://brunoimbrizi.com/unbox/2011/10/processing-typography/ …and another gallery of some animated / dynamic sketches created using it: http://www.syedrezaali.com/generative-typography-experiments/

You may also be interested in Fontastic! It lets you create glyphs or animated glyphs and then use them like standard PFonts.

http://code.andreaskoller.com/libraries/fontastic/

…finally, NextText is out of date, but might be worth a look – it is Processing 2, but explicitly for dynamic typography.