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

수업 영상

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에서 이미지 파일 불러오기

preload 함수: setup함수가 호출되기 전에 미리 호출되는 함수
loadImage( path ): 이미지 파일을 불러와 이미지 객체로 만드는 함수이다.; path : 이미지 파일의 경로를 받는다.; ex) loadImage( "https://hoc24.vn/images/avt/avt23281_256by256.jpg" )
image( img, x, y, width, height ): 이미지 객체를 canvas상에 그려주는 함수이다.; img : 이미지 객체를 받는다.

JavaScript

var img;
    
function preload() {
  img = loadImage("img/cat.png");
}

function setup() {
  createCanvas(500, 500);
  image(img, 0, 0);
}

Drawing Mode

p5.js 는 도형이나 이미지를 그릴때 어느지점을 기준으로 위치시킬지 함수를 통해 지정할 수 있다.

rectMode( mode ): mode : CENTER, RADIUS, CORNER, CORNERS
ellipseMode( mode ): mode : CENTER, RADIUS, CORNER, CORNERS
imageMode( mode ): mode : CENTER, CORNER, CORNERS

특정 영역 선택하기

사각형 영역 선택

JavaScript

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

function draw(){
    background(235);
    
    // X축 200과 300 사이, Y축 200과 300 사이에 마우스가 위치하면 색이 바뀐다.
    if( mouseX > 200 && mouseX < 300 
        && mouseY > 200 && mouseY < 300 ){
        
        fill(255, 0, 0);
        
    }
    else{
        fill(0);
    }
    
    // X축 200과 300 사이, Y축 200과 300 사이 공간에 사각형을 그린다.
    rect(200, 200, 100, 100);
}

원형 영역 선택

JavaScript

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

function draw(){
    background(235);
    
    // X,Y축 250, 250 위치(canvas중앙)로부터 거리가 100 안쪽으면 색깔이 변한다.
    if( dist(mouseX, mouseY, 250, 250) <  100){
        fill(255, 0, 0);
    }
    else{
        fill(0);
    }
    
    // X,Y축 250, 250 위치(canvas중앙)로부터 반지름이 100인 원을 그린다.
    ellipse(250, 250, 200, 200);
}

객체

객체(Object): 자신의 정보(변수, 함수)를 가지고 있는 독립적인 주체. 내부에 변수와 함수를 담을 수 있는 저장공간이라고 생각하면 된다.

객체의 배열

랜덤하게 이동하는 개체들

랜덤하게 움직이는 원

JavaScript

var position = [];

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

    for(var i=0; i<300; i=i+1){
        position.push({x:Math.random()*width, y:Math.random()*height});
    }


}

function draw(){
    background(235);

    for(var i=0; i<position.length;i=i+1){
        position[i].x = position[i].x + Math.random()*8 - 4;
        position[i].y = position[i].y + Math.random()*8 - 4;
        ellipse(position[i].x, position[i].y, 30, 30);
    }
}

랜덤한 움직임으로 오른쪽으로 움직이는 이미지들

JavaScript

var position = [];
var img;

function preload(){
    img = loadImage("img/cat.png");
}

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

    for(var i=0; i<300; i=i+1){
        position.push({x:Math.random()*width, y:Math.random()*height});
    }  
}

function draw(){
    background(235);

    for(var i=0; i<position.length;i=i+1){
        position[i].x = position[i].x + Math.random()*8;
        if(position[i].x > width) position[i].x = 0;

        position[i].y = position[i].y + Math.random()*8 - 4;

        image(img, position[i].x, position[i].y, img.width*0.1, img.height*0.1);
    }
}