​

var reflist = [  // print it and have the links in console click-able

  'https://github.com/processing/p5.js/wiki/p5.js-overview#why-cant-i-assign-variables-using-p5-functions-and-variables-before-setup',

  'https://p5js.org/reference/#/p5/color',

  'https://discourse.processing.org/t/hex-color-in-p5js-web-editor/9762/3' ]

​

function link_info() { // Open your console to see the output

  for (var t=0; t< reflist.length;t++) print(reflist[t]);

}

new p5();                      // use this 'trick' for declare colors global

let c1 = color('rgb(0, 0, 255)');

let c2 = color('rgba(0, 225, 0, 0.5)');

let cb = color('#abcdef');

let cs = color(200,0,0);

​

function setup() {

  createCanvas(400, 400);

  strokeWeight(10);           // funny, text stroke only half of rect stroke

  stroke(cs);

  noLoop();

  link_info();

}

​

function draw() {

  background(cb);

  fill(cb);                   // make text look transparent

  textSize(150);

  text("test",30,150);

  fill(c1);

  rect(width / 2, height / 2, 50, 50);

  fill(c2);

  rect(width / 2+20, height / 2+20, 100, 100);

}

​