p5.js getting error: Uncaught TypeError: Cannot read property 'transpose3x3' of null

Question

I have a simple flask website where I have a number of p5.js sketch animations playing, this all works fine. I'm trying to add another sketch but the only difference with this one is that it is using WEBGL, which is what I think I causing the following error to appear:

Uncaught TypeError: Cannot read property 'transpose3x3' of null
    at p5.Matrix.inverseTranspose (p5.js:33125)
    at p5.RendererGL._setMatrixUniforms (p5.js:34058)
    at p5.RendererGL._bindImmediateBuffers (p5.js:33631)
    at p5.RendererGL.endShape (p5.js:33554)
    at p5.endShape (p5.js:17440)
    at p.draw (square.js:55)
    at p5.redraw (p5.js:16560)
    at p5.<anonymous> (p5.js:11593)
    at p5.<anonymous> (p5.js:11489)

I've tried to find related issues but not been able to anything, I'm using p5 instance mode to allow for multiple sketches on one page.

*.html

<html>

<head>
    <title>Pointless Projects </title>
    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;1,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{{url_for('static',filename='stylesheet.css')}}">

    <script src=//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js type="text/javascript"></script>
    <script src=//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/addons/p5.dom.js type="text/javascript"></script>
    <script src=//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/addons/p5.sound.js type="text/javascript"></script>
    <script language="javascript" type="text/javascript" src="{{url_for('static',filename='animations/Rings/libraries/p5.gui.js')}}"></script>
    <script language="javascript" type="text/javascript" src="{{url_for('static',filename='animations/Rings/libraries/quicksettings.js')}}"></script>
    <script type="text/javascript" src="{{url_for('static',filename='animations/Rings/Rings.js')}}"></script>
    <script type="text/javascript" src="{{url_for('static',filename='animations/spinning/spinning.js')}}"></script>
    <script type="text/javascript" src="{{url_for('static',filename='animations/square/square.js')}}"></script>
</head>

<body>
    <div class="page_container">
        <div class="navigation">
            <a href="/">
                <img id="logo" src="{{url_for('static',filename='images/pp.png')}}">
            </a>
        </div>
        <div class="banner">
            <p class=" banner_title">Animation Projects</p>
        </div>

        <div class="animation_panel">
            <div class="animation_container">
                <div id="square"></div>
            </div>
            <div class="animation_controller">
                <p class='basic_font subheading'>Squares</p>
                <div class='canvas_container_template' id="canvas_container_square"></div>
            </div>
        </div>
    </div>

*.js

var sketchThree = function( p ) { 

  p.counter = 0;
  p.r = 0;
  p.g = 0;
  p.b = 0;
  p.rad = 0;
  p.x = 0;
  p.y = 0;
  p.z = 0;
  
  p.setup = function () {
    p.createCanvas(800, 600, p.WEBGL);
    p.angleMode(p.DEGREES);
  };
  
  
  p.draw = function () {
    
  
    
    
    p.background(20);
    p.rotateY(20);
    p.r = p.map(p.sin(p.frameCount ), -1,1,50,255);
    p.g = p.map(p.sin(p.frameCount / 4 ), -1,1,50,255);
    p.b = p.map(p.sin(p.frameCount  / 2), -1,1,50,255);
    p.stroke(p.r,p.g,p.b);
    p.fill(255, 0, 0);
    
    p.counter += 15;
    
    // Generates i number of circles
    for(var i = 0; i < 50; i++){
      
      p.strokeWeight(2);
      // create a custom shape depending on amount of vertices 
      p.beginShape();
      p.noFill();
      //Creating circle shape using the sin and cos rule
      for(var j = 0; j < 360; j+= 90){
        p.rotate(p.cos(p.frameCount + i ) * 0.1);
      //create size between each line
      p.rad = i * 8;
      //Bends vertrices around the cos and sin rule to create a circle 
      p.x = p.rad * p.cos(j);
      p.y = p.rad * p.sin(j);
      
      //movement of the shape on the z axis
      // speed, time between each circle, movment of whole shape (13 20 10) basic
      p.z = (p.sin(p.frameCount * 3 + i * 20) * 150);
      
      p.vertex(p.x,p.y,p.z);
    }
    p.endShape(p.CLOSE);
    }
    
    
  
    
  };
  };
  var myp5 = new p5(sketchThree, 'square');

Answer 1

After hours of searching I finally found this . In short it explains that rotate() does not work well with WEBGL but instead we need to use rotateZ()

p5.js getting error: Uncaught TypeError: Cannot read property 'transpose3x3' of null

Question

1 answers

solution1
0 2021-02-28 14:39:01

p5.js getting error: Uncaught TypeError: Cannot read property 'transpose3x3' of null

Question

1 answers

solution1 0 2021-02-28 14:39:01

solution1
0 2021-02-28 14:39:01