hello. nice to meet you.
Is multi-canvas production possible? (In Processing p5 Mode)
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?
Do you mean using p5.js?
Hi
Thank you for your quick reply. thank you.
@jafal
This is what I want.
With your help, my curiosity has been solved.
thank you.
I have one more question for you.
By any chance, if you have the time, I’m curious about your thoughts.
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?
@GWAK hi
Each has its advantages… Your design determines which one is most suitable for your application
Search YouTube for more results
I’m linking a multi-canvas p5js sketch written is CoffeeScript:
https://Self-Avoiding-Walk-II-CoffeeScript.Glitch.me/pages/4p5js.html
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?
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();