Alright. This is one of the first times I've done this so it's probably a simple problem. I'm trying to set up a little program in which I define and create an object in "blobby.js" and I then have the setup and draw inside a script tag in the html file. I'm trying to do this in processing, which I have referenced, as you will see, in the html as well. My problem is even though the background shows up, I have an error in the console that says random is not defined. Here's my code:
<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>
Also, here is the code in 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)));
}
Thanks so much!
In your case random is a function that you are calling, but it is not defined anywhere in that file or in your script tag present in your index.html. Also I think you are trying to do Math.random to get a random number. So if you just change from random to Math.random, your problem will be solved.