# How to visualise in 2D in processing 1.5 and apply color to points

**URL:** https://discourse.processing.org/t/how-to-visualise-in-2d-in-processing-1-5-and-apply-color-to-points/11996
**Category:** Libraries
**Created:** [June 11, 2019, 10:25pm UTC](https://discourse.processing.org/t/how-to-visualise-in-2d-in-processing-1-5-and-apply-color-to-points/11996 "2019-06-11T22:25:01Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![alice](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@alice](https://discourse.processing.org/u/alice)
#### Post date: [June 11, 2019, 10:25pm UTC](https://discourse.processing.org/t/how-to-visualise-in-2d-in-processing-1-5-and-apply-color-to-points/11996/1 "2019-06-11T22:25:01Z")

</div>

Hi everybody,  
I’m a beginner in processing and I hope someone can help me with a small question… I’ll leave you below the code that I have done ( the name is “test1” and it has a tab with the points, I sent you both).  
The problem is that I can’t visualise the grid of points that I have created at all… I only see the grey window ☹ also how do I apply color to those points?

Hope someone can help…

```auto
import toxi.sim.grayscott.*;
import toxi.math.*;
import controlP5.*;
import peasy.*;
import toxi.geom.*;

GrayScott gs;
ControlP5 controlP5;
ControlWindow controlWindow;

float F01 = 0.023;
float K01 = 0.074;
float DU01 = 0.095;
float DV01 =0.033;

Pt[] grid;

int COLS = 300;
int ROWS = 300;

void setup() {
  size(400, 400);

  controlP5 = new ControlP5(this);
  controlWindow = controlP5.addControlWindow("controlP5Window", 100, 100, 400, 500);
  controlWindow.hideCoordinates();

  Slider s01= controlP5.addSlider("F01", 0, 0.1, 20, 20, 200, 50);
  s01.setWindow(controlWindow);

  Slider s02= controlP5.addSlider("K01", 0, 0.1, 20, 80, 200, 50);
  s02.setWindow(controlWindow);

  Slider s03= controlP5.addSlider("DU01", 0, 0.1, 20, 140, 200, 50);
  s03.setWindow(controlWindow);

  Slider s04= controlP5.addSlider("DV01", 0, 0.1, 20, 200, 200, 50);
  s04.setWindow(controlWindow);

  gs=new GrayScott(COLS, ROWS, true);
  // f - k - dU -dV

  int countX = 0;
  int countY = 0;
  
  float sizeX = 5;
  float sizeY = 5;
  grid = new Pt[COLS*ROWS];
  
  for(int i=0; i < COLS*ROWS; i++){
    
    Vec3D v = new Vec3D(countX * sizeX, countY* sizeY, 0);
    grid[i]= new Pt(v);
    
    countX++;
    if(countX== COLS){
      countY ++;
      countX = 0;
    
    } 
  
  }
}

void draw() {

  gs.setCoefficients(F01, K01, DU01, DV01);

  if (mousePressed) {
    gs.setRect(mouseX, mouseY, 20, 20);
  }

    for(int i=0; i < COLS*ROWS;i++) {
      grid[i].run();
    
    } 
    } 
>

tab : 

<       

class Pt {

  Vec3D loc;

  Pt (Vec3D _loc) {
    loc = _loc;
  }

  void run() {
    display();
  }

  void display() {
    stroke(255, 0, 0);
    point(loc.x, loc.y, loc.z);
  }
}

```

---

<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: [June 11, 2019, 10:45pm UTC](https://discourse.processing.org/t/how-to-visualise-in-2d-in-processing-1-5-and-apply-color-to-points/11996/2 "2019-06-11T22:45:07Z")

</div>

use  
size(400, 400, P3D);

---

<div class="post-metadata">

### Author: ![alice](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@alice](https://discourse.processing.org/u/alice)
#### Post date: [June 11, 2019, 10:48pm UTC](https://discourse.processing.org/t/how-to-visualise-in-2d-in-processing-1-5-and-apply-color-to-points/11996/3 "2019-06-11T22:48:05Z")

</div>

Hi @Chrisir, thanks for your quick reply,

Do you mean in void setup() { . ?  
size(400, 400, P3D);

Also do you know how I can apply color at these points that I have created ?

Thanks a lot

---

<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: [June 11, 2019, 10:48pm UTC](https://discourse.processing.org/t/how-to-visualise-in-2d-in-processing-1-5-and-apply-color-to-points/11996/4 "2019-06-11T22:48:44Z")

</div>

Yes in setup

No to colors

---

<div class="post-metadata">

### Author: ![alice](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@alice](https://discourse.processing.org/u/alice)
#### Post date: [June 11, 2019, 10:50pm UTC](https://discourse.processing.org/t/how-to-visualise-in-2d-in-processing-1-5-and-apply-color-to-points/11996/5 "2019-06-11T22:50:48Z")

</div>

Thanks @Chrisir , will try!

---

<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: [June 11, 2019, 10:56pm UTC](https://discourse.processing.org/t/how-to-visualise-in-2d-in-processing-1-5-and-apply-color-to-points/11996/6 "2019-06-11T22:56:21Z")

</div>

> [@alice](#):
>
> stroke(255, 0, 0);  
> point(loc.x, loc.y, loc.z);

Here you set the color

You could set a variable of type color to a random color at the start of the class and use it in stroke

---

<div class="post-metadata">

### Author: ![zooey105](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/zooey105/32/5535_2.png) [@zooey105](https://discourse.processing.org/u/zooey105)
#### Post date: [June 11, 2019, 11:19pm UTC](https://discourse.processing.org/t/how-to-visualise-in-2d-in-processing-1-5-and-apply-color-to-points/11996/7 "2019-06-11T23:19:38Z")

</div>

> [@alice](#):
>
> void display() {  
> stroke(255, 0, 0);  
> point(loc.x, loc.y, loc.z);  
> }  
> }

As a clarification, you may want to set strokeWeight() in setup if you’re having trouble seeing any results.