P5 尝试分解图形和 Canvas 代码

Question

我想分解在图形或标准中绘制相同内容的代码 canvas。
（在我的真实程序中，我想要自主 class 在构建时给定的某些上下文中绘制自己）
我无法从 canvas 中找到可以匹配除 line.
以外的图形指令的等效项在下文中，我尝试为绘图方法 someDraw 提供 canvas 或图形对象，但 canvas 上只出现线条，而整个绘图出现在图形中。


let canvas;
let myGraph;

function setup() {
    canvas = createCanvas(200,300,WEBGL);
    canvas.parent('sketch-div');
    myGraph = createGraphics(200,300,WEBGL);
    stroke('red');
    noFill();
    noLoop();
}

function draw(){
    // direct draw on canvas / doesn't work correctly
    someDraw(canvas);
    // indirect draw on graphics, then show image 
    someDraw(myGraph);
    // show result
    image(myGraph,100,100);
}

function someDraw(pg){
 pg.clear();
 pg.background(color(0,0,200));

  // as webgl set 0,0 upper left 
 pg.translate(-pg.width/2, -pg.height/2);
 pg.stroke('red');
 pg.line(0,0,100,50);
 pg.rect(0,0,60,60);
 pg.ellipse (25,50,50,100);
}

您可以看到 canvas 中绘制的（红色）线，但看不到矩形或椭圆。图形是正确的。

另一个影响：如果这个小程序循环（请参阅设置中的 noLoop()），图形第一次出现时稍纵即逝，然后不再显示。

所以，canvas 和图形不在同一层次结构中，但是有没有一种通用的方法可以在不复制所有代码的情况下同时绘制两者？

Answer 1

使用Instantiation:

var sketch = function( p ) {
    
    let canvas;
    let myGraph;

    p.setup = function() {
        canvas = p.createCanvas(200,300, p.WEBGL);
        canvas.parent('sketch-div');
        myGraph = p.createGraphics(200,300,p.WEBGL);        
        p.noLoop();
    }

    p.draw = function(){
        // [...]
    }
}

var test_3d = new p5(sketch);

将 p5 实例传递给 someDraw

someDraw(p);

或 p5.Renderer 对象：

someDraw(myGraph);

完整示例：

var sketch = function( p ) {
    let canvas;
    let myGraph;

    p.setup = function() {
        canvas = p.createCanvas(200,300,p.WEBGL);
        canvas.parent('sketch-div');
        myGraph = p.createGraphics(200,300,p.WEBGL);        
        p.noLoop();
    }

    p.draw = function(){
        // direct draw on canvas / doesn't work correctly
        someDraw(p);
        // indirect draw on graphics, then show image 
        someDraw(myGraph);
        // show result
        p.image(myGraph,100,100);
    }

    function someDraw(pg){
        pg.clear();
        pg.background(pg.color(0,0,200));
        // as webgl set 0,0 upper left 
        pg.translate(-pg.width/2, -pg.height/2);
        pg.stroke('red');
        pg.noFill();
        pg.line(0,0,100,50);
        pg.rect(0,0,60,60);
        pg.ellipse (25,50,50,100);
    }
}

var test_3d = new p5(sketch);

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<div id="sketch-div"></div>

Answer 2

探索之前的解决方案后，我学到了两件事：

不强制执行实例化（尽管可能是个好习惯）：默认为当前 window，可通过 'this'.
如果在循环时第一次尝试没有出现图形，那是因为在图形中每次循环都没有重新设置坐标原点。（参见来源core\p5。Graphics.js函数draw（））

下面给出一个从前面导出的解决方案。查看 push()/pop() 周围的图形调用

let myGraph;

function setup() {
  myGraph = createGraphics(100, 100, WEBGL);
  canvas = createCanvas(200, 200, WEBGL);
  frameRate(0.5);
}

function draw() {
  // coordinates of window are reset at each draw.   
  translate(-width / 2, -height / 2);
  someDraw(this);
  // graphics coordinates cumulate at each draw.Protect:
  myGraph.push();
    myGraph.translate(-myGraph.width / 2, -myGraph.height / 2);
    someDraw(myGraph);
  myGraph.pop();

  // draw myGraph on canvas
  image(myGraph, 100, 100);
}

function someDraw(pg) {
  pg.clear();
  pg.background('blue');
  // origin will be now restored in main draw
  translate(10, 10);
  pg.stroke('red');
  pg.noFill();
  pg.line(0, 0, 100, 100);
  pg.rect(0, 0, 60, 60);
  pg.ellipse(25, 50, 50, 50);
}

P5 尝试分解图形和 Canvas 代码

P5 try to factorize Graphics and Canvas code

javascript

processing

canvas

p5.js