Is multi-canvas production possible? (In Processing p5 Mode)

p5.js Coding Questions
1

hello. nice to meet you.

Is multi-canvas production possible? (In Processing p5 Mode)

q_1
q_1898×672 49.6 KB

As you can see from the picture, the position of the canvas is also determined, and the size (size) is determined and placed.

Is it possible to have multiple canvases as above?

2

Do you mean using p5.js?

2 Likes
3

Hi

2 Likes
4

@jafal @quark

Thank you for your quick reply. thank you.

@jafal
This is what I want.
With your help, my curiosity has been solved.
thank you.

1 Like
5

@jafal

I have one more question for you.
By any chance, if you have the time, I’m curious about your thoughts.

ffig
Layout can be composed through ‘css’ like the picture above.
However, I am trying to configure via ‘multiple p5’.

By any chance, which part do you think has advantages and disadvantages?

1 Like
6

@GWAK hi

Each has its advantages… Your design determines which one is most suitable for your application

Search YouTube for more results

1 Like
7

I’m linking a multi-canvas p5js sketch written is CoffeeScript:
https://Self-Avoiding-Walk-II-CoffeeScript.Glitch.me/pages/4p5js.html

2 Likes
8

@GoToLoop

wow, very nice, interesting.

9

@jafal @GoToLoop @quark

Hello. Nice to meet you. How are you all doing?
It’s not different, but I have a question during the testing process.

//------------------------------------------------------------------//
let myp5;
var sketch1_en = false;
//------------------------------------------------------------------//

//------------------------------------------------------------------//
function setup() {
  if(sketch1_en==false){    
    myp5 =  new p5(s1); sketch1_en = true;
  }   
}
//------------------------------------------------------------------//

//------------------------------------------------------------------//
function draw() {  
  if(sketch1_en){if(millis() > 5*1000){
     sketch1_en = false;
     // myp5.hide();  
     myp5.remove();
  }}    
}
//------------------------------------------------------------------//

//------------------------------------------------------------------//
var s1 = function( sketch ) {
  sketch.setup = function() {
    let canvas1 = sketch.createCanvas(100, 100, sketch.WEBGL);
    canvas1.position(0,0);
  }
  sketch.draw = function() {
    //for canvas 1
    sketch.background(100);
    sketch.rotateX(sketch.frameCount * 0.01);
    sketch.rotateZ(sketch.frameCount * 0.01);
    sketch.cone(30, 50);
  }
};
// new p5(s1);
var s2 = function( sketch ) {
   sketch.setup = function() {
    let canvas2 = sketch.createCanvas(100, 100, sketch.WEBGL);
    canvas2.position(100,0);
  }
  sketch.draw = function() {
    //for canvas 2
    sketch.background(100);
    sketch.rotateX(sketch.frameCount * 0.01);
    sketch.rotateZ(sketch.frameCount * 0.02);
    sketch.cone(30, 50);
  }
};
// new p5(s2);
//------------------------------------------------------------------//

‘myp5.remove()’ : execute function
‘myp5.hide()’ : not executed
Why? Do you know why?

10

Method hide() belongs to class p5.Element.

But your global variable myp5 is of datatype p5, which doesn’t have a method hide().

You can instead try out accessing undocumented property _renderer, which is of datatype p5.Renderer, to invoke method hide():

myp5._renderer.hide();

3 Likes
11

@GoToLoop

Thank you.

1 Like