P5 js 3D texture not loaded on iOS

[jinbread]

Hi, I am trying to make the code below on web and mobile.
As you can see, the web seems to be fine, but when I try to open it on the mobile,
it shows nothing. I assume, there is some problem with loading texture, but no idea how to make it work. Please help me anyone knows how to fix this on mobile! Thanks in advance.

https://editor.p5js.org/jinbread/present/mtnV1FFg-

var x = 0;
var y = 0;
var z = 0;
var a = 0;
var b = 0;
var c = 0;
var d = 0;
var e = 0;
var f = 0;
var g = 0;
var h = 0;
var i = 0;
var j = 0;
var k = 0;

var directionX = 1;
var directionY = 1;
var directionZ = 1;
var directionA = 1;
var directionB = 1;
var directionC = 1;
var directionD = 1;
var directionE = 1;
var directionF = 1;
var directionG = 1;
var directionH = 1;
var directionI = 1;
var directionJ = 1;
var directionK = 1;

var count = 0;

function setup() {
  createCanvas(500, 500, WEBGL);
  // ortho();

  pgA = createGraphics(240, 13);
  pgA.background(254, 100, 54);
  pgA.noStroke();
  pgA.fill(0);
  pgA.rect(30, 0, 180, 13);

  pgB = createGraphics(240, 13);
  pgB.background(254, 100, 54);
  pgB.noStroke();
  pgB.fill(0);
  pgB.rect(162, 0, 48, 13);
  frameRate(60);

}

function draw3Drect(value, order, textures) {
  push();
  translate(0, -98 + order * 13, 0);
  angleMode(DEGREES);
  rotateY(value);
  texture(textures);
  // normalMaterial();
  smooth();
  box(240, 13, 240);
  pop();
}


