Need help regarding UV mapping of Octahedron

p5.js Coding Questions
1

I need some help with UV mapping an octahedron. Here’s my code :

  let w = 0;
  let h = 0;
  let th = 400;
  
  beginShape();
  	vertex(w - side, h - side, 0, 0, 1);
  	vertex(w + side, h - side, 0, 0, 0);
  	vertex(w, h, th, 0.5, 1);

   	vertex(w + side, h - side, 0, 0, 1);
  	vertex(w + side, h + side, 0, 0.5, 0);
  	vertex(w, h, th, 0.5, 1);

  	vertex(w + side, h + side, 0, 0, 1);
  	vertex(w - side, h + side, 0, 0, 0);
  	vertex(w, h, th, 0.5, 1);

   	vertex(w - side, h - side, 0, 0, 1);
  	vertex(w - side, h + side, 0, 0, 0);
  	vertex(w, h, th, 0.5, 1);
  
  	vertex(w - side, h - side, 0, 0 , 1);
  	vertex(w + side, h - side, 0, 0, 0);
  	vertex(w, h, -th, 0.5, 0);

  	vertex(w + side, h - side, 0, 0, 1);
  	vertex(w + side, h + side, 0, 0, 0);
  	vertex(w, h, -th, 0.5, 0);

  	vertex(w + side, h + side, 0, 0, 1);
  	vertex(w - side, h + side, 0, 0, 0);
  	vertex(w, h, -th, 0.5, 0);

  	vertex(w - side, h - side, 0, 0, 1);
  	vertex(w - side, h + side, 0, 0, 0);
  	vertex(w, h, -th, 0.5, 0);
  endShape(CLOSE);
2

this isn’t the entire / working code right? I’m currently on my phone but might have done time to check this out when I get home. :slight_smile:

I’m assuming you want to apply a texture to the octahedron right? You could watch Shiffman’s video on this in p5js :slight_smile: https://youtu.be/O1mYw-3Wl_Q

3

No the texture works fine. The issue is am not able to set UV mappings. As I built the octahedron using vertices, we would need to set UV points to all those vertices (4th and 5th argument to be passed in vertex()). Without it, I can’t apply material to the octahedron. Hope am clear. :sweat_smile:

4

You could take x and y coordinates you use for every point also as the UV coordinates. The uvsize variable is to adjust if the result texture gets too big or too small.

  let w = 0;
  let h = 0;
  let th = 400;
  
  let uvsize = 1;
  beginShape();
  	vertex(w - side, h - side, 0, (w - side)*uvsize, (h - side)*uvsize);
  	vertex(w + side, h - side, 0, (w + side)*uvsize, (h - side)*uvsize));
  	vertex(w, h, th, w*uvsize, h*uvsize);

   	vertex(w + side, h - side, 0, (w + side)*uvsize, (h - side)*uvsize));
  	vertex(w + side, h + side, 0, (w + side)*uvsize, (h + side)*uvsize));
  	vertex(w, h, th, w*uvsize, h*uvsize);

  	vertex(w + side, h + side, 0, (w + side)*uvsize, (h + side)*uvsize));
  	vertex(w - side, h + side, 0, (w - side)*uvsize, (h + side)*uvsize));
  	vertex(w, h, th, w*uvsize, h*uvsize);

   	vertex(w - side, h - side, 0, (w - side)*uvsize, (h - side)*uvsize));
  	vertex(w - side, h + side, 0, (w - side)*uvsize, (h + side)*uvsize));
  	vertex(w, h, th, w*uvsize, h*uvsize);
  
  	vertex(w - side, h - side, 0, (w - side)*uvsize, (h - side)*uvsize));
  	vertex(w + side, h - side, 0, (w + side)*uvsize, (h - side)*uvsize));
  	vertex(w, h, th, w*uvsize, h*uvsize);

  	vertex(w + side, h - side, 0, (w + side)*uvsize, (h - side)*uvsize));
  	vertex(w + side, h + side, 0, (w + side)*uvsize, (h + side)*uvsize));
  	vertex(w, h, th, w*uvsize, h*uvsize);

  	vertex(w + side, h + side, 0, (w + side)*uvsize, (h + side)*uvsize));
  	vertex(w - side, h + side, 0, (w - side)*uvsize, (h + side)*uvsize));
  	vertex(w, h, th, w*uvsize, h*uvsize);

  	vertex(w - side, h - side, 0, (w - side)*uvsize, (h - side)*uvsize));
  	vertex(w - side, h + side, 0, (w - side)*uvsize, (h + side)*uvsize));
  	vertex(w, h, -th, 0.5, 0);
  endShape(CLOSE);
5

It still doesn’t work. Here’s the entire code.


var side = 200, th = 400, tex;

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  camera(0, 0, (height) / tan(PI*30.0 / 180.0), 0, 0, 0, 0, 1, 0);
}

function draw() {
  background(200);
  orbitControl();
  strokeWeight(10);
  normalMaterial();
  ambientLight(255, 255, 255);
  
  let w = 0;
  let h = 0;
  
  
  let uvsize = 1;
  beginShape();
  	vertex(w - side, h - side, 0, (w - side)*uvsize, (h - side)*uvsize);
  	vertex(w + side, h - side, 0, (w + side)*uvsize, (h - side)*uvsize);
  	vertex(w, h, th, w*uvsize, h*uvsize);

   	vertex(w + side, h - side, 0, (w + side)*uvsize, (h - side)*uvsize);
  	vertex(w + side, h + side, 0, (w + side)*uvsize, (h + side)*uvsize);
  	vertex(w, h, th, w*uvsize, h*uvsize);

  	vertex(w + side, h + side, 0, (w + side)*uvsize, (h + side)*uvsize);
  	vertex(w - side, h + side, 0, (w - side)*uvsize, (h + side)*uvsize);
  	vertex(w, h, th, w*uvsize, h*uvsize);

   	vertex(w - side, h - side, 0, (w - side)*uvsize, (h - side)*uvsize);
  	vertex(w - side, h + side, 0, (w - side)*uvsize, (h + side)*uvsize);
  	vertex(w, h, th, w*uvsize, h*uvsize);
  
  	vertex(w - side, h - side, 0, (w - side)*uvsize, (h - side)*uvsize);
  	vertex(w + side, h - side, 0, (w + side)*uvsize, (h - side)*uvsize);
  	vertex(w, h, -th, w*uvsize, h*uvsize);

  	vertex(w + side, h - side, 0, (w + side)*uvsize, (h - side)*uvsize);
  	vertex(w + side, h + side, 0, (w + side)*uvsize, (h + side)*uvsize);
  	vertex(w, h, -th, w*uvsize, h*uvsize);

  	vertex(w + side, h + side, 0, (w + side)*uvsize, (h + side)*uvsize);
  	vertex(w - side, h + side, 0, (w - side)*uvsize, (h + side)*uvsize);
  	vertex(w, h, -th, w*uvsize, h*uvsize);

  	vertex(w - side, h - side, 0, (w - side)*uvsize, (h - side)*uvsize);
  	vertex(w - side, h + side, 0, (w - side)*uvsize, (h + side)*uvsize);
  	vertex(w, h, -th, w*uvsize, h*uvsize);
  endShape(CLOSE);
  
}