오늘은 8월8일이예요~^^* 같은 숫자가 겹치는 날은 행운의 날이고, 천사가 우리 곁에 있다는 것을 알려주는 날이라고 하던데요….
11월11일이 그래서 가장 큰 행운의 날이라고…
근데 오늘도 8월8일이라 행운의 날이 되겠네요~~^^* YEAH!!!
그래서일까요???
오늘 지하철 기관사님이, 물 위를 지나고 있을 때, 아주 멋진 시를 낭송해 주셨어요~^^*
비오는 날이라 우리가 우산을 쓰게 되는 날이기도 한데요~~ 이 우산에 관한 시였어요~~^^*
네!! 저에게는 검은색 접는 우산이 있어요~~^^* 제가 우산을 펼쳐서 잡고 있으니까요~~ 이 우산 속으로 들어와서 우리 함께 코딩 공부해요~~~^^* YEAH!!! 저의 오른쪽 어깨는 젖어도 괜찮아요!!! 오히려 기쁨이요 영광이겠지요~~!!!
빗기운 머금은 공기를 여기저기 말려주는 에어컨 수건이 부지런한 손길로 열심히 일하고 있는 공간에 들어와, 비오는 날 Down 따뜻한 커피와~ 상큼한 샌드위치를 두고 있으니 이곳이 패러다이스~~^^*
넵!! 샌드위치 한 조각 드셔도 되어요~~ 샌드위치 앙~~~
샌드위치 오물오물거리며 우리 슬슬 코딩 공부 시작해 볼까요~~~^^* YEAH~~~^^*!!!
오늘은 자연스런 연의 실을 드디어! 마무리! 해보겠습니다~~!!!
어색한 연의 실에서 자연스런 연의 실로 진화하는 과정을 되짚어 보기 위해, 복습 삼아 지난 주 공부 내용부터 다시 동영상 강의를 보는 것이 어떨까요~^^*
아래 동영상 강의를 클릭하시면 복습공부 내용부터 바로 시작(10:17)하실 수 있어요~~^^* 12:25까지 보시면 오늘 공부 끝~~^^*
핵심 코드 공부도 마쳤고~, p5.js의 배열 Array는 동적 배열 Dynamic Array라는 것도 살펴 보았고~, 복습 영상도 보았으니~~ 오늘은 바로! 전체 코드로 입수~~~!!! 촤아아!!!
<!DOCTYPE html>
<html>
<head>
https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
http://vehicle.js
http://sketch.js
</body>
</html>
class Vehicle {
constructor(x, y) {
this.pos = createVector(x, y);
this.vel = createVector(1, 0);
this.acc = createVector(0, 0);
this.maxSpeed = 4;
this.maxForce = 0.2;
this.r = 16;
this.wanderTheta = PI/3;
this.currentPath = [];
this.paths = [this.currentPath];
//캔버스 안에서 활동할 동안의 vehicle의 위치좌표를 모으는 배열this.currentPath
//배열 this.currentPath들을 모으는 배열 this.paths
}
wander() {
let wanderPoint = this.vel.copy();
wanderPoint.setMag(100);
wanderPoint.add(this.pos);
fill(255, 0, 0);
noStroke();
circle(wanderPoint.x, wanderPoint.y, 16);
let wanderRadius = 50;
noFill();
stroke(255);
circle(wanderPoint.x, wanderPoint.y, wanderRadius * 2);
line(this.pos.x, this.pos.y, wanderPoint.x, wanderPoint.y);
let theta = this.wanderTheta + this.vel.heading();
let x = wanderRadius * cos(theta);
let y = wanderRadius * sin(theta);
wanderPoint.add(x, y);
fill(0, 0, 255);
noStroke();
circle(wanderPoint.x, wanderPoint.y, 16);
stroke(255);
line(this.pos.x, this.pos.y, wanderPoint.x, wanderPoint.y);
let steer = wanderPoint.sub(this.pos);
steer.setMag(this.maxForce);
this.applyForce(steer);
let displaceRange = 0.3;
this.wanderTheta += random(-displaceRange, displaceRange);
}
applyForce(force) {
this.acc.add(force);
}
update() {
this.vel.add(this.acc);
this.vel.limit(this.maxSpeed);
this.pos.add(this.vel);
this.acc.set(0, 0);
this.currentPath.push(this.pos.copy());
//vehicle의 위치좌표를 수집합니다.
}
show() {
stroke(255);
strokeWeight(2);
fill(255);
push();
translate(this.pos.x, this.pos.y);
rotate(this.vel.heading());
triangle(-this.r, -this.r / 2, -this.r, this.r / 2, this.r, 0);
pop();
for (let path of this.paths) {
beginShape();
noFill();
for ( let v of path) {
vertex(v.x, v.y);
}
endShape();
}
//화면 안 움직임만을 모은 path들이 점들을 연결합니다.
}
edges() {
let hitEdge = false;
if (this.pos.x > width + this.r) {
this.pos.x = -this.r;
hitEdge = true;
} else if (this.pos.x < -this.r) {
this.pos.x = width + this.r;
hitEdge = true;
}
if (this.pos.y > height + this.r) {
this.pos.y = -this.r;
hitEdge = true;
} else if (this.pos.y < -this.r) {
this.pos.y = height + this.r;
hitEdge = true;
}
//vehicle이 화면 밖을 나가면 좌<->우 상<->하 이동하여 화면 안에 다시 들어올 준비를 합니다.
//화면 밖으로 나간다는 token hitEdge를 활성화시킵니다.
if(hitEdge) {
this.currentPath = [];
this.paths.push(this.currentPath);
}
//vehicle이 화면 밖으로 나가면, 화면 안 움직임을 기록하는 currentPath를 새로 만듭니다.
//currentPath들을 모으는 배열 path의 끝에 넣습니다.
}
}let vehicle;
function setup() {
createCanvas(400, 400);
vehicle = new Vehicle(100, 100);
}
function draw() {
background(0);
vehicle.wander();
vehicle.update();
vehicle.show();
vehicle.edges();
}한결 자연스러워진 연의 실이 하늘에 펼쳐지는 모습을 바라보러 저 언덕 위로 달려가 볼까요~~~^^*
네!!! 세상에서 가장 긴 연의 실을 우리가 만들어 내었습니다!!! 축하합니다!!! 감사합니다!!!
와우!!! 신기한 연들이 많이 있네요~~~!!! 발명의 마음은 참 신기한 것들을 빚어 내는 것 같아요~!!!!
오늘 저와 함꼐 자연스러운 연의 실을 완성해 주셔서 감사합니다!!!
우리 내일은 컴퓨터가 좀더 일하기 편하도록, 연의 실을 최적화하는 것에 마음을 기울여 볼까요~~^^*
네!! 함꼐 고민하며 개선하는 마음은 세상을 편안하게 만들어 가는 것 같아요!!!
내일 우리 또 만나요~~^^*
네!!! 꿈은 이루어 집니다~~~!!!
Silverback9 
댓글 남기기