function draw() {
  background(254, 100, 54);
  
  count += 1;
  // console.log(count);
  
  if(x >= 90) {
    x = 90;
  } else if (x <= 0){
    x= 0;
  }
  
  if(y >= 90) {
    y = 90;
  } else if (y <= 0){
    y= 0;
  }
  
  if(z >= 90) {
    z = 90;
  } else if (z <= 0){
    z = 0;
  }
  
  if(a >= 90) {
    a = 90;
  } else if (a <= 0){
    a = 0;
  }
  

  
  if(b >= 90) {
    b = 90;
  } else if (b <= 0){
    b = 0;
  }
  
  if(c >= 90) {
    c = 90;
  } else if (c <= 0){
    c = 0;
  }
  
  if(d >= 90) {
    d = 90;
  } else if (d <= 0){
    d = 0;
  }
  
  if(e >= 90) {
    e = 90;
  } else if (e <= 0){
    e = 0;
  }
  
  if(f >= 90) {
    f = 90;
  } else if (f <= 0){
    f = 0;
  }
  
  if(g >= 90) {
    g = 90;
  } else if (g <= 0){
    g = 0;
  }
  
  if(h >= 90) {
    h = 90;
  } else if (h <= 0){
    h = 0;
  }
  
  if(i >= 90) {
    i = 90;
  } else if (i <= 0){
    i = 0;
  }
  
  if(j >= 90) {
    j = 90;
  } else if (j <= 0){
    j = 0;
  }
  
  if(k >= 90) {
    k = 90;
  } else if (k <= 0){
    k = 0;
  }


  draw3Drect(x, 1, pgA);
  draw3Drect(y, 2, pgA);
  draw3Drect(z, 3, pgA);
  draw3Drect(a, 4, pgB);
  draw3Drect(b, 5, pgB);
  draw3Drect(c, 6, pgB);
  draw3Drect(d, 7, pgA);
  draw3Drect(e, 8, pgA);
  draw3Drect(f, 9, pgA);

  draw3Drect(g, 10, pgB);
  draw3Drect(h, 11, pgB);
  draw3Drect(i, 12, pgB);
  draw3Drect(j, 13, pgB);
  draw3Drect(k, 14, pgB);



  setTimeout(function() {
    if(count%540 <= 90 && count%540 > 0) {
      directionX = 1;
    } else if (count%540 > 90 && count%540 <= 270){
      directionX = 0;
    } else if (count%540 > 270 && count%540 <= 360) {
      directionX = -1;
    } else if (count%540 > 360 && count%540 < 540 || count%540 == 0){
      directionX = 0;
    }
    
    x += directionX * 1;

  }, 0);

  setTimeout(function() {
    if(count%540 <= 105 && count%540 > 15) {
      directionY = 1;
    } else if (count%540 > 105 && count%540 <= 285){
      directionY = 0;
    } else if (count%540 > 285 && count%540 <= 375) {
      directionY = -1;
    } else if (count%540 > 375 || count%540 <= 15){
      directionY = 0;
    }
    
    y += directionY * 1;

  }, 250);

  setTimeout(function() {
    if(count%540 <= 120 && count%540 > 30) {
      directionZ = 1;
    } else if (count%540 > 120 && count%540 <= 300){
      directionZ = 0;
    } else if (count%540 > 300 && count%540 <= 390) {
      directionZ = -1;
    } else if (count%540 > 390 || count%540 <= 30){
      directionZ = 0;
    }
    
    z += directionZ * 1;
  }, 500);

  setTimeout(function() {
    if(count%540 <= 135 && count%540 > 45) {
      directionA = 1;
    } else if (count%540 > 135 && count%540 <= 315){
      directionA = 0;
    } else if (count%540 > 315 && count%540 <= 405) {
      directionA = -1;
    } else if (count%540 > 405 || count%540 <= 45){
      directionA = 0;
    }
    
    a += directionA * 1;
  }, 750);

  setTimeout(function() {
    if(count%540 <= 150 && count%540 > 60) {
      directionB = 1;
    } else if (count%540 > 150 && count%540 <= 330){
      directionB = 0;
    } else if (count%540 > 330 && count%540 <= 420) {
      directionB = -1;
    } else if (count%540 > 420 || count%540 <= 60){
      directionB = 0;
    }
    
    b += directionB * 1;
  }, 1000);

  setTimeout(function() {
    if(frameCount%540 <= 165 && frameCount%540 > 75) {
      directionC = 1;
    } else if (frameCount%540 > 165 && frameCount%540 <= 345){
      directionC = 0;
    } else if (frameCount%540 > 345 && frameCount%540 <= 435) {
      directionC = -1;
    } else if (frameCount%540 > 435 || frameCount%540 <= 75){
      directionC = 0;
    }
    
    c += directionC * 1;
  }, 1250);

  setTimeout(function() {
    if(frameCount%540 <= 180 && frameCount%540 > 90) {
      directionD = 1;
    } else if (frameCount%540 > 180 && frameCount%540 <= 360){
      directionD = 0;
    } else if (frameCount%540 > 360 && frameCount%540 < 450 || frameCount%360 == 0) {
      directionD = -1;
    } else if (frameCount%540 > 450 || frameCount%540 <= 90){
      directionD = 0;
    }
    
    d += directionD * 1;
  }, 1500);

  setTimeout(function() {
    if(frameCount%540 <= 195 && frameCount%540 > 105) {
      directionE = 1;
    } else if (frameCount%540 > 195 && frameCount%540 <= 375){
      directionE = 0;
    } else if (frameCount%540 > 375 && frameCount%540 <= 465) {
      directionE = -1;
    } else if (frameCount%540 > 465 || frameCount%540 <= 105){
      directionE = 0;
    }
    
    e += directionE * 1;
  }, 1750);

  setTimeout(function() {
    if(frameCount%540 <= 210 && frameCount%540 > 120) {
      directionF = 1;
    } else if (frameCount%540 > 210 && frameCount%540 <= 390){
      directionF = 0;
    } else if (frameCount%540 > 390 && frameCount%540 <= 480) {
      directionF = -1;
    } else if (frameCount%540 > 480 || frameCount%540 <= 120){
      directionF = 0;
    }
    
    f += directionF * 1;
  }, 2000);

  setTimeout(function() {
     if(frameCount%540 <= 225 && frameCount%540 > 135) {
      directionG = 1;
    } else if (frameCount%540 > 225 && frameCount%540 <= 405){
      directionG = 0;
    } else if (frameCount%540 > 405 && frameCount%540 <= 495) {
      directionG = -1;
    } else if (frameCount%540 > 495 || frameCount%540 <= 135){
      directionG = 0;
    }
    
    g += directionG * 1;
  }, 2250);

  setTimeout(function() {
    if(frameCount%540 <= 240 && frameCount%540 > 150) {
      directionH = 1;
    } else if (frameCount%540 > 240 && frameCount%540 <= 420){
      directionH = 0;
    } else if (frameCount%540 > 420 && frameCount%540 <= 510) {
      directionH = -1;
    } else if (frameCount%540 > 510 || frameCount%540 <= 150){
      directionH = 0;
    }
    
    h += directionH * 1;
  }, 2500);

  setTimeout(function() {
    if(frameCount%540 <= 255 && frameCount%540 > 165) {
      directionI = 1;
    } else if (frameCount%540 > 255 && frameCount%540 <= 435){
      directionI = 0;
    } else if (frameCount%540 > 435 && frameCount%540 <= 525) {
      directionI = -1;
    } else if (frameCount%540 > 525 || frameCount%540 <= 165){
      directionI = 0;
    }
    
    i += directionI * 1;
  }, 2750);

  setTimeout(function() {
    if(frameCount%540 > 180 && frameCount%540 <= 270) {
      directionJ = 1;
    } else if (frameCount%540 > 270 && frameCount%540 <= 450){
      directionJ = 0;
    } else if (frameCount%540 > 450 && frameCount%540 < 540 || frameCount%540 == 0) {
      directionJ = -1;
    } else if (frameCount%540 > 0 && frameCount%540 <= 180){
      directionJ = 0;
    }
    
    j += directionJ * 1;
  }, 3000);

  setTimeout(function() {
    if(frameCount%540 > 195 && frameCount%540 <= 285) {
      directionK = 1;
    } else if (frameCount%540 <= 465 && frameCount%540 > 285 ){
      directionK = 0;
    } else if (frameCount%540 > 465 || frameCount%540 <= 15) {
      directionK = -1;
    } else if (frameCount%540 > 15 && frameCount%540 <= 195){
      directionK = 0;
    }
    
    k += directionK * 1;
  }, 3250);
  

}

[jeremydouglass]

Possibly a javascript compile error that passes on your desktop, but not mobile? See related dicussion:

Why does my p5js game not work for iPhones?

So I got everything to display on my iPhone 4 by eliminating two js bugs. First I had a couple functions which I set a default value for the parameters. Apparently this is a no-no in js but Android and PC let it slide. If you use default params in js they have to be of the ‘null / false’ variety. Second, I used a few for loops of the following variety: for (let card of cards) { card.x++; } These didn’t work and I switched them to: for (var i = 0; i < cards.length - 1; i++) { cards[…

If not, a quick test: If you change draw3Ddirect, does the sketch display something on iOS? For example, try using it to draw simple boxes without textures, or to draw 2D shapes. My guesses to start looking would be some issue with iOS and texture, renderer, or specific canvas / PGraphics sizes / aspect ratios.

How are you viewing it on iOS – through the editor link?