Creating a grid on a flat surface (plane or otherwise)

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() {
    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: 2020-07-20 17.20.58

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 :slight_smile:

this should help you out

1 Like

thank you :slight_smile:

The gif shows a grid but a flickering background of 3 stripes. I can’t see them in your code.

Is the grid the issue or the large stripes?