P5 Canvas and HTML

p5.js Libraries
1

Hi! Quick question about using the P5 canvas with HTML code. I understand that calling createCanvas() creates the element in the HTML side of a website, but how do I reference that canvas in my HTML code in order to move it around or create a UI using Material Design along with P5? In other words, the way you can set up a canvas tag in HTML and then call getElementById in javascript, how do I do the reverse of that? I’ve pasted my code below for reference!

let video;
let poseNet;
let poses = [];
let skeletons = [];
let nose, rightWrist, leftWrist, rightKnee, leftKnee;
let nScore, rwScore, lwScore, rkScore, lkScore;
let song, song2;
let dholButton;
let delay, rev;
let delayTime, lastDelay;

function preload() {
  soundFormats('mp3', 'ogg', 'wav');
  song = loadSound('dhol_main_loop.mp3');
  song2 = loadSound('algoze_silence.wav');
}

function modelLoaded() {
  console.log("Model Loaded");
}

//setup code
function setup() {
  cnv = createCanvas(640, 480);
  cnv.position(75, 75);
  video = createCapture(VIDEO);
  video.size(width, height);

  poseNet = ml5.poseNet(video, modelLoaded);
  poseNet.on('pose', getPoses);
  video.hide();

  delay = new p5.Delay();
  song2.connect();
  delay.process(song2, 0.12, 0.5, 2300);
  delay.setType('pingPong');
  delay.delayTime(0.0);
  delay.amp(0.0);

  rev = new p5.Reverb();
  song.connect();
  rev.process(song, 3, 2);
}

function draw() {
  //mirrors image 
  translate(video.width, 0);
  scale(-1, 1);
  image(video, 0, 0, video.width, video.height);

  //draws dots on nose, wrists, and knees
  drawPoints();

  //delays algoze with LW y-position
  //reverbs dhol with RW x-position
  if (leftWrist) {
    delayAudio();
  } else {
    return;
  }

  if(rightWrist) {
    reverbAudio();
  } else {
    return;
  }

  //pans dhol with nose x-position 
  panning();
}

//identifies body parts using posenet
function getPoses(poses) {
  if(poses.length > 0) {
    let pose = poses[0].pose;

    nose = pose.keypoints[0].position;
    nScore = pose.keypoints[0].score;

    leftWrist = pose.keypoints[9].position;
    lwScore = pose.keypoints[9].score;

    
    rightWrist = pose.keypoints[10].position;
    rwScore = pose.keypoints[10].score;

    /*
    leftKnee = pose.keypoints[13].position;
    lkScore = pose.keypoints[13].score;

    rightKnee = pose.keypoints[14].position;
    rkScore = pose.keypoints[14].score;
    */
  }
}

//draws points on nose, wrists, knees 
function drawPoints() {
  if(nose && nScore > 0.6) {
    stroke(255, 0, 0);
    strokeWeight(15);
    point(nose.x, nose.y);
  }

  if(rightWrist && rwScore > 0.25) {
    stroke(255, 0, 0);
    strokeWeight(15);
    point(rightWrist.x, rightWrist.y); 
  }

  if(leftWrist && lwScore > 0.25) {
    stroke(255, 0, 0);
    strokeWeight(15);
    point(leftWrist.x, leftWrist.y);
  }

  /*
  if((rightKnee && leftKnee) && (rkScore && lkScore > 0.6)) {
    stroke(255, 0, 0);
    strokeWeight(15);
    point(rightKnee.x, rightKnee.y);
    stroke(255, 0, 0);
    strokeWeight(15);
    point(leftKnee.x, leftKnee.y);
  }*/
}

//starts sound files using keyboard keys
function keyPressed() {
  if(keyCode === RIGHT_ARROW && !song.isLooping()) {
    song.loop();
  } else if(keyCode === LEFT_ARROW && !song2.isLooping()) {
    song2.loop();
  } else if(keyCode === 32) {
    song.stop();
    song2.stop();
  }
}

//uses nose to pan dhol 
function panning() {
  if(song.isLooping() && nose) {
    let panning = map(nose.x, 0, width, 1.0, -1.0); //pan right on 1 and left on -1
    song.pan(panning);
  } 
  if(song2.isPlaying() && nose) {
    let panning2 = map(nose.x, 0, width, 1.0, -1.0);
    song2.pan(panning2);
  }
}

//uses left wrist's vertical pos to delay algoze with left arrow click
function delayAudio() {
  const timeElapsedSinceLastDelay = performance.now() - lastDelay;
  if (timeElapsedSinceLastDelay < (delayTime * 1000)) {
    console.log('Skipping delay, not finished yet...');
    return;
  }
  if(leftWrist && lwScore > 0.25) {
      delayTime = map(leftWrist.y, 0, width, 4.0, 0.5);
      delay.delayTime(delayTime);
      lastDelay = performance.now();
      console.log("Delay Time: " + delayTime);
      delay.amp(1.0);
  }
  else {
    delay.delayTime(0.0);
    return;
  }
}

//uses right wrist's horizontal pos to alter dry/wet of dhol
function reverbAudio() {
  if(rightWrist && rwScore > 0.25 && song.isLooping()) {
    let dryWet = constrain(map(rightWrist.x, width, 0, 0, 1), 0, 1); 
    rev.drywet(dryWet);
  } else {
    rev.drywet(0);
    return;
  }
}
2

You can call method id() after the createCanvas():

1 Like
3

also

  cnv = createCanvas(640, 480);
  cnv.elt

gives you the same thing as what you get with getElementById

https://p5js.org/reference/#/p5.Element/elt

1 Like