CODEWITHSUNDEEP
javascriptprocessing
Christopher
Christopher

Reputation: 25

How do I properly display color using p5js?

I'm a novice programmer trying to teach myself p5js and js in general. I was reading from a free online site called "Nature of Code" when I stumbled upon the following problem:

Consider a simulation of paint splatter drawn as a collection of colored dots. Most of the paint clusters around a central location, but some dots do splatter out towards the edges. Can you use a normal distribution of random numbers to generate the locations of the dots? Can you also use a normal distribution of random numbers to generate a color palette?

I managed to get down the position distribution part, but I can't seem to get a normal distribution of a color palette. Here's what I tried to do:

// Practice
// Create a sketch that places random paint splatters with a gaussian
// distribution around the center of the screen
// Uses  Gaussian distribution for color palette
const standard_dev_pos = 60;
const standard_dev_color = 30;
const avg_color_r = 216;
const avg_color_g = 76;
const avg_color_b = 76;
var splatter;

function Splatter() {
  this.x = width/2;
  this.y = height/2;
  this.color = color(0, 0, 0);

  this.set_pos = function() {
    this.x = randomGaussian(width/2, standard_dev_pos);
    this.y = randomGaussian(height/2, standard_dev_pos);
  }
  this.set_color = function() {
    let a = randomGaussian(avg_color_r, standard_dev_color);
    let b = randomGaussian(avg_color_g, standard_dev_color);
    let c = randomGaussian(avg_color_b, standard_dev_color);
    this.color = color(a, b, c);
  }
  this.render = function() {
    stroke(0)
    strokeWeight(5)
    fill(this.color)
    point(this.x, this.y)
  }
}

function setup() {
  createCanvas(720, 360);
  background(155);
  splatter = new Splatter();
}

function draw() {
  splatter.set_pos();
  splatter.set_color();
  splatter.render();
}
<script language="javascript" type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>
<script src="sketch.js"></script>

For some reason though, no matter what I try I can't get the color to vary. Am I missing something obvious? Thanks!

Upvotes: 1

Views: 156

Answers (1)

sam46
sam46

Reputation: 1271

point()'s color is determined by the stroke according to the documentations 

// Practice
// Create a sketch that places random paint splatters with a gaussian
// distribution around the center of the screen
// Uses  Gaussian distribution for color palette
const standard_dev_pos = 60;
const standard_dev_color = 30;
const avg_color_r = 216;
const avg_color_g = 76;
const avg_color_b = 76;
var splatter;

function Splatter() {
  this.x = width/2;
  this.y = height/2;
  this.color = color(0, 0, 0);

  this.set_pos = function() {
    this.x = randomGaussian(width/2, standard_dev_pos);
    this.y = randomGaussian(height/2, standard_dev_pos);
  }
  this.set_color = function() {
    let a = randomGaussian(avg_color_r, standard_dev_color);
    let b = randomGaussian(avg_color_g, standard_dev_color);
    let c = randomGaussian(avg_color_b, standard_dev_color);
    this.color = color(a, b, c);
  }

  this.render = function() {
    stroke(red(this.color), green(this.color), blue(this.color))
    strokeWeight(5)
    point(this.x, this.y)
  }
}

function setup() {
  createCanvas(720, 360);
  background(155);
  splatter = new Splatter();
}

function draw() {
  splatter.set_pos();
  splatter.set_color();
  splatter.render();
}
<script language="javascript" type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>
<script src="sketch.js"></script>

Upvotes: 1

Related Questions