linkP5 inline code

Adapted from here.

note that the above sketch code is included within the markdown itself like this:

1link> :P5 width=720, height=560

2link>

3link> function setup() {

4link>   createCanvas(720, 560);

5link>   noStroke();

6link>   noLoop();

7link> }

8link> 

9link> function draw() {

10link>   drawCircle(width / 2, 280, 6);

11link> }

12link> 

13link> function drawCircle(x, radius, level) {

14link>   const tt = (126 * level) / 4.0;

15link>   fill(tt);

16link>   ellipse(x, height / 2, radius * 2, radius * 2);

17link>   if (level > 1) {

18link>     level = level - 1;

19link>     drawCircle(x - radius / 2, radius / 2, level);

20link>     drawCircle(x + radius / 2, radius / 2, level);

21link>   }

22link> }

linkP5 instance mode

Adapted from here.

The markdown of the above sketch looks like this (check the component specs for details):

1link> :P5 sketch=/docs/sketches/colors.js, width=710, height=400

and the colors.js p5 instance mode like this:

colors.js
1linkvar myp5 = new p5((p) => {

2link  let a, b, c, d, e;

3link

4link  p.setup = function () {

5link    p.createCanvas(710, 400);

6link    p.noStroke();

7link    a = p.color(165, 167, 20);

8link    b = p.color(77, 86, 59);

9link    c = p.color(42, 106, 105);

10link    d = p.color(165, 89, 20);

11link    e = p.color(146, 150, 127);

12link    p.noLoop();

13link  }

14link

15link  p.draw = function () {

16link    drawBand(a, b, c, d, e, 0, p.width / 128);

17link    drawBand(c, a, d, b, e, p.height / 2, p.width / 128);

18link  }

19link

20link  function drawBand(v, w, x, y, z, ypos, barWidth) {

21link    let num = 5;

22link    let colorOrder = [v, w, x, y, z];

23link    for (let i = 0; i < p.width; i += barWidth * num) {

24link      for (let j = 0; j < num; j++) {

25link        p.fill(colorOrder[j]);

26link        p.rect(i + j * barWidth, ypos, barWidth, p.height / 2);

27link      }

28link    }

29link  }

30link}, "colors"); // --> the id should be the same file name