processing.js html设置(关闭)

时间:2016-12-16 21:48:49

标签: javascript html processing.js

好的。这是我第一次这样做,所以它可能是一个简单的问题。我试图设置一个小程序,我在其中定义并创建一个对象> blobby.js"然后我在html文件中的脚本标记内有setupdraw。我正在尝试在处理中执行此操作,我已经参考了,正如您将在html中看到的那样。我的问题是即使背景显示,我在控制台中有一个错误,指出random未定义。这是我的代码:

<html>
<head>
    <title>PATHOGEN</title>
</head>
<body>
    <script language="javascript" type="text/javascript" src="processing.min.js"></script>
        <script src="blobby.js"></script>
        <script type="text/processing" data-processing-target="mycanvas">
            void setup()
            {
                size(600,600);
                PFont fontA = loadFont("sans-serif");
                textFont(fontA, 14);  
            }
            console.log(cells); 
            void draw(){  
              background(225, 1, 1);
            for (var i = 0; i < cells.length; i++) {
                cells[i].show();
            }
            }
        </script>
    <canvas id="mycanvas"></canvas>
</body>
</html>

此外,这是blobby.js中的代码:

var blobby = function(X, Y, S) {
    this.x = X;
    this.y = Y;
    this.s = S;
};

console.log("Hey, blobby is here!");

blobby.prototype.show = function(){
    //Blobbiness and plasma membrane
    var perlin = 0;
    pushMatrix();
    translate(this.x, this.y);
    strokeWeight(4);
    stroke(20, 210, 60, 170);
    fill(255, 0, 0);
    beginShape();
    for (var a = 0; a < TWO_PI; a+=0.1){ 
        var d = map(noise(perlin, frameCount/100), 0, 1, this.s-10, this.s);
        var x = sin(a)*d;
        var y = cos(a)*d;
        vertex(x, y);
        perlin+=0.1;
    }

    endShape(CLOSE);
    popMatrix();
};

var cells = [];
for (var i = 0; i < 1; i++) {
    cells.push(new blobby(random(100, 500), random(100, 500), random(70, 100)));
}

非常感谢!

1 个答案:

答案 0 :(得分:0)

在您的情况下,随机是您正在调用的函数,但未定义在该文件中或您index.html中的脚本标记中的任何位置。 另外我认为你正在尝试使用Math.random来获取一个随机数。 因此,如果您只是从随机更改为 Math.random ,您的问题就会得到解决。