Using WebGL (3D Renderer) in createCanvas() disables flipping options
- { flipped : true }
- Diff. coord system: (0,0) is the canvas center in WebGL while it is upper left corner for 2D renderer
create keypoints (points) array, then create another triangle with each 3 points as a set
-
beginShape(TRIANGLES)
function setup() { createCanvas(100, 100); background(200); // Start drawing the shape. // Draw a series of triangles. beginShape(TRIANGLES); // Left triangle. vertex(30, 75); vertex(40, 20); vertex(50, 75); // Right triangle. vertex(60, 20); vertex(70, 75); vertex(80, 20); // Stop drawing the shape. endShape(); describe('Two white triangles drawn on a gray background.'); }
texture() to warp 2D tex into 3D via UV
-
textureMode(NORMAL): normalized UV coord 0-1, useful for 3D mapping instead of “revealing” image underneath
-
OR just load a custom UV map (list of UV coord)
https://editor.p5js.org/jackbdu/sketches/O6BB8iRHv
- Specific to that specific 3D mask mesh