Slow render in WebGL

p5.js Coding Questions
1

Hey, I want to make a terrain generator in p5. So, I need WebGL to rotate the canvas on X axis. But, even trying to render 500 lines makes the whole sketch extremely slow. If I remove the WEBGL, the sketch runs pretty fast. Can someone please help?

let l = []

function setup() {
  	createCanvas(windowWidth, windowHeight, WEBGL);
  	background(0)
  	for(let i=0; i<500; i++){
  		l.push([random(width), random(height)])
  	}
}

function draw() {
	background(0)
    //WebGL translates everything to the middle of the screen. This is to fix that
	translate(-width, -height)
    // I want the shape to follow my mouse
	translate(mouseX, mouseY)

	beginShape()
	for (i of l){
		vertex(i[0], i[1])
		ellipse(i[0], i[1], 10, 10)
	}
	endShape(CLOSE)
}
2

Not sure about ellipse statement within beginShape

You can make the full PShape in setup and in draw just say shape(s);

3

Hello,

Examples here:

I did get a steady frameRate of 60 when I changed the scale.

:)

4

I could not find a PShape reference for P5.js

Related:

:)

1 Like
5

Since you are not changing data in draw(), construct a p5.Graphics with createGraphics() in setup() and move the resulting image() in draw().

3 Likes