Υποενότητα 8.2: p5.js Τα Βασικά

Βασικά σχήματα. Ορθογώνιο Παραλληλόγραμμο - rect()

rect()

Η συνάρτηση rect () λαμβάνει τα ίδια 4 ορίσματα με την έλλειψη. Έτσι έχουμε  rect (x,y,w,h). 

Ας δούμε ένα παράδειγμα κώδικα που χρησιμοποιεί τη συνάρτηση rect () για να δημιουργήσει μια προσομοίωση ενός 3d σχήμα::

function setup() {
  // create canvas
  createCanvas(800,500);
  }
function draw () {
  // set background color  
  background('orange');
   for (dim = 400; dim>10; dim = dim-10 ) {
    rectMode(CENTER);
    rect(width/2,height/2,dim,dim);
  }
  
}

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 ex826.js
3. Open the file ex812.html in your editor and save it as ex826.html
4. In the ex826.html file, update the link to ex826.js  from ex816.js
5. Go to the index.html file and create, under Module 8, a link to the ex826.html  file with the title "Primitives Shapes - rect".

Modify the ex826.jsfile in order to create a cube using rects and lines.. You can see here an example.

Answer:

function setup() {
  // create canvas
  createCanvas(800,500);
}
function draw () {
  // set background color
  background('orange');
  noFill();
  // create the cube
  rect(300,200,100,100);
  rect(350,250,100,100);
  line (400,200,450,250);
  line (300,200,350,250);
  line (400,300,450,350);
  line (300,300,350,350);
}

• Κάντε μια  Git commit με το μήνυμα "Primitives Shapes - recy".

  • Δείτε περισσότερα για την rect() function