< P5.JS > 10 print_코드 분석으로 작동 원리 이해와 재해석

-       초기 코드 분석 

 

 

-       좀 더 쉽고, 단순하게 코드 분석해보기

 

10 print의 개요 - 화면의 좌측 상단부터 우측 하단의 끝까지, 순차적으로 50%의 확률로 서로 다른 방향의 대각선을 그리는 것을 반복하는      프로그램이다.

 

// 프로그램에서 사용되어질 좌표값 x, y 변수와 이동거리 변수, 확률 변수 선언과 초기화.

 

function setup() {

// 프로그램의 화면 사이즈와 색상, 선의 색상을 초기화한다.

}

 

function draw() {

// 1/2 확률로 서로 다른 방향의 대각선을 그리는 조건문을 수행한다.

 

// 대각선을 그리고 좌측에서 상단까지 순차적으로 이동하기 위해 x좌표값을 나타내는 변수 x에 이동거리 변수 w를 더한다.

 

// 한 줄의 대각선 그리기를 마치면, 하단의 좌측으로 이동하기 위해 조건문을 수행한다.

// 캔버스 모든 줄의 대각선 그리기를 마치면, 새로운 캔버스에 다시 그리기 위해 조건문을 수행한다.

 }

 

 

 

-       코드의 발견한 점, 궁금한 점

 

1.     기존 자바를 사용하던 프로세싱과는 다르게 자바스크립트에서는 함수가 반환하는 타입을 지정하는 부분이 다른걸 볼 수 있었다. Void 에서 function 으로 말이다. 함수라는 것을 직접적으로 보기 쉽게 하기 위함? 인지 궁금하다.

 

2.     변수 선언과 초기화 구문에서 int, float, string, double 같은 데이터 타입 대신, let을 사용하는 걸 볼 수 있었다. 조금 검색해보니, 자바스크립트에서는 var, let, const 로 변수 선언 방법을 제공한다고 한다. Const는 변하지 않는 상수를 선언 할 때 사용되어지고, var 과 let 변하는 수를 선언할 때 사용된다. 그럼 var과 let 은 무슨 차이점을 가지고 있는가.. 바로 var 선언 방법은 중복 선언을 허용하지만, let 선언 방법은 중복 선언을 에러로 받아들이는 것으로 보인다. 때문에 let 은 var 보다 디버깅이나 프로그램 수행에 있어 안정적으로 보여진다. 개인적으로 생각하기에…

 

3.     자바스크립트 언어는 세미콜론을 사용하지 않아도 동작이 된다. 이 점도 조금 찾아보니, 파이썬과 자바스크립트는 세미콜론을 쓰지 않아도 된다고 한다. 세미콜론은 보통 문장의 끝을 의미한다. 하지만, 파이썬과 자바스크립트에서도 다른 점이 있었다. 파이썬은 기본적으로 붙이지 않는 것으로 하지만, 자바스크립트는 붙이는 것을 기본으로 하고 있다. 단지, 자바스크립트에서는 오류를 나타내지 않고 인터프리터라는 과정에서 자동으로 세미콜론이 빠져 있을만한 곳에 삽입한다고 한다. 

 

 

 

-       본인만의 방법으로 재해석해보기

 

// https://10print.org/

let x, y; // 좌표값을 담을 변수 선언과 초기화.
x = 0;
y = 0;

let w = 20; // 이동거리 변수 선언과 초기화.
let p = 0.5; // 조건으로 사용되어질 변수 선언과 초기화.

let n = 0;

function setup() {
  createCanvas(400, 400);
  background(0);
  stroke(0, 200, 0);
}

function draw() {
  background(0, 5);
  
  if (n == 0) {
    line(x, y, x, y + w);
  } else {
    line(y, x, y, x + w);
  }

  y = y + w;

  if (y > height) {
    x = x + w;
    y = 0;
  }

  if (x > width) {
    y = y + w;
    x = 0;

    if (n == 0) {
      n = 1;
    } else {
      n = 0;
    }
  }
}