인터랙티브한 웹페이지 만들기

수업 영상

html 기본 형식, p5.js 불러오기

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 웹에 공유되어있는 라이브러리 불러오기 -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js"></script>
        <script>
            // 여기에 입력
        </script>
    </head>
    <body>
    </body>
</html>

겹쳐진 도형의 레이어 순서

p5.js에서는 코딩하는 순서대로 도형을 그린다. 그래서 나중에 그린 도형이 더 위쪽 레이어로 표현된다.

JavaScript

function setup(){
    createCanvas(500, 500);
    background(235);

    fill(255,0,0);          // 빨강
    rect(50, 50, 100, 100);
    fill(0,255,0);          // 초록
    rect(60, 60, 100, 100);
    fill(0,0,255);          // 파랑
    rect(70, 70, 100, 100);

    fill(0,0,255);          // 파랑
    rect(270, 70, 100, 100);
    fill(0,255,0);          // 초록
    rect(260, 60, 100, 100);
    fill(255,0,0);          // 빨강
    rect(250, 50, 100, 100);
}

점, 선 그리기

point( x, y ): 지정한 좌표에 점을 그리는 함수이다.
line( x1, y1, x2, y2 ): 선을 그리는 함수이다. 두 점의 좌표를 잇는다.

JavaScript

function setup(){
    createCanvas(500, 500);
    background(235);
    
    // 150, 150 지점과 250, 250 지점 사이에 선을 그린다.
    line(150, 150, 250, 250);
}

점, 선의 색깔은 stroke() 함수를 이용해 지정할 수 있다.

마우스 클릭

mouseClicked(): 마우스 클릭시에 호출되는 이벤트 함수이다. 마우스 클릭은 마우스 프레스와 마우스 릴리즈가 합쳐진 결과이다. 즉 마우스버튼을 누르고 땠을 때를 의미한다.

JavaScript

function setup(){
    createCanvas(500, 500);
    background(50);
}

function mouseClicked(){
    // 마우스 클릭시 배경을 칠하고 붉은 원을 그린다.
    background(50);
    fill(255, 100, 50);
    ellipse(mouseX, mouseY, 30, 30);
}

마우스 프레스, 마우스 릴리즈

mousePressed(): 마우스 프레스시에 호출되는 이벤트 함수이다. 마우스를 누른 순간 동작한다.
mouseReleased(): 마우스 릴리즈시에 호출되는 이벤트 함수이다. 마우스를 땐 순간 동작한다.

JavaScript

function setup(){
    createCanvas(500, 500);
    background(50);
}

function mousePressed(){
    // 마우스버튼을 누를때 배경을 칠하고 붉은 원을 그린다.
    background(50);
    fill(255, 100, 50);
    ellipse(mouseX, mouseY, 30, 30);
}

function mouseReleased(){
    // 마우스버튼을 땔 때 녹색 원을 그린다.
    fill(100, 255, 50);
    ellipse(mouseX, mouseY, 30, 30);
}

선 잇기 예제

JavaScript

// 시작점을 저장할 변수를 만든다.
var startX;
var startY;

function setup(){
    createCanvas(500, 500);
    background(50);
    // 이후에 그릴 점, 선의 색을 지정한다.
    stroke(255);
}

function mousePressed(){
    // 마우스버튼을 누를때 배경을 칠하고 시작점을 찍는다.
    background(50);
    point(mouseX, mouseY);
    
    // 시작점의 좌표를 저장해둔다.
    startX = mouseX;
    startY = mouseY;
}

function mouseReleased(){
    // 마우스버튼을 땔 때 저장해둔 좌표와 현재 마우스 좌표사이에 선을 그린다.
    line(startX, startY, mouseX, mouseY);
}

마우스 드래그

mouseDragged(): 마우스 드래그중에 호출되는 이벤트 함수이다. 마우스를 누른 상태에서 움직일때마다 작동한다.

JavaScript

var circleSize = 30;

function setup(){
    createCanvas(500, 500);
    background(50);
}

function mouseDragged(){
    // 마우스를 드래그할때마다 원의 크기를 1씩 증가시킨다.
    circleSize = circleSize + 1;
    
    background(50);
    fill(255, 100, 50);
    ellipse(mouseX, mouseY, circleSize, circleSize);
}

선 잇기 예제2

