Points and Lines

점과 선은 기초적인 형상(점, 선, 면, 도형 등)을 그리는데 사용할 수 있습니다. 양식의 크기를 조정하려면 변수 'd'의 값을 바꿔보세요. 네개의 변수는 'd'의 값을 기반으로 위치를 설정합니다.

아래 코드를 컴퓨터에 설치된 p5.js editor에 붙여넣고 실행해보거나 http://p5js.org/examples/form-points-and-lines.html를 클릭하여 웹에서 실행되는 결과를 확인하세요.

function setup() {

  var d = 70;
  var p1 = d;
  var p2 = p1+d;
  var p3 = p2+d;
  var p4 = p3+d;

  // Sets the screen to be 720 pixels wide and 400 pixels high
  createCanvas(720, 400);
  background(0);
  noSmooth();

  translate(140, 0);

  // Draw gray box
  stroke(153);
  line(p3, p3, p2, p3);
  line(p2, p3, p2, p2);
  line(p2, p2, p3, p2);
  line(p3, p2, p3, p3);

  // Draw white points
  stroke(255);
  point(p1, p1);
  point(p1, p3); 
  point(p2, p4);
  point(p3, p1); 
  point(p4, p2);
  point(p4, p4);
}