vc | P5 inline code

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

click to display the colors.js p5 instance mode codechevron_right

colors.js1linkvar 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

Check the component specs for details.