Sketch in a <div>

p5.js Coding Questions
1

hello,
I need to put my sketch (voxel_view_canvas3.js) in a div (id=“canvas_voxel_colors”) where is write CANVAS, but the sketch doesn’t show. What am I doing wrong?

link to the project (p5.js Web Editor)

2

For that you simply invoke method p5.Element::parent() over the p5.Renderer object returned by p5::createCanvas(): :bulb:

  sketch.setup = function() {
    sketch.createCanvas(200, 200).parent('canvas_voxel_colors');

Alternatively you can instead pass the id attribute to the p5’s constructor as its 2nd argument: :sunglasses:

var myp5_3 = new p5(s3, 'canvas_voxel_colors');

However you’ve got much more bugs than that: :beetle:

  • Your <script> tags are incompatible w/ the p5.js Web Editor, b/c they attempt to load libraries as if they were local instead of using some CDN remote link.
  • Also the current order they’re being loaded is prone to cause a script to fail when it’s attempting to access variables from other scripts which haven’t been fully loaded yet.
  • Your main script “voxel_view_canvas3.js” is using p5js instance mode style; which is OK.
  • However your class Voxel_representation inside script “classes_obj.js” is expecting p5js to be in global mode, b/c it attempts to access p5js API directly w/o a p5 reference!
3

thank you so much, I fixed the problem with the canvas position and the class. now it’s working properly.