소식 들으셨나요~~~^^* 세대 공감 10인조 댄스그룹이 오늘 데뷔한다고 합니다~~!!!
부모님들과 자녀분들이 함께 모여 아주 멋진 댄스그룹을 창단했다고 해요~~~^^*
오늘 그 댄스그룹을 만들어 보겠습니다~~^^*
아이돌그룹 제작자의 삶! 체험! 삶의 현장! 지금 바로 가보시죠~~~!!!
오늘은 서로 다른 종류의 존재들이 어울려 큰 일을 함께 해내는 것을 표현하는 프로그램을 만들어 보겠습니다~^^*
서로 다른 종류의 존재들이라, 모습도 몸동작도 서로 다를 수 있어요~^^* 하지만 서로 어울리며 어떤 큰 규모의 일의 흐름에 함께 넘실거린다고 할까요~^^*
어제 우리는 inheritance 상속을 배웠어요~^^* 이것에, polymorphism 다형성(다양한 모습을 띈다)을 더해 볼게요~^^*
부모 클래스인 Particle은 하얗고, 동그랗고, 상하좌우 -5 ~ 5 사이의 위치 변화를 했었지요?
자녀 클래스인 Confetti는 흑~백의 색변화가 있고, 사각형이고, 크기가 변하면서, 상하좌우 -5 ~5 사이의 위치 변화를 했었습니다~^^*
오늘은 이 두 클래스를 하나의 배열에 담아서, 이 배열을 하나의 객체로 다루어, 어떤 일을 이 배열에 지시하도록 해 볼게요~^^*
서로 다른 종류의 존재들이 하나의 군집을 이루고, 이 군집이 하나의 객체가 되어 어떤 행동을 합니다. 그 결과, 각 존재들의 고유한 특성을 유지하면서 큰 틀의 행동을 함께 하게 되는데요~^^* 이것을 다형성(polymorphism)이라고 볼 수 있겠네요~^^*
아래 동영상 강의를 클릭하시면, 오늘 공부 내용을 보실 수 있어요~^^*
먼저, 어제 배운 inheritance 상속을 한 번 더 연습해 볼게요~^^*
Class Particle의 특성과 행동양식을 Class Confetti가 상속 받았었지요?
이번에는 Class Particle이 p5.Vector의 특성과 행동양식을 상속 받도록 해 볼게요~^^*
그러면, p5.Vector는 Particle의 Parent, Super가 되겠네요~
위계관계를 정리해 보면, p5.Vector -> Particle -> Confetti가 되겠네요~^^*
class Particle extends p5.Vector {
//클래스 Particle이 클래스 p5.Vector의 자녀임을 선언합니다~^^*
constructor(x, y) {
super(x,y);
//부모 클래스 p5.Vector의 구성 특성을 그대로 상속 받습니다~^^*
this.vel = p5.Vector.random2D();
//무작위 방향의 단위벡터를 구성요소 vel에 저장하겠습니다~^^*
}
update() {
this.add(this.vel);
//속도를 반영하여, 동그라미가 움직이게 합니다~^^*
}
이제, 오늘의 하이라이트!!! 다형성(polymorphism)을 연습해 볼까요~~^^* YEAH!!!
50%확률로 부모 클래스 Particle과 자녀 클래스 Confetti를 생성하여, 배열 dancers[]에 저장해 보겠습니다.
함수random()은 0에서 1 사이의 수를 무작위로 생성합니다. 이 생성된 수가 0.5보다 작은 경우와 그렇지 않을 경우로 나누면, 50%의 확률을 표현하게 되겠지요~^^*
let dancers = [];
//부모 Particle과 자녀 Confetti가 함께 활동하는 세대공감 댄스그룹입니다!! Wow!!
function setup() {
createCanvas(400, 400);
for ( let i = 0; i <10 ; i++ ){
if (random() < 0.5) {
dancers[i] = new Particle(200, 200);
} else {
dancers[i] = new Confetti(200, 200);
}
}
//세대공감 10인조 댄스그룹의 50%는 부모 클래스 Particle 나머지 50%는 자녀 클래스 Confetti입니다~^^*
}그럼 이제 전체 프로그램 코드를 살펴 볼까요~^^*
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<script src="particle.js"></script>
<script src="confetti.js"></script>
<script src="sketch.js"></script>
</body>
</html>
//클래스 p5.Vector의 자녀 클래스인 Particle입니다.
//constructor(){}는 반드시 기술합니다. 부모 클래스에서 물려 받은 다른 함수들은 기술하지 않습니다. 새롭게 추가되는 내용만 기술합니다.
class Particle extends p5.Vector {
//클래스 Particle이 클래스 p5.Vector의 자녀임을 선언합니다~^^*
constructor(x, y) {
super(x,y);
//부모 클래스 p5.Vector의 구성 특성을 그대로 상속 받습니다~^^*
this.vel = p5.Vector.random2D();
//무작위 방향의 단위벡터를 구성요소 vel에 저장하겠습니다~^^*
}
update() {
this.add(this.vel);
//속도를 반영하여, 동그라미가 움직이게 합니다~^^*
//무작위적으로 처음 지정된 방향으로 단위길이 1만큼씩 계속 이동하게 되겠네요~^^*
}
show() {
stroke(255);
strokeWeight(24);
point(this.x, this.y);
}
//흰색의 큰 점으로 표현됩니다. 원처럼 보이겠네요~^^*
}
//클래스 Particle의 자녀 클래스인 Confetti입니다.
//클래스 p5.Vector의 손자녀 클래스이기도 합니다.
//constructor(){}는 반드시 기술합니다.
//update(){}, show(){} 등의 그외 함수는 내용 변화가 없다면 기술하지 않습니다.
class Confetti extends Particle {
//Particel에서 분파된 것이다라고 선언합니다.
constructor(x, y) {
super(x, y);
//부모 클래스의 constructor(x,y) {super(x,y); this.vel = p5.Vector.random2D();} 내용을 상속받습니다.
//조부모 클래스인 p5.Vector와 부모 클래스인 Particle의 내용을 상속받게 되네요~^^*
this.bright = random(255);
this.r = 10;
//부모 클래스에는 없는 구성요소들을 새롭게 첨가합니다.
//색종이 조각의 밝기는 0 ~ 255 사이 값을 가집니다.
//색종이 조각의 한 변의 길이는 10 픽셀입니다.
}
update() {
super.update();
// 부모 클래스의 update(){ this.add(this.vel);} 내용을 상속 받습니다.
this.r += random(-2, 2);
// 자녀 클래스에만 있는 구성요소인 this.r에 대한 내용을 기술합니다
//색종이 조각은 처음 무작위적으로 정해진 방향으로 단위길이 1만큼 계속 이동합니다.
//조각의 한 변은 -2 ~ 2 사이의 길이 변화값을 가집니다.
}
show() {
strokeWeight(1);
stroke(255);
fill(this.bright);
square(this.x, this.y, this.r);
//부모 클래스의 show(){}내용과 같은 부분이 없기 때문에, 완전히 새로운 내용으로 덮어 씁니다.
}
}let dancers = [];
//부모 Particle과 자녀 Confetti가 함께 활동하는 세대공감 댄스그룹입니다!! Wow!!
function setup() {
createCanvas(400, 400);
for ( let i = 0; i <10 ; i++ ){
if (random() < 0.5) {
dancers[i] = new Particle(200, 200);
} else {
dancers[i] = new Confetti(200, 200);
}
}
//세대공감 10인조 댄스그룹의 50%는 부모 클래스 Particle 나머지 50%는 자녀 클래스 Confetti입니다~^^*
}
function draw() {
background(50, 255, 100);
for( let d of dancers){
d.update();
d.show();
}
}
//부모: 원 자녀: 색종이 조각
//크기와 색상변화 없이 무작위적으로 처음 정해진 방향으로 계속 이동하는 원
//크기와 색상이 변화하면서 무작위적으로 처음 정해진 방향으로 계속 이동하는 색종이 조각
//이 잘 보이시나요~?^^*세대공감 10인조 댄스그룹의 멋진 데뷔 무대 우리 함께 할까요~^^* 큰 함성으로 맞이해 주세요~~~^^*
다양한 연령의 세대들이 함께 모여 새로운 섬을 찾아 떠나는 멋진 항해 군단처럼~
러시아워…..꽉 막힌 고속도로에서 함께 춤을 추며 기다림의 미학을 실천하는 각양각색의 출근러들처럼…
깃털의 색깔도 날개짓 모습도 다르지만, 쌈바의 리듬에 다함께 몸을 맡기는 앵무새들처럼~
물려 받은 공통점에 감사하고, 새롭게 구축해가는 개성에 서로 뿌듯해 하며, 삶이라는 크고 멋진 리듬에 다함께 너울대는 하루 보내 볼까요~^^*
오늘도 저와 함께 코딩 공부 해주셔서 감사합니다~~^^*
우리 내일 또 만나서 함께 코딩 공부 해요~~~^^*
네!!! 꿈은 이루어 집니다!!!
Silverback9 
댓글 남기기