Hi everyone, i am new to processing and so far i’ve found it interesting to use in animating stuff on the web. I’ve come to a point where I want to create a 3D vector, or a surface for testing purposes, however I get a strange phenomenon where any colour on over the canvas blinks in and out. I’ve included a gif to show you what i mean, it’s only part of the screen, but that’s how it looks. I can’t get rid of the flickering.
I am not sure what to use for my canvas, for instance createCanvas(1000, 1000, WEBGL) is what I trying to use with this problem, but not sure if I should be using P3D or SVG for a landscape type of animation on the browser.
My js code is silly, it only generates a grid superficially, as I don’t know of a better method at the moment. If you have any suggestions for this, i would appreciate it. The plane() function wasn’t useful in creating a grid like pattern, maybe i just don’t know how to use it correctly.
function setup() { createCanvas(window.innerWidth, window.innerHeight, WEBGL); }
function draw() { setupGrid(); }
function setupGrid() {
rotate(PI/2);
translate(0, height/2, -height/10);
strokeWeight(1); // looks kinda too thick even set as value 1
for(y = -height/2 ; y <= height/2; y = y + 50){
line(-width/2, y, width/2, y);
}
for(x = -width/2; x <= width/2; x = x + 50){
line(x, -height/2, x, height/2);
}
}
I get this problem: 
If you have any suggestions as to what to use to make a proper, modifiable (procedural, etc), 3d plane with a grid overlay, please inform me 
