Previous
Next

Primitives Shapes - triangle()

triangle ()

The triangle() takes 6 arguments.

These are: x1,y1,x2,y2,x3,y3. Thus we have triangle(x1,y1,x2,y2,x3,y3).

The x1,x2 and x3 are respectively the x coordinates for the first, second and third point.

The y1,y2 and y3 are respectively the y coordinates for the first, second and third point.

The triangle is created by connecting these points.

Let's see an example of a code that uses the triangle() function:


function setup() {
  // create canvas
  createCanvas(800,500);
  }
function draw () {
  // set background color
  background('orange');
  triangle(width/2,height/2,500,400,300,400);
  triangle(width/2,height/2,500,100,300,100);
}

Result of the above code:

Exercise

  1. Open your Visual Studio editor and the p5yourName folder.
  2. Open the file ex812.js in your editor and save it as ex827.js
  3. Open the file ex812.html in your editor and save it as ex827.html
  4. In the ex827.html file, update the link to ex827.js  from ex812.js
  5. Go to the index.html file and create, under Module 8, a link to the ex827.html  file with the title "Primitives Shapes - triangle".

Modify the ex827.jsfile in order to create the abstract shape using triangles. You can see here an example.

Answer:

function setup() {
  // create canvas
  createCanvas(800,500);
  }
function draw () {
  // set background color
  background('orange');
  // create the shape using triangles
  triangle(400,250,500,400,300,400);
  triangle(300,100,400,250,200,250);
  triangle(500,100,600,250,400,250);
  triangle(400,250,200,250,300,400);
}

Do a Git commit with the message "Primitives Shapes - triangle".

Previous
Next