Silverback9

오늘은 매운 맛 깃발과 순한 맛 깃발을 표현해 보도록 할게요~^^*

매운 맛 깃발은 칼각이 바짝 잡힌 깃발이구요~^^*

순한 맛 깃발은 순둔순둥 보들보들한 깃발이예요~^^*

아름다운 두 눈을 감으시고 이 두 깃발을 상상해 보셔요~^^*

….

자 이제 아름다운 두 눈을 다시 뜨시구요~^^*

차분하면서도 설레는 마음으로 공부를 시작해 볼까요~^^*

아래 동영상 강의를 클릭하시면 오늘 공부 내용을 바로 시작(28:58)하실 수 있어요~^^*.

깃발의 테두리를 표현할 준비를 하도록 할게요~.

콰지모토의 밧줄의 매듭들을 다 풀어서, 매끄러운 줄로 만들어 보겠습니다.

매듭들이 스프링에 연결되어 물리적 움직임을 가지고 있지만, 시각적으로는 보이지 않도록 처리를 하면, 매듭 중앙에서 다음 매듭 중앙으로 연결되어 있는 스프링만 우리 눈에 보이게 되겠지요? 그러면 매끄러운 줄로 보이게 될 것 같아요.

let particles = [];
let springs = [];
let k = 0.01;
let gravity;

let spacing = 20;
//처음 시작할 때, 입자들 사이의 수직 거리가 될 것입니다~^^* 
//입자들 사이의 스프링의 원래 길이(restLength)로 사용하겠습니다~^^*

function setup() {
  
  createCanvas(400, 400);
  
  for( let i = 0; i <5; i++){
    // [0] ~ [4] 총 5개의 입자를 만들어 보겠습니다~^^*
    
    particles[i] = new Particle(200, i*spacing);
    // 화면 가운데, 맨 위에서 아래로 spacing = 20 간격으로 수직으로 나란히 위치시켜 볼게요~^^*
    
    if( i != 0){
      // particles[0] 즉 (200, 0)에 있는 입자에 대해서는 아래의 일을 하지 않습니다. 왜냐하면, 이 입자 앞에는 그 어떤 입자도 없기 때문입니다. 
      // parcicles[0]는 배열 맨 처음의 요소라서, 자신 앞에 다른 요소를 가지고 있지 않아 연결 작업이 무의미 합니다~
      
      let a = particles[i];
      let b = particles[i - 1];
      let spring = new Spring(k, spacing, a, b);
      //요소 particles[i]는 자신 바로 앞에 있는 요소 particles[i-1]과 스프링으로 연결됩니다.~^^*
      
      springs.push(spring);
      //생성된 spring을 배열 springs[]에 저장합니다. 
      //배열 springs[]는 배열 particles[]보다 요소가 1개 적게 되겠네요? (1->0), (2->1), (3->2), (4->3) 총 4개의 spring이 생성되어 배열 springs[]에 저장됩니다~^^*
    }
  }
   particles[0].locked = true;
   //캔버스 화면 제일 위에 있는 입자, 즉 입자 배열 첫번째 요소인 particles[0]의 클래스 구성요소인 locked 의 Boolean 상태를 기본값 false 에서 true 로 바꾸겠습니다~^^* 
  
  gravity = createVector(0, 0.01);
  //줄의 매듭들이 중력의 영향을 받아 차르르 예쁘게 자리잡도록 해보겠습니다~^^*
}  
  
  
function draw() {

  background(220);
  
  for( let s of springs){
    s.update();
    s.show();
  }
  //모든 스프링의 움직임을 보여주고
  
  for ( let p of particles){
    p.applyForce(gravity);
    p.update();
    //p.show();
  }
  //모든 줄 매듭이 움직입니다.
  //그러나 매듭이 눈에 보이지는 않습니다. 
  
  let tail = particles[particles.length - 1];
  //배열 맨마지막 요소를 변수 tail에 저장하겠습니다~

  if (mouseIsPressed) {
   tail.position.set(mouseX, mouseY);
   tail.velocity.set(0,0);
  }
  //마우스/손가락을 클릭/눌러서 풀 먹여 빳빳한 줄을 잡아 보셔요.
  //줄이 씩씩하게 움직이나요~^^*
}

각 잡힌 밧줄 끝을 잡고 움직여 보셔요~^^*

이번에는 매듭들의 (x,y)좌표를 꼭지점으로 삼아, 닫힌 도형을 만들어 보겠습니다.

