Silverback9

오늘은 동그라미들이 스프링으로 유연하게 연결되어 형성하게 되는 닫힌 공간을 색으로 채워 어떤 새로운 물체를 만들어 보겠습니다~~^^* YEAH~~^^*

그러면, 이 동그라미들이 새로운 어떤 물체의 테두리의 모서리 역할을 하게 될 것 같아요.

어제 만든 삼각형 같은 경우는 모서리가 3개이면 충분했지만…

좀더 많은 모서리를 가진 도형을 만들어 보려고 하면, 동그라미가 좀더 많이 필요하겠어요…

필요한 모서리 갯수를 설정하면, 그 수만큼의 동그라미가 바로 생성될 수 있다면 편할 것 같아요.

맞아요!!

참 좋은 생각인 것 같아요!!

네!!

우리 동그라미 클래스 코드 파일을 따로 만들어서, 메인 프로그램 코드에서 갯수 설정만 할 수 있도록 할까요?

네~~^^* 어느덧 우리에게 익숙한 작업인 것 같아요!

그래요!!

우리는 이미 동그라미 클래스를 만들어서 무려 소나기도 표현해 본 경험이 있지요~~^^*

음…그리고…그떄…비와 우박이 함께 내리는 것을 표현한 적도 있는데요~^^*

동그라미와 사각형이 형태만 다르지 행동은 같았었지요.

그래서..맞아요…Inheritance 상속 개념을 적용하여,

기본이 되는 클래스를 Parent Class 부모 클래스 또는 Super Class 수퍼 클래스라고 불렀고,

그 클래스의 속성을 상속받아, 자신만의 특성을 더한 클래스를 Child Class 자녀 클래스 또는 Sub Class 서브 클래스라고 불렀었지요…

자신의 가장 좋은 성품을 상속해 주고 싶어서, 항상 좀더 좋은 어른이 되려고 노력하시는 부모님의 마음, 그리고, 존경하는 부모님의 성품에 더하여 청출어람청어람 하기 위해 항상 좀더 좋은 어린이가 되려고 노력하는 자녀들의 마음.

우리, 그 아름다운 마음의 풍경을 오늘 프로그램에 담아 볼까요~~^^*

네!!

좋아요!!

연필과 붓과 물통과 물감과 돗자리와 스케치북을 챙겨서 출발~~^^*

넵! 우리가 사랑하는 “팥들었슈?”를 위해서 동그란 팥알갱이를 만들어 봅시다~^^*

음….지금 우리는 물리 엔진 라이브러리인 toxiclibs를 사용하고 있지요?

그래서 이번엔, Verlet Integration 적산법을 바탕에 둔 행동양식을 가진 toxiclibs의 입자 클래스를 Parent Class 부모 클래스 또는 Super Class 수퍼 클래스로 설정해 볼게요.

class Particle extends VerletParticle2D {
  constructor(x, y) {
    super(x, y);
    this.r = 2;
    physics.addParticle(this);
    //super class인 VerletParticle2D의 위치좌표 체계를 그대로 상속받습니다. 
    //생성된 Child Class 자녀 클래스의 입자 this를 물리세계의 구성요소로 추가합니다. 
  }

  show() {
    fill(0);
    circle(this.x, this.y, this.r * 2);
   // 입자 this의 위치 좌표에 반지름 r을 가진 동그라미를 보여줍니다. 
  }
}

팥알갱이들을 서로 연결해 주는 스프링을 또 만들어야겠지요~~^^*

네^^* 이 스프링도, toxiclibs의 스프링 클래스인 VerletSpring2D Class를 부모 클래스로 두어, 그 특성을 상속받는 자녀 클래스인 Spring Class를 만들어 볼게요~^^*

class Spring extends VerletSpring2D {
  constructor(a, b, strength) {
    let length = dist(a.x, a.y, b.x, b.y);
    super(a, b, length, strength);
    physics.addSpring(this);
  }
//연결하고자 하는 두 물체와 스프링 강도(0 ~ 1)를 parameter 매개변수로 받습니다. 
//두 물체 거리를 계산하여 변수 length에 저장합니다. 
//수퍼 클래스인 VerletSrping2D의 작업 속성에 따라 두 물체와 둘 사이의 length 거리와 스프링 강도를 반영하여 스프링을 생성합니다.
//생성된 스프링 this를 물리 세계의 구성요소로 추가합니다. 
    
