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

**URL:** <https://discourse.processing.org/t/creating-a-grid-on-a-flat-surface-plane-or-otherwise/22753>\
**Category:** Coding Questions\
**Created:** [July 20, 2020, 10:43pm UTC](https://discourse.processing.org/t/creating-a-grid-on-a-flat-surface-plane-or-otherwise/22753 "2020-07-20T22:43:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![redthanos](https://avatars.discourse-cdn.com/v4/letter/r/b5e925/32.png) [@redthanos](https://discourse.processing.org/u/redthanos)\
**Post date:** [July 20, 2020, 10:43pm UTC](https://discourse.processing.org/t/creating-a-grid-on-a-flat-surface-plane-or-otherwise/22753/1 "2020-07-20T22:43:53Z")

</div>

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.

```auto
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: ![2020-07-20 17.20.58](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/00efa97b25bf95e897663bea0693c4fbfcfbdb6f.gif)

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 🙂

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 21, 2020, 1:40pm UTC](https://discourse.processing.org/t/creating-a-grid-on-a-flat-surface-plane-or-otherwise/22753/2 "2020-07-21T13:40:43Z")

</div>

this should help you out

[![](https://img.youtube.com/vi/FWSR_7kZuYg/maxresdefault.jpg "Coding Challenge #85: The Game of Life") ](https://www.youtube.com/watch?v=FWSR_7kZuYg)

[![](https://img.youtube.com/vi/IKB1hWWedMk/maxresdefault.jpg "Coding Challenge 11: 3D Terrain Generation with Perlin Noise in Processing") ](https://www.youtube.com/watch?v=IKB1hWWedMk)

https://www.youtube.com/embed/v7yyZZjF1z4?feature=oembed&wmode=opaque&list=PLFt_AvWsXl0eZgMK_DT5_biRkWXftAOf9

---

<div class="post-metadata">

**Author:** ![redthanos](https://avatars.discourse-cdn.com/v4/letter/r/b5e925/32.png) [@redthanos](https://discourse.processing.org/u/redthanos)\
**Post date:** [July 21, 2020, 2:14pm UTC](https://discourse.processing.org/t/creating-a-grid-on-a-flat-surface-plane-or-otherwise/22753/3 "2020-07-21T14:14:07Z")

</div>

thank you 🙂

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 22, 2020, 7:57am UTC](https://discourse.processing.org/t/creating-a-grid-on-a-flat-surface-plane-or-otherwise/22753/4 "2020-07-22T07:57:36Z")

</div>

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?