꼭지점 함수는 vertex(), 닫힌 도형 그리기 함수 쌍은 beginShape(), endShape()를 사용해 보겠습니다~^^*

let particles = [];
let springs = [];
let k = 0.01;
let gravity;
let spacing = 20;

function setup() {
  
  createCanvas(400, 400);
  for( let i = 0; i <5; i++){
    particles[i] = new Particle(200, i*spacing);
    if( i != 0){
      let a = particles[i];
      let b = particles[i - 1];
      let spring = new Spring(k, spacing, a, b);
      springs.push(spring);
    }
  }
  particles[0].locked = true;  
  gravity = createVector(0, 0.01);
}  
  
  
function draw() {
  background(220);
  for( let s of springs){
    s.update();
    s.show();
  }
  
  beginShape();

  for ( let p of particles){
    p.applyForce(gravity);
    p.update();
    vertex(p.position.x, p.position.y);
  }
  endShape();
  //매듭의 x,y 좌표를 꼭지점 삼아 서로 연결하고 닫힌 도형을 만들어 보겠습니다~^^*
  
  let tail = particles[particles.length - 1];
  if (mouseIsPressed) {
   tail.position.set(mouseX, mouseY);
   tail.velocity.set(0,0);
  }
}

각잡힌 깃발을 휘날려 보셔요~~^^*

이번에는 부들부들한 깃발을 만들어 보겠습니다~^^*

매듭의 (x,y)좌표를 꼭지점으로 삼아, 곡선으로 연결할 것이고, 닫힌 도형으로 표현해 보겠습니다.

역시, 닫힌 도형 표현을 위해 beginShape()과 endShape()을 사용하게 되겠지요?

꼭지점을 곡선으로 연결하는 것은 curveVertex()함수를 사용해 보겠습니다.

curveVertex()함수는 곡선이 도형 안으로 들어오는 지점과 도형 밖으로 빠져 나가는 지점을 설정해 주어야 합니다. 자세한 내용은 코드 안 주석을 살펴 보셔도 좋겠지요~^^*

let particles = [];
let springs = [];
let k = 0.1;
let gravity;
let spacing = 5;

function setup() {
  createCanvas(400, 400);
  for( let i = 0; i <10; i++){
    particles[i] = new Particle(200, i*spacing);
    if( i != 0){
      let a = particles[i];
      let b = particles[i - 1];
      let spring = new Spring(k, spacing, a, b);
      springs.push(spring);
    }
  }
  particles[0].locked = true;
  gravity = createVector(0, 0.01);
}  
  
  
function draw() {
  background(220);
  for( let s of springs){
    s.update();
    s.show();
  }
  
  beginShape();
  
  let head = particles[0];
  curveVertex(head.position.x, head.position.y);
  //곡선이 들어올 입구를 설정합니다. 
  
  for ( let p of particles){
    p.applyForce(gravity);
    p.update();
    curveVertex(p.position.x, p.position.y);
  //꼭지점들을 곡선으로 연결합니다. 
  }

  let tail = particles[particles.length - 1];
  curveVertex(tail.position.x, tail.position.y);
  //곡선이 나갈 출구를 설정합니다.
  
  endShape();  
  //꼭지점들이 곡선으로 연결된 닫힌 도형이 완성됩니다. 
  
  if (mouseIsPressed) {
   tail.position.set(mouseX, mouseY);
   tail.velocity.set(0,0);
  }
}

부들부들~~ 시원한 인견으로 만든 깃발 흔들어 보셔요~~^^* 여름이니까요~~^^*

noFill()함수를 사용하여, 닫힌 도형의 면적에 색을 칠하지 않아 투명하게 만들어 보겠습니다.

그러면~??? 네~~ 아주 아주 부드러운 줄이 만들어 지겠네요~~^^*

아주 부드러운 줄을 흔들어 보실래요~^^*

오늘 장마가 시작된 것 같은데요.

긴 장마가 끝나고 바삭한 날씨가 시원한 바람과 함께 우리를 찾아오면, 소중히 보관해 둔 이 깃발들을 함께 휘날려 볼까요~^^*

오늘도 저와 함께 코딩 공부 해주셔서 감사합니다~~^^*

비 듣는 소리 들으며 점심 맛있게 드시구요~^^*

내일 우리 또 만나서 함께 코딩 공부 해요~~^^*

네!!! 꿈은 이루어 집니다~~^^*