JavaScript

// 시작점을 저장할 변수를 만든다.
var startX;
var startY;

function setup(){
    createCanvas(500, 500);
    background(50);
    // 이후에 그릴 점, 선의 색을 지정한다.
    stroke(255);
}

function mousePressed(){
    // 마우스버튼을 누를때 배경을 칠하고 시작점을 찍는다.
    background(50);
    point(mouseX, mouseY);
    
    // 시작점의 좌표를 저장해둔다.
    startX = mouseX;
    startY = mouseY;
}

function mouseDragged(){
    // 마우스를 드래그 할 때 배경을 칠하고 시작점과 현재 마우스 좌표 사이에 선을 그린다.
    background(50);
    line(startX, startY, mouseX, mouseY);
}

function mouseReleased(){
    // 마우스버튼을 땔 때 배경을 칠하고 저장해둔 좌표와 현재 마우스 좌표사이에 선을 그린다.
    background(50);
    line(startX, startY, mouseX, mouseY);
}

반복문

일정한 규칙에따라 반복적으로 실행해야하는 연산은 반복문을 이용해 코드를 간결하게 작성할 수 있다.

while ( 조건 ) { 동작 }: 조건이 참이면 중괄호 안의 코드를 반복적으로 실행한다. 조건이 참이 아닐시 반복문 밖으로 빠져나간다.

JavaScript

function setup(){
    createCanvas(500, 500);
    background(50);
    
    // x 150 위치에 y 0 부터 50 마다 30크기의 빨간 원을 10개 그린다.
    fill(255, 0, 0);
    ellipse(150, 0, 30, 30);
    ellipse(150, 50, 30, 30);
    ellipse(150, 100, 30, 30);
    ellipse(150, 150, 30, 30);
    ellipse(150, 200, 30, 30);
    ellipse(150, 250, 30, 30);
    ellipse(150, 300, 30, 30);
    ellipse(150, 350, 30, 30);
    ellipse(150, 400, 30, 30);
    ellipse(150, 450, 30, 30);
    
    // x 350 위치에 y 0 부터 50 마다 30크기의 녹색 원을 10개 그린다.
    fill(0, 255, 0);
    var count = 0;
    while(count < 10){
        ellipse(350, count*50, 30, 30);
        count = count + 1;
    }
}

for ( 초기값; 종결값; 변화조건 ) { 동작 }: 초기조건부터 반복문이 실행되며 변화조건에따라 초기값이 변화했을 때, 종결값에 다다를 때까지 반복문이 계속 된다.

JavaScript

function setup(){
    createCanvas(500, 500);
    background(50);
    
    // x 150 위치에 y 0 부터 50 마다 30크기의 녹색 원을 10개 그린다.
    fill(0, 255, 0);
    var count = 0;
    while(count < 10){
        ellipse(150, count*50, 30, 30);
        count = count + 1;
    }
    
    // x 350 위치에 y 0 부터 50 마다 30크기의 노란 원을 10개 그린다.
    fill(255, 255, 0);
    for(var count = 0; count < 10; count = count + 1){
        ellipse(350, count*50, 30, 30);
    }
}

패럴랙스 효과

패럴랙스(parallax) 효과: 관측 위치에 따라서 물체의 위치나 방향에서 차이가 생기는데 이것을 시각적으로 모사하는 효과이다. 물체의 가깝고 먼 비례에 따라 다른 크기와 속도를 적용한다.

여성의날 구글 두들: https://www.google.com/doodles/international-womens-day-2017
Firewatch 웹사이트: http://www.firewatchgame.com/
Kikk: http://www.kikk.be/2015/

패럴랙스 효과 구현하기

JavaScript

function setup(){
    createCanvas(500, 500);
}

function draw(){
    background(50);
    
    // 중심점을 기준으로 마우스가 얼마나 움직였는지를 구한다.
    var moveX = mouseX - 250;
    var moveY = mouseY - 250;
    
    // 반복의 index변수로 움직이는 거리와 원의 크기를 나눠준다.
    // 큰수로 나눈것이 더 멀기때문에 큰 수로 시작해서 가장 작은 수로 끝낸다.
    for(var i=5; i>=1; i=i-1){
        ellipse(250+(moveX/i), 250+(moveY/i), 200/i, 200/i);
    }
}