오늘은 붉은 잎을 피워내 보겠습니다~~^^*
늦가을이니까요~~^^*
붉은 잎을 담을 배열도 준비해 볼게요~~^^*
나뭇가지의 끝부분을 복사해서 붉은 잎 모음 배열에 담을게요~
var leaves = [ ];
for (var i = 0 ; i < tree,length ; i++) {
if (!tree[i].finished) {
var leaf = tree[i].end.copy();
leaves.push(leaf);
}
}그런 다음~~^^* 붉은 잎을 차례대로 보여주면 되겠네요~^^*
for (var i = 0 ; i <leaves.length; i++) {
fill(255, 0, 100, 100);
nostroke();
ellipse(leaves[i].x, leaves[i].y, 8, 8);
}
//가을이니까 붉은 잎의 불투명도롤 좀 낮추어 볼게요~~^^*
//촉촉하게~~^^* 운치있게~~^^*전체 코드를 한 번 살펴 볼까요~~^^*
자연스러운 나뭇가지를 표현하기 위해 오른쪽 나뭇가지와 왼쪽 나뭇가지의 회전각에 무작위성을 살짝쿵 부여해 보았습니다~~^^*
<!DOCTYPE html>
<html lang="en">
<head>
https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js
<!-- https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js -->
https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
http://branch.js
http://sketch.js
</body>
</html>
class Branch {
constructor (begin, end) {
this.begin = begin;
this.end = end;
this.finished = false;
}
show() {
stroke(255);
line(this.begin.x, this.begin.y, this.end.x, this.end.y);
}
//생성된 나뭇가지를 보여주겠습니다~~^^*
branchR() {
var dir = p5.Vector.sub(this.end, this.begin);
//나뭇가지 시작점에서 나뭇가지 끝점으로 향하는 방향을 가진 벡터를 dir에 저장합니다.
dir.rotate(random(PI/6, PI/4));
//방향을 PI/6에서 PI/4사이 임의적으로 회전합니다.
dir.mult(0.7);
//나뭇가지 길이는 짧아지구요~^^*
var newEnd = p5.Vector.add(this.end, dir);
//나뭇가지 끝점에서 dir 방향으로 향하는 새로운 벡터를 newEnd에 저장합니다.
var right = new Branch (this.end, newEnd);
//현재의 끝점과 새로운 끝점 사이에 새로운 나뭇가지를 만들어 right에 저장합니다.
return right;
//생성된 나뭇가지 right를 return합니다.
}
branchL() {
var dir = p5.Vector.sub(this.end, this.begin);
//나뭇가지 시작점에서 나뭇가지 끝점으로 향하는 방향을 가진 벡터를 dir에 저장합니다.
dir.rotate(random(-PI/4, -PI/6));
//방향을 -PI/4에서 -PI/6사이 임의적으로 회전합니다.
dir.mult(0.7);
//나뭇가지 길이는 짧아지구요~^^*
var newEnd = p5.Vector.add(this.end, dir);
//나뭇가지 끝점에서 dir 방향으로 향하는 새로운 벡터를 newEnd에 저장합니다.
var left = new Branch (this.end, newEnd);
//현재의 끝점과 새로운 끝점 사이에 새로운 나뭇가지를 만들어 left에 저장합니다.
return left;
//생성된 나뭇가지 left를 return합니다.
}
}
//메인 함수에서 시작지점과 끝지점을 parameter 매개변수로 넘겨받으며 호출될 것 같네요~~^^*
//Object 객체인 Class 나뭇가지입니다~~^^* var leaves = [];
var tree = [];
var count = 0;
function setup() {
createCanvas(400, 400);
var a = createVector(width/2, height);
var b = createVector(width/2, height - 100);
var root = new Branch(a, b);
tree[0] = root;
//나무 기둥 root도 나뭇가지 모음 배열인 tree[]에 넣어 볼게요.
//root를 배열 tree[]의 맨 첫번째 구성요소인 tree[0]에 저장합니다~^^*
}
function mousePressed() {
count++;
print(count);
if (count >= 12) {
print("Hey, it's time to stop clicking. It's enough.")
}
for(i = tree.length - 1; i >= 0; i--) {
if(!tree[i].finished ){
tree.push(tree[i].branchR());
tree.push(tree[i].branchL());
}
tree[i].finished = true;
}
for (var i = 0 ; i < tree.length ; i++) {
if (!tree[i].finished) {
var leaf = tree[i].end.copy();
leaves.push(leaf);
}
}
//나뭇가지 끝에 잎이 피어나요~~^^*
//나무의 생명력은 강하면서도 고우네요~~^^*
}
function draw() {
background(51);
for (var i = 0; i < tree.length; i++) {
tree[i].show();
}
for (var i = 0 ; i <leaves.length; i++) {
fill(255, 0, 100, 100);
noStroke();
ellipse(leaves[i].x, leaves[i].y, 8, 8);
}
//늦가을이라 잎들이 촉촉하면서도 붉어져요~~^^*
//아름다운 가을 정취를 표현해 볼까요~~^^*
}울긋불긋 자연스럽고 아름다운 가을의 나무를 보러 갑시다~~^^*
이번에는 늦가을 태풍에 붉은 잎들이 후두둑 떨어지는 장관을 펼쳐 볼까요?
마우스 클릭 12번째에 프로그램이 느려진다는 안내 멘트가 나가면서
붉은 잎들이 속절없이 떨어지는 모습을 표현해 볼게요~^^*
그 모습이 너무 아름다와서 더 이상 마우스 클릭을 할 정신이 없도록 만들어 보겠어요!
왜냐면!! 자꾸 마우스 클릭하면 컴퓨터가 정말 힘들어 하니까요~~!!^^*
var leaves = [];
var tree = [];
var count = 0;
function setup() {
createCanvas(400, 400);
var a = createVector(width/2, height);
var b = createVector(width/2, height - 100);
var root = new Branch(a, b);
tree[0] = root;
//나무 기둥 root도 나뭇가지 모음 배열인 tree[]에 넣어 볼게요.
//root를 배열 tree[]의 맨 첫번째 구성요소인 tree[0]에 저장합니다~^^*
}
function mousePressed() {
count++;
print(count);
if (count >= 12) {
print("Hey, it's time to stop clicking. It's enough.")
}
for(i = tree.length - 1; i >= 0; i--) {
if(!tree[i].finished ){
tree.push(tree[i].branchR());
tree.push(tree[i].branchL());
}
tree[i].finished = true;
}
if(count < 12) {
for (var i = 0 ; i < tree.length ; i++) {
if (!tree[i].finished) {
var leaf = tree[i].end.copy();
leaves.push(leaf);
}
}
//나뭇가지 끝에 잎이 피어나요~~^^*
//나무의 생명력은 강하면서도 고우네요~~^^*
}
}
function draw() {
background(51);
for (var i = 0; i < tree.length; i++) {
tree[i].show();
}
for (var i = 0 ; i <leaves.length; i++) {
fill(255, 0, 100, 100);
noStroke();
ellipse(leaves[i].x, leaves[i].y, 8, 8);
if (count === 12) {
leaves[i].y += random(0, 10);
leaves[i].x += random(-10,10);
}
}
//늦가을이라 잎들이 촉촉하면서도 붉어져요~~^^*
//아름다운 가을 정취를 표현해 볼까요~~^^*
}마우스 12번째 클릭 후 붉은 잎이 떨어지는 장관을 보러 가볼까요~~^^* 13번째 클릭하면 화면이 한참 느려지는 것 같아요~~^^* 딱 12번만 클릭해 보셔요~~^^*
오늘 저와 함께 붉은 잎이 아름다운 늦가을 나무, 잎이 떨어지는 것조차 아름다운 늦가을 나무를 표현해 주셔서 감사합니다~^^*
Object Oriented 객체지향 Fractal 프랙탈 나무 코드 공부를 또 우리가 함께 끝내었네요~~^^*
우리 내일은 월요일이니까~~^^* 편안하게 음악 함께 들을까요~~^^*
그리고 화요일 또 다른 도전을 우리 함께 맞이해 보면 좋겠어요~~^^*
작은 도토리가 붉은 잎을 떨어뜨리는 큰 나무가 되기까지 우리의 도전을 계속 해 볼까요~?
오늘도 멋진 하루 보내시고요!
내일 우리 또 만나요~!
네~~!!! 꿈은 이루어 집니다~~!!!
Silverback9 
댓글 남기기