Texture flickering in p5 - p5.js

Question

I have a scene with a cube and a custom obj. I am attempting to apply a gradient as a texture to the cube via createGraphics, but every time I use createGraphics as a texture on the cube it flickers
The custom model does not have the same issue when using the createGraphics texture for it, it is exclusively a problem with the cube.
Here is my code:
var camy;
var camz;
var camoffset;
var horiZon;
var c1;
var c2;
function preload() {
fria = loadImage('nocity.png');
island = loadModel('untitled.obj');
}
function setup() {
canvas = createCanvas(windowWidth, windowHeight, WEBGL);
pixelDensity=1;
c1 = color(255, 255, 255);
c2 = color(0, 0, 0);
sunset = createGraphics(200, 200);
}
function windowResized() {
resizeCanvas(windowWidth,windowHeight);
}
function draw() {
background(0, 5, 100);
angleMode(DEGREES);
camoffset = 2500 - windowWidth;
horiZon = map(mouseY, 0, height, -35, -65);
camx = map(mouseX, 0, width, -500, 500);
camz = map(mouseY, height, 0, -1400 - camoffset, -2100 - camoffset);
camy = map(mouseY, height, 0, -1000 - camoffset, -400);
setGradient(0, 0, 200, 200, c1, c2);
perspective(PI / 3.0, width / height, 0.1, 10000);
camera(camx, camy, camz, 0, 0, 0, 0, 1, -0.25);
translate(-2.5, 6, 0);
rotateZ(180);
rotateY(180);
noStroke();
texture(fria);
model(island);
texture(sunset);
translate(0, 100, horiZon);
box(200, 200, 1);
}
function setGradient(x, y, w, h, c1, c2) {
noFill();
for (var i = y; i <= y + h; i++) {
var inter = map(i, y, y + h, 0, 1);
var c = lerpColor(c1, c2, inter);
sunset.stroke(c);
sunset.line(x, i, x + w, i);
}
}

Answer 1

I found a solution to this problem. When I removed the camera code, the flickering disappeared. So the solution I made was I instead used translation and rotation to emulate the camera motions that I wanted. It is quite hard to think of it this way, but you can figure out what translation you need to do with simple trig.