Script error. (:line 0)

p5.js Coding Questions
1

Hi,
I’m just beginning with this library and I have trouble to start.
When I play my code, I have a "Script error. (:line 0) " message in the console.
I identified where the problem happpens in my code but I have no idea why.
It seems to be related to the z coordinate of my point (line 48 see code below).
Can anyone help ?
Thx in advance.
Sebastien

var ps = null;

function setup(){
  createCanvas(1000, 400, WEBGL);
	ps = new ParticleSystem (10, 10, 5, 5, createVector(width/2, height/2, 0));
}

function draw(){
  background(0);
  ps.run();
}

var ParticleSystem = function(numX,numZ,stepX,stepZ,v) {
  	this.particles = [];
		this.origin = v.copy();
		this.varDepth = stepZ;
    for(var i = 0; i < numZ; ++i){
			for(var j = 0; j < numX; ++j){
        //Vector in absolute
				var particlePos = createVector((numX*stepX/2)-j*stepX,0,(numZ*stepZ/2)-i*this.varDepth)
        //Vector relative to Canvas
        this.particles.push(new Particle(this.origin.sub(particlePos)));
        
    }}
}

ParticleSystem.prototype.run = function() {

    var len = this.particles.length;

    //loop through and run particles
    for (var i = len - 1; i >= 0; i--) {
        var particle = this.particles[i];
        particle.run()
    }
}

var Particle = function (pos) {
    this.loc = pos;
}

Particle.prototype.run = function() {
  	this.display()
}

Particle.prototype.display = function() {
  	stroke(255);
    point(this.loc.x, this.loc.y, this.loc.z);
  
}
1 Like
3

I’m not getting an error when I run this (but the screen is completely black). Maybe it is something to do with your index.html–can we see it?

4

Hello WizardBear,
Nothing fancy about the HTML, just the canvas.
The code above is a first attempt to display a white 3d dot Matrix particles system.
If you have an idea about why nothing happens, I’m interested.
Thx

<!DOCTYPE html>

<html>

  <head>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script>

    <link rel="stylesheet" type="text/css" href="style.css">

    <meta charset="utf-8" />
​

  </head>

  <body>

    <script src="sketch.js"></script>

  </body>

</html>
5

I think stuff is happening–you just can’t see it as it isn’t on the canvas. (Working in 3D is hard. :sweat_smile:)
I am just a bit confused as to why you are getting an error. Is the code running?

6

Nope, it’s not running. The problem happens when I draw the point

Particle.prototype.display = function() {
  stroke(255);
  	
    point(this.loc.x, this.loc.y, this.loc.z);
  
}

… and more specificallly in the z component of the point. When I remove the z, it works.

7

You are running it in the p5.js web editor, right?
Do you get this message in the console:
p5.RendererGL: enabled webgl context

8

Yes
I also tried to replace the point with a sphere and it works. So it’s a problem with the use of the point with WEBGL.
This piece of code works almost as expected except I wanted to use real dots at first and also that I don’t understand why the animation is pausing for 2 secs every 1 sec (but that’s probably a completely different issue problem)

var ps = null;

function setup(){
  createCanvas(1000, 400, WEBGL);
	ps = new ParticleSystem (20, 20, 20, 20, createVector(0,50,0));
}

function draw(){
  background(0);
  ps.run();
}

var ParticleSystem = function(numX,numZ,stepX,stepZ,v) {
  	this.particles = [];
		this.varDepth = stepZ;
    for(var i = 0; i < numZ; ++i){
			for(var j = 0; j < numX; ++j){
        //Vector in absolute
				var canvasOrigin = v.copy()
        var matrixOrigin = createVector((numX*stepX/2)-j*stepX,0,(numZ*stepZ/2)-i*this.varDepth)
        //Vector relative to Canvas
        
        this.particles.push(new Particle(canvasOrigin.sub(matrixOrigin)));
        
    	}
    }
}

ParticleSystem.prototype.run = function() {

    var len = this.particles.length;

    //loop through and run particles
    for (var i = len - 1; i >= 0; i--) {
        var particle = this.particles[i];
        particle.run()
    }
}

var Particle = function (pos) {
    this.loc = pos.copy();
  	this.radius = 0.1;
}

Particle.prototype.run = function() {
  this.update();	
  this.display()
}

Particle.prototype.update = function() {
		this.radius = randomGaussian(0.2, 0.1);
}

Particle.prototype.display = function() {
  	stroke(255);
  	push();
    translate(this.loc.x, this.loc.y, this.loc.z);	
    sphere(this.radius,4,4);
  	pop();
  
}
2 Likes
9

So problem solved? :grin:

10

Hmmm not really … I would have preferred to use dots instead of spheres … and it’s frustrating not to understand why it doesn’t do what I want.
I will leave it opened just a little time more in case someone would have a flash.
Thank you though !

11

I think it is because point() works with pixels, which you can only really do in a 2D environment as the screen of pixels is 2D and you are essentially coloring one of those pixels. sphere() is much more versatile as it is built to be used in a 3D environment.

I will leave it opened just a little time more in case someone would have a flash.

You’re not going to delete this topic are you?

1 Like
12

But the point() object is accessible in WEBGL : https://p5js.org/reference/#/p5/point
I also have to try it on another development environment to confirm the issue.

No I will not delete the topic but I thought there was a “solved” button to click but I realise that not.
So the topic will stay as it is.

13

Oh yeah, maybe you have to set a strokeWeight?

Yeah we really could do with a solved button.

14

OK … pb is the online editor. It works perfectly in local.
Definitely solved now !

2 Likes