Hello p5js

Here is the canvas (you should see it if everything goes well and your browser support WEBGL):

I simply added in the jekyll post markdown:

<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
<script src="/blog/assets/js/p5js/mandel.js"></script>
<div id="p5js_canvas_container"> </div>

And added the assets/js/p5js/mandel.js script:

// the 'varying's are shared between both vertex & fragment shaders
let varying = 'precision highp float; varying vec2 vPos;';

// the vertex shader is called for each vertex
let vs =
  varying +
  'attribute vec3 aPosition;' +
  'void main() { vPos = (gl_Position = vec4(aPosition,1.0)).xy; }';

// the fragment shader is called for each pixel
let fs =
  varying +
  'uniform vec2 p;' +
  'uniform float r;' +
  'const int I = 500;' +
  'void main() {' +
  '  vec2 c = p + vPos * r, z = c;' +
  '  float n = 0.0;' +
  '  for (int i = I; i > 0; i --) {' +
  '    if(z.x*z.x+z.y*z.y > 4.0) {' +
  '      n = float(i)/float(I);' +
  '      break;' +
  '    }' +
  '    z = vec2(z.x*z.x-z.y*z.y, 2.0*z.x*z.y) + c;' +
  '  }' +
  '  gl_FragColor = vec4(0.5-cos(n*17.0)/2.0,0.5-cos(n*13.0)/2.0,0.5-cos(n*23.0)/2.0,1.0);' +
  '}';

let mandel;
let p;
function setup() {

  p = document.getElementById('p5js_canvas_container');
  let size = computeSize();
  var cnv = createCanvas(size[0], size[1], WEBGL);
  cnv.parent(p);

  frameRate(30);

  // create and initialize the shader
  mandel = createShader(vs, fs);
  shader(mandel);
  noStroke();

  // 'p' is the center point of the Mandelbrot image
  mandel.setUniform('p', [-0.74364388703, 0.13182590421]);
}

function computeSize() {
  let wi = p.clientWidth;
  let he = 9 / 16 * wi;
  return [wi, he];
}

function windowResized() {
  let size = computeSize();
  resizeCanvas(size[0], size[1]);
}

function draw() {
  // 'r' is the size of the image in Mandelbrot-space
  mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));
  quad(-1, -1, 1, -1, 1, 1, -1, 1);
}

Something I don’t understand about p5js

I would like to be able to use an existing canvas from my html, instead of letting p5js insert it itself. The reason is, I want to guarantee that the page will not extend itself when p5js insert the canvas. It normally does not happen. But I am unsure whether it could happen in some cases? I really hate it when I am browsing a website and then suddenly the page extends itself, making the content in front of my eye shift. Unfortunately, the p5js library does not expect one to use an existing canvas. I guess I could use a container of the same size as the canvas I want to insert, and then insert the canvas…