如何使用 p5 创建多个画布? [英] How to create more than one canvas with p5?
本文介绍了如何使用 p5 创建多个画布?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想尝试一些 3 维立体透视,我需要 2 个画布,但我什么也没找到.
我尝试使用 canvas1.background(200);
函数设置() {让 canvas1 = createCanvas(100, 100);canvas1.position(0,0);}函数绘制(){//对于画布1背景(100);旋转X(帧计数* 0.01);旋转Z(帧计数* 0.01);锥体(30, 50);}功能设置(){让 canvas2 = createCanvas(100, 100);canvas2.position(100,0);}函数绘制(){//对于画布2背景(100);旋转X(帧计数* 0.01);旋转Z(帧计数* 0.02);锥体(30, 50);}
解决方案
要使用多个画布,您需要使用 实例模式
与您的代码的主要区别在于,每组 p5.js 方法都将位于一个函数内部,并且所有对 p5.js 方法的调用都需要由传递给该函数的 p5 实例调用.
var s1 = function( sketch ) {草图.setup = 函数(){让 canvas1 = sketch.createCanvas(100, 100, sketch.WEBGL);canvas1.position(0,0);}草图.绘制 = 函数(){//对于画布1草图背景(100);Sketch.rotateX(sketch.frameCount * 0.01);Sketch.rotateZ(sketch.frameCount * 0.01);Sketch.cone(30, 50);}};//创建 p5 的新实例并传入草图 1 的函数新的 p5(s1);var s2 = 函数(草图){草图.setup = 函数(){让 canvas2 = sketch.createCanvas(100, 100, sketch.WEBGL);canvas2.position(100,0);}草图.绘制 = 函数(){//对于画布2草图背景(100);Sketch.rotateX(sketch.frameCount * 0.01);Sketch.rotateZ(sketch.frameCount * 0.02);Sketch.cone(30, 50);}};//创建 p5 的第二个实例并传入草图 2 的函数新的 p5(s2);
<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js'></script><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
预>
I want to try some things with stereoscopy in 3 dimensions and I need 2 canvas but I find nothing.
I've tried to use canvas1.background(200);
function setup() {
let canvas1 = createCanvas(100, 100);
canvas1.position(0,0);
}
function draw() {
//for canvas 1
background(100);
rotateX(frameCount * 0.01);
rotateZ(frameCount * 0.01);
cone(30, 50);
}
function setup() {
let canvas2 = createCanvas(100, 100);
canvas2.position(100,0);
}
function draw() {
//for canvas 2
background(100);
rotateX(frameCount * 0.01);
rotateZ(frameCount * 0.02);
cone(30, 50);
}
解决方案
To use multiple canvases you will need to use instance mode
The main difference from your code is that each set of p5.js methods will be inside of a function and all calls to p5.js methods will need to be called by the instance of p5 that is passed into the function.
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);
}
};
// create a new instance of p5 and pass in the function for sketch 1
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);
}
};
// create the second instance of p5 and pass in the function for sketch 2
new p5(s2);
<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
这篇关于如何使用 p5 创建多个画布?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文