[p5.js] 3. 10print++, Random, for-loop, 상호작용

학습내용

• 관찰 - 가설 - 검증의 과정을 거쳐보자.
• 기록할 때 Fact, Felling, Finding, 궁금증 가시화, 이해의 경계 확인.
• 자바스크립트는 동적인 언어, reference를 지칭하는 것, 타입은 동적임(타입을 명시할 필요 없음), 변수를 담는다는 표현보다 이름표를 붙이다는 어떨까?
• c, java는 값을 담는 것. 따라서 정수인지, 실수인지 등을 미리 선언해줘야 한다.
• 카멜 케이스(camelCase) 형태 = var RandomSeed : 단어와 단어가 이어질 때 대문자로 구분해주는 것
• javascript 문법 혹은 레퍼런스를 보기 위해서 w3schools.com(https://www.w3schools.com) 참고하면 좋다.
• 자바스크립트는 만드는 회사들이 모두 다르다.

제너레이티브 게스탈퉁(http://www.generative-gestaltung.de/)

예제 : P_2_1_1_01

예제 코드 링크 https://editor.p5js.org/generative-design/sketches/P_2_1_1_01

• NEW : p5.js / OLD : Processing
• 10print에서 발전된 버전?
• p5.js 코드로 가져와서 바로 확인이 가능하다.
• 주석에서 작동 원리 등을 이해할 수 있음.
  ㄴ 예제 코드의 주석을 살펴보면 정말 깔끔히 정리되었다는 느낌을 받을 수 있음. 누구나 보면 알 수 있도록.
• 마우스 위치(x, y)에 따라, 키 입력에 따라, 마우스 클릭에 따라 상호작용이 발생.
• 작동법은 아래 주석 참고

/**
 * changing strokeweight and strokecaps on diagonals in a grid
 *
 * MOUSE
 * position x          : left diagonal strokeweight
 * position y          : right diagonal strokeweight
 * left click          : new random layout
 *
 * KEYS
 * 1                   : round strokecap
 * 2                   : square strokecap
 * 3                   : project strokecap
 * s                   : save png
 */

0. 'use strict'

 'use strict'는 ECMAScript version 5부터 적용되기 시작했다. 현재 대부분의 브라우저들은 2015년 발표된 EC6를 사용하고 있음. 'use strict'를 적용하면 변수를 무조건 선언해야 함. 적용시키지 않는다면 에러가 줄어들지만 구조가 엉망이 될 수 있음.

1. random 조건문을 다양하게 작성하는 방법

• 1, 2, 3번 코드 모두 똑같은 결과를 만들어 준다.(회색 화면을 클릭하면 50% 확률로 앞 or 뒤가 나옴)

// 1)
  coin = (random() > 0.5) ? '앞' : '뒤';
  
// 2)
  if (random() > 0.5) coin = '앞';
  else coin = '뒤';
  
// 3)
  if (random() > 0.5) {
    coin = '앞';
  } else {
    coin = '뒤';
  }

 

2. for문

• 복잡해 보이지만 한 줄씩 접근하면 이해할 수 있음.
• i++ 는 i=i+1을 나타내기에 아래 코드에서 i는 0부터 시작해 무수히 커지게 됨(0, 1, 2, 3, ...)
• 하지만 i <10으로 최대치를 제한해주었기에 i의 최댓값은 9 (j도 마찬가지)

  d = 40;
  
  //파랑, 제일 위 한 줄 생략
  for (let i=0; i<10; i++) {
    for (let j=0; j<10; j++) {
      let b = color(0, 0, 255)
      fill(b);
      circle(40*i+20, 40*j+20, d); // y: 20, 60, 100, ...
    }
    
  //초록, 첫 circle 생략
  for (let i=0; i<10; i++) {
    let g = color(0, 255, 0)
    fill(g);
    circle(40*i+20, 20, d); // x: 20, 60, 100, 140, ...
  }
    
  //빨강
  let r = color(255, 0, 0)
  fill(r);
  circle(20, 20, d);

 

3. 상호작용

• mouse : mouseX, mouseY, mousePressed( )
• keyboard : keyReleased( ), keyPressed( )

이해한 점

• var toggle = int(random(0, 2)); 해석할 수 있었다.
• random에서 고정과 랜덤을 같이 쓰고 싶을 때 randomSeed 활용할 수 있다.
• 좋지 못한 랜덤은 많은 반복을 거치면 일정한 패턴이 나오게 된다.

이해하지 못한 점

• P_2_1_1_01 안에서의 for문이 어떻게 사용되는 것인지.
• saveCanvas 구조 및 사용법.

궁금한 점

• for문 예제에서 원이 생성되는 순서가 궁금하다.
  ㄴ y축으로 circle이 모두 생성되고 나서 다음 x로 넘어가는 것 같다.
• noFill( )은 무엇일까?
  ㄴ circle 내부를 비우는 용도인 것으로 보임.
• Embed라는 것이 무엇인가? (사용하고 있지만 무엇인지 모름)

할 일 및 복습할 내용

• the nature of code(Kadenze) 1강 보기.
• the coding train(유튜브) p5.js기초 과정 보기.
• 이해하지 못한 점, 궁금한 점 찾아보기.
• Random, RandomSeed 레퍼런스 문서 찾아보기.
• 상호작용 mouse, keyboard 관련 레퍼런스 문서 찾아보기.
• 예제 변형시켜보기.
• Random 참고 문서

느낀 점

 for문이 나오니 헷갈리기 시작했다. 똑같은 동작을 하는 random 관련 코드를 3개로 나눠 쓸 수 있다는 점이 흥미롭다. '코딩을 잘한다'라고 평가하는 요소에 위와 같이 얼마나 짧고, 간결하게 코드를 짜느냐도 포함될 수 있을 것 같다.

 현재 공부하는 방식이 코딩을 배우기에, 공부하는 방법을 배우기에 너무 좋은 방식의 공부법이라는 생각이 든다. 아주 기초적인 코딩 강의를 몇 번 들었는데, 모두 들은 이후 아무것도 할 줄을 몰랐다. 그냥 이런 게 있구나 하고 넘어갔었다. 강의를 들은 후 내가 직접 해당 메소드, 함수 등을 찾고, 예제를 변형시켜보는 작업을 거치다 보니 조금 더 빠르게 코딩에 익숙해지는 느낌을 받는다.