  show() {
    stroke(0, 50);
    line(this.a.x, this.a.y, this.b.x, this.b.y);
//두 물체 사이를 연결한 선을 보여줍니다.  
  }
}

이제, 우리가 사랑하는 “팥들었슈?”를 위해서, 팥알갱이가 모서리에 콕콕 박힌 귀여운 개껌을 만들어 볼까요~^^*

음…개껌은 가운데가 쏙 들어가 있는 모래시계 형태를 살짝쿵 띄고 있는 것 같아요~~^^*

그리고, 흐물흐물하지 않고 제법 그 형태를 탄탄하게 유지를 하는 것 같아요~~^^*

그래서, 서로 마주보는 모서리들도 스프링으로 연결하면 어떨까 싶은데요~~^^*

네!! 그렇죠!! 튼튼한 연을 만들려면~~연의 테두리 뿐만 아니라 연 안쪽에 대각선 모양으로 대나무살을 대는 것처럼요~~^^*

자 그럼 우리 개껌 디자인 들어가 봅시다~~^^* YEAH~~^^*

왼쪽 상단부터 시계방향으로 주욱 점을 찍어 볼까요~^^*

p[0]왼쪽상단(200, 100)           p[1]오른쪽상단(400, 100)

     p[5]왼쪽중간(250, 200) p[2]오른쪽중간(350, 200)

p[4]왼쪽하단(200, 300)           p[3]오른쪽하단(400, 300)

이제 점들을 시계 방향으로 연결하고, 마주 보는 점들도 연결해 볼까요~^^*

spring[0] - p[0] p[1]
spring[1] - p[1] p[2]
spring[2] - p[2] p[3]
spring[3] - p[3] p[4]
spring[4] - p[4] p[5]
spring[5] - p[0] p[3]
spring[6] - p[1] p[4]
spring[7] - p[5] p[2]

디자인이 준비되었으니, 이 모습을 코드로 표현해 보겠습니다~^^*

let particles = [];
let springs = [];

particles.push(new Particle(200, 100));
particles.push(new Particle(400, 100));
particles.push(new Particle(350, 200));
particles.push(new Particle(400, 300));
particles.push(new Particle(200, 300));
particles.push(new Particle(250, 200));

springs.push(new Spring(particles[0], particles[1], 0.01));
springs.push(new Spring(particles[1], particles[2], 0.01));
springs.push(new Spring(particles[2], particles[3], 0.01));
springs.push(new Spring(particles[3], particles[4], 0.01));
springs.push(new Spring(particles[4], particles[5], 0.01));
springs.push(new Spring(particles[5], particles[0], 0.01));
springs.push(new Spring(particles[5], particles[2], 0.01));
springs.push(new Spring(particles[0], particles[3], 0.01));
springs.push(new Spring(particles[1], particles[4], 0.01));

자 그럼 이제, 맛있는 팥알갱이가 콕콕 박힌 개껌을 그려볼까요~~^^*

점들을 모서리 삼아 내부를 색칠하기 위해 beginShape()-endShape() 구조를 오래간만에 사용해 볼게요~~^^*

  fill(127);
  stroke(0);
  strokeWeight(2);

  beginShape();
  for (let particle of particles) {
    vertex(particle.x, particle.y);
  }
  endShape(CLOSE);
//점들을 모서리 삼아 그 내부를 색칠합니다. 

  for (let particle of particles) {
    particle.show();
  }
//팥알갱이들을 콩콩 그려봅시다. 

  for (let spring of springs) {
    spring.show();
  }
//스프링도 보여주면, "팥들었슈?"가 내부 구조를 신기해서 개껌을 더 재밌게 맛볼 것 같아요!

네~~^^* 핵심 코드들은 다 준비가 된 것 같은데요~~^^*

우리 이제 전체 코드를 살펴 볼까요~~^^* 주석은 따로 넣지 않도록 할게요~~^^*

