CODEWITHSUNDEEP
javascriptp5.js
ASwedler
ASwedler

Reputation: 33

Unknown 'transpose3x3' Error in p5.js?

I must have made some coding mistake here because I've been tweaking this code and have had it run successfully for the last few weeks. Now it appears that I'm getting an error; I'm not quite sure why. The error disappears when I comment this line (124):

sphere(20);

The error appears as this: 

Uncaught TypeError: Cannot read property 'transpose3x3' of null
    at p5.Matrix.inverseTranspose (p5.js:31017)
    at p5.RendererGL._setMatrixUniforms (p5.js:31953)
    at p5.RendererGL.drawBuffers (p5.js:31676)
    at p5.sphere (p5.js:32444)
    at pointsSphereFibonacci (spheres_4.js:124)
    at draw (spheres_4.js:82)
    at p5.redraw (p5.js:14256)
    at p5.<anonymous> (p5.js:9143)
    at p5.<anonymous> (p5.js:9049)
    at new p5 (p5.js:9320)

Let me know if you have any ideas! Thank you!

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  translate(width / 2, height / 2, -1000);
}

var r = 800;
var n = 1024;
var lon = [];
var lat = [];
var i = 0;

function draw() {
  background(247, 147, 135);
  ambientLight(240, 240, 240);

  push();
  rotateY(-radians(frameCount * .1));
  rotateX(radians(90 + frameCount * .08));
  rotateZ(radians(180 + frameCount * .03));
  pointSphereFibonacci(r, n); // draw sphere equally spaced points
  pop();
}

function pointSphereFibonacci(radius, points) {
  var phi = (sqrt(5) + 1) / 2 - 1; // golden ratio
  var ga = phi * 2 * PI; // golden angle

  for (var i = 0; i < points; i++) {

    lon[i] = ga * i;
    lon[i] /= 2 * PI;
    lon[i] -= floor(lon[i]);
    lon[i] *= 2 * PI;
    if (lon[i] > PI) {
      lon[i] -= 2 * PI;
    }
  }
  var lat = asin(-1 + 2 * i / points);

  for (var i = 0; i < points; i++) {

    push();
    rotateY(lon[i]);
    rotateZ(-lat[i]);
    translate(radius, 0, 0);
    ambientMaterial(5, 0, 223);
    sphere(20);
    pop();

  }
}
 <script src="https://p5js.org/assets/js/p5.min.js"></script>

Upvotes: 1

Views: 228

Answers (1)

alebianco
alebianco

Reputation: 2555

The problem is not the call to sphere but in setting the translations of the sphere

you set rotateZ(-lat[i]); when lat is not an array but a number. That sends a NaN through the calculations that results in a fatal error when trying to render the sphere.

I'm not sure of what you're trying to achieve, but changing that to rotateZ(lat) gets rid of the error and gives a visible result

Upvotes: 2

Related Questions