p5.js 将纹理加载到 2D 椭圆上

p5.js Loading texture onto 2D ellipse

本文关键字：2D 加载 js 纹理 p5      更新时间：2023-09-26

我想用P5.js制作一个云粒子系统。我打算使用许多带有 PNG 云纹理填充的椭圆。然后用这些省略号对系统进行编程。

不幸的是，当我尝试在 p5 中应用纹理时出现错误.js

未捕获的类型错误：this._renderer._getShader 不是函数

var cloudImg;
//P5 Setup
function setup(){
    createCanvas(1500, 750);
    background('rgba(0, 0, 0, 0.3)');
    cloudImg = loadImage("cloud100.png"),
    numParts = 80,
    diam = 100;
}

//Render
function draw(){
    background(0);
    translate(mouseX, mouseY);
    beginShape();
    texture(cloudImg);
    var theta = TWO_PI / numParts;
    for (i=0; i<numParts; i++) {
    var angle = theta * i,
        x = cos(angle),
        y = sin(angle);
    vertex(x * diam, y * diam, (x+1)/2, (y+1)/2);
    }
    endShape();
}

我认为texture()需要webgl作为渲染。

试试createCanvas(1500, 750, WEBGL);

点击这里查看texture()的正式文件。

相关文章：