개껌이 화면 위해 유영하는 것처럼 보이도록, 중력의 영향은 동그라미의 움직임에 적용하지 않도록 할게요~

마우스를 클릭하여 드래그하면 첫 번째 동그라미가 따라 움직이도록 만들게요~

<!DOCTYPE html>
<html>
  <head>
    https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js
    https://cdn.jsdelivr.net/gh/hapticdata/toxiclibsjs@0.3.2/build/strongmark%20style=
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    http://sketch.js
    http://strongmark%20style=
    http://strongmark%20style=
  </body>
</html>

class Particle extends VerletParticle2D {
  constructor(x, y) {
    super(x, y);
    this.r = 2;
    physics.addParticle(this);
  }

  show() {
    fill(0);
    circle(this.x, this.y, this.r * 2);
  }
}

class Spring extends VerletSpring2D {
  constructor(a, b, strength) {
    let length = dist(a.x, a.y, b.x, b.y);
    super(a, b, length, strength);
    physics.addSpring(this);
  }

  show() {
    stroke(0, 50);
    line(this.a.x, this.a.y, this.b.x, this.b.y);
  }
}

const { VerletPhysics2D, VerletParticle2D, VerletSpring2D } = toxi.physics2d;

//const { GravityBehavior } = toxi.physics2d.behaviors;

const { Vec2D, Rect } = toxi.geom;

let physics;

let particles = [];
let springs = [];

function setup() {
  createCanvas(640, 360);

  physics = new VerletPhysics2D();

  let bounds = new Rect(0, 0, width, height);
  physics.setWorldBounds(bounds);

  particles.push(new Particle(200, 100));
  particles.push(new Particle(400, 100));
  particles.push(new Particle(350, 200));
  particles.push(new Particle(400, 300));
  particles.push(new Particle(200, 300));
  particles.push(new Particle(250, 200));

  springs.push(new Spring(particles[0], particles[1], 0.01));
  springs.push(new Spring(particles[1], particles[2], 0.01));
  springs.push(new Spring(particles[2], particles[3], 0.01));
  springs.push(new Spring(particles[3], particles[4], 0.01));
  springs.push(new Spring(particles[4], particles[5], 0.01));
  springs.push(new Spring(particles[5], particles[0], 0.01));
  springs.push(new Spring(particles[5], particles[2], 0.01));
  springs.push(new Spring(particles[0], particles[3], 0.01));
  springs.push(new Spring(particles[1], particles[4], 0.01));
}

function draw() {
  background(255);

  physics.update();

  fill(127);
  stroke(0);
  strokeWeight(2);
  beginShape();
  for (let particle of particles) {
    vertex(particle.x, particle.y);
  }
  endShape(CLOSE);

  for (let particle of particles) {
    particle.show();
  }

  for (let spring of springs) {
    spring.show();
  }

  if (mouseIsPressed) {
    particles[0].lock();
    particles[0].x = mouseX;
    particles[0].y = mouseY;
    particles[0].unlock();
  }
}

마우스를 클릭하여 개껌을 움직여 볼까요~~^^*

우리가 사랑하는 “팥들었슈?”는 이 개껌을 마음에 들어할까요?

네~~^^* 우리의 디자인을 “팥들었슈?”도 할아버지도 마음에 들어 하시는 것 같아요!

할아버지의 따뜻한 품성을 물려받아 따뜻한 그림을 그리는 어린이처럼

아버지의 따뜻한 품성을 물려받아 동생을 위해서 기도하는 어린이처럼

오늘 저와 함께 부모의 멋진 성품을 상속받고 청출어람청어람하는 Class Inheritance 클래스 상속을 적용하여 맛있는 팥알갱이가 콕콕 박혀 있는 “팥들었슈?” 개껌 그림을 완성해 주셔서 감사합니다~^^*

맨살에 닿는 공기가 시려운 아침이예요. 햇살은 쨍쩅하고 바람은 산들하네요.

오늘도 멋진 아침! 맞으시고요~!

시월의 좋은 날씨, 많이 누리는 하루 보내셔요~!

내일 우리 또 만나서, 새로운 도전!을 함께 할까요~^^*

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