오늘은 캔버스의 왼편 위쪽 모서리에 위치한 원점(0,0)을 특정 좌표로 옮기는 함수 translate(x,y)와 단위 1 길이와 무작위 방향을 가진 벡터를 생성하는 함수 random2D(), 그리고 벡터에 scalar 값을 곱하여 벡터의 길이를 늘이는 함수 mult()를 공부하였습니다. 아래 동영상을 클릭하여 강의를 보신 후 노트 정리 내용을 참고해 보셔도 좋을 것 같습니다.
하나. 원점을 캔버스 정중앙으로 옮긴 후 새로운 원점과 오른쪽 방향 100 아래쪽 방향 50 떨어진 점을 잇는 선을 그려보았습니다.
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
translate( width / 2 , height / 2); //캔버스 정중앙으로 원점을 옮겨옴
let v = createVector(100, 50);
//정중앙(0,0)에서 x축 100, y축 50 떨어진 곳에 벡터 생성
strokeWeight(4);
stroke(255);
line(0, 0, v.x, v.y);//정중앙(0,0)과 벡터 좌표점을 잇는 선을 그림
}이것을 클릭하여 코드를 보시고 삼각형을 눌러 프로그램을 실행해 보시고 사각형을 눌러 종료해 보세요.
둘. 캔버스 정중앙에서 왼쪽 100과 오른쪽 100 사이 그리고 위쪽 100과 아래쪽 100 사이 무작위 (x,y) 좌표에 닿는 길이를 가진 선을 그려보았습니다.
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
translate( width / 2 , height / 2);
let v = createVector(random(-100, 100), random(-100, 100));
//정중앙(0,0) 기준 x축,y축 -100에서 100 사이 무작위 수의 좌표값을 가진 벡터 생성
strokeWeight(4);
stroke(255);
line(0, 0, v.x, v.y);
}이것을 클릭하여 코드를 보시고 삼각형을 눌러 프로그램을 실행해 보시고 사각형을 눌러 종료해 보세요.
셋. 무한 반복 함수인 draw() 안에 있던 background(0)를 지우고 setup() 함수 안에서 단 한번만 background(0)를 실행하여, 선이 한 번 그려지면 계속 그 자취가 남아있도록 만들어 보았습니다. 한참 동안 프로그램을 실행시키고 있으면 가로 200 세로 200 길이의 하얀 정사각형이 되어 있을 것입니다.
function setup() {
createCanvas(400, 400);
background(0);//캔버스를 단 한 번만 검은색으로 칠함
}
function draw() {
translate( width / 2 , height / 2);
let v = createVector(random(-100, 100), random(-100, 100));
strokeWeight(4);
stroke(255);
line(0, 0, v.x, v.y);
}이것을 클릭하여 코드를 보시고 삼각형을 눌러 프로그램을 실행하고 사각형을 눌러 종료해 보세요.
넷. 무작위 방향과 1unit 길이를 가진 벡터를 random2D()를 사용하여 생성하고, mult(100)을 사용하여 그 길이를 100배 늘여보았습니다. 한참 실행시키고 있다보면 반지름 100의 흰 원이 되어 있을 것입니다.
function setup() {
createCanvas(400, 400);
background(0);
}
function draw() {
translate( width / 2 , height / 2);
v = p5.Vector.random2D();
// any direction with unit length 벡터 생성
v.mult(100);
//백터 length 100배 길어짐 1 unit -> 100 unit
strokeWeight(4);
stroke(255);
line(0, 0, v.x, v.y);
}이것을 클릭하여 코드를 보시고 삼각형을 눌러 프로그램을 실행하고 사각형을 눌러 종료해 보세요.
다섯. 무작위 방향과 unit 길이를 가진 벡터를 생성하여 그 길이를 50과 100 사이 무작위 수의 배로 늘립니다. 선의 Opacity 값을 50으로 낮추어 투명도를 높여 보았습니다. 한참 실행시키고 있다보면 왠지 모르게 예쁘장한 광원이 생겨납니다. 쫌 많이 예쁘더라구요. 풋~^^*
function setup() {
createCanvas(400, 400);
background(0);
}
function draw() {
translate( width / 2 , height / 2);
v = p5.Vector.random2D();
v.mult(random(50,100));
//벡터 길이를 50에서 100 사이의 무작위 수의 배로 늘림
strokeWeight(4);
stroke(255, 50); //선의 투명도를 높임 <= Opacity 값을 낮춤
line(0, 0, v.x, v.y);
}이것을 클릭하여 코드를 보시고 삼각형을 눌러 프로그램을 실행하고 사각형을 눌러 종료해 보세요.
여섯. 지난 시간에 만든 Class Walker를 살짝 수정해 보았습니다. (x,y) 좌표를 가진 위치 벡터를 생성합니다. random2D()를 사용하여 무작위 방향과 Unit 길이를 가진 벡터를 생성하여 변화량 벡터로 활용합니다. 이 변화량 벡터의 길이를, mult() 함수를 사용하여, 0에서 3 사이의 무작위 수의 배로 늘립니다. 변화량 벡터를 위치 벡터에 더하여 다음 위치를 산출합니다. 이 프로그램은 시작버튼과 종요버튼을 반복적으로 누르면 원의 이동 방향과 이동변화량이 달라지는 것을 볼 수 있습니다.
class Walker{
constructor(x, y) {
this.pos = createVector(x,y); //위치 벡터
this.vel = p5.Vector.random2D();
//무작위 방향의 1 unit 길이 벡터 생성 <= 변화량 벡터
this.vel.mult(random(3));
// 변화량 벡터의 길이를 0에서 3 사이의 무작위 수의 배로 늘림
}
update(){
this.pos.add(this.vel);
}
show(){
stroke(255);
strokeWeight(2);
fill(255,100);
ellipse(this.pos.x, this.pos.y, 32);
point(this.pos.x, this.pos.y);
}
}
이것을 클릭하여 코드를 보시고 삼각형과 사각형을 번갈아 눌러가며 원의 이동방향과 이동거리 변화량의 다양성(무작위성)을 체험해 보세요.
오늘은 왠지 모르게 예쁘장하게 보이는 광원처럼 보이는 결과물을 만들 수 있어서 신기했습니다. p5.js The Nature of Code는 물리엔진의 내부 작동 원리를 이해할 수 있는 과정이기도 하여 공부가 즐겁습니다. 이러한 원리를 이용하여 작동하는 물리엔진을 사용하여 멋진 멀티미디어 작품을 만들어 볼 미래도 기대가 됩니다. 현재와 미래는 여기에 함께 있습니다. 꿈은 이루어 집니다!!
Silverback9 
댓글 남기기