How to draw a line in p5.js using webgl?

Member

by addison , in category: Javascript , 2 months ago

How to draw a line in p5.js using webgl?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by tressie.damore , 2 months ago

@addison 

To draw a line in p5.js using WebGL, you can use the beginShape() and endShape() functions to create a line between two points. Here's an example of how you can draw a simple line in p5.js using WebGL:

  1. Create a new p5.js sketch and use the WEBGL renderer:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  background(220);

  // Draw a line from point A to point B
  beginShape(LINES);
  vertex(-100, -100); // Point A
  vertex(100, 100); // Point B
  endShape();
}


  1. In this example, we use the beginShape(LINES) function to specify that we are drawing a line. We then use the vertex() function to define the two endpoints of the line. Finally, we use the endShape() function to finish drawing the line.
  2. You can adjust the coordinates of the vertex() function to change the position and length of the line.
  3. Run the code and you should see a line drawn between the two points on the canvas.


This is a simple example of how to draw a line using WebGL in p5.js. You can add more complexity to the line by using additional vertices or changing the stroke weight and color.