예제 미리보기

수업 영상

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>

요소 옮기기

JavaScript
var elemX = 250;
var elemY = 250;
var elemSize = 100;
var dragging = false;

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

function draw(){
    background(235);

    // 드래그 중에 마우스가 움직인 만큼 요소를 움직여준다
    if(dragging){
        elemX = elemX + (mouseX - pmouseX);
        elemY = elemY + (mouseY - pmouseY);
    }


    // 요소의 영역안에 마우스가 들어왔을때 색상과 커서모양을 바꿔준다
    if(dist(mouseX, mouseY, elemX, elemY) < elemSize/2){
        fill(255, 100, 50);
        cursor(HAND);
    }
    else{
        fill(50);
        cursor(ARROW);
    }

    // 요소 그리기
    ellipse(elemX, elemY, elemSize, elemSize);
}

// 마우스 버튼을 누른 순간
function mousePressed(){
    // 요소의 영역안에 마우스가 있다면 드래그를 시작한다
    if(dist(mouseX, mouseY, elemX, elemY) < elemSize/2){
        dragging = true;
    }
}
            
// 마우스 버튼에서 손을 땐 순간
// 드래그를 마친다
function mouseReleased(){
    dragging = false;
}

목표물에 스냅 시키기

JavaScript
// 요소 변수
var elemX = 150;
var elemY = 150;
var elemSize = 150;
var dragX = elemX;
var dragY = elemY;

// 목표물 변수
var targetX = 350;
var targetY = 350;
var targetSize = elemSize + 10;

// 스위치 변수
var dragging = false;
var snapped = false;

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

function draw(){
    background(235);

    // 드래그 중이라면
    if(dragging == true){
        // 마우스가 움직인 만큼 요소를 움직여준다
        dragX = dragX + (mouseX - pmouseX);
        dragY = dragY + (mouseY - pmouseY);

        // 목표물 지름의 1/4 안에 요소(중심점)가 들어왔다면
        if(dist(targetX, targetY, dragX, dragY) < targetSize/4){
            // 목표물의 좌표에 요소의 좌표를 맞춘다 (Snap)
            elemX = targetX;
            elemY = targetY;

            // 스냅 되었다는 스위치를 킨다
            snapped = true;

        }
        // 그렇지 안다면, 목표물 영역 밖에 요소가 있다면
        else{
            // 드래그 좌표에 요소 좌표를 맞춘다
            elemX = dragX;
            elemY = dragY;

            // 스냅 되었다는 스위치를 끈다
            snapped = false;
        }
    }

    // 스냅이 되었으면, 목표물 외곽선에 붉은색을 칠한다
    if(snapped == true) stroke(255, 100, 50);
    // 그렇지 않다면, 목표물 외곽선에 밝은회색을 칠한다
    else stroke(200);

    // 목표물 그리기
    strokeWeight(3);
    noFill();
    ellipse(targetX, targetY, targetSize, targetSize);


    // 요소의 영역안에 마우스가 들어왔거나 드래그중일때, 커서모양을 바꿔준다
    if(dist(mouseX, mouseY, elemX, elemY) < elemSize/2 || dragging){
        cursor(HAND);
    }
    else{
        cursor(ARROW);
    }

    // 스냅이 되었으면, 요소에 붉은색을 칠한다
    if(snapped == true) fill(255, 100, 50);
    // 그렇지 않다면, 요소에 회색을 칠한다
    else fill(150);

    // 요소 그리기
    noStroke();
    ellipse(elemX, elemY, elemSize, elemSize);
}

// 마우스 버튼을 누른 순간
function mousePressed(){
    // 요소의 영역안에 마우스가 있다면 드래그를 시작한다
    if(dist(mouseX, mouseY, elemX, elemY) < elemSize/2){
        dragging = true;
    }
}

// 마우스 버튼에서 손을 땐 순간
function mouseReleased(){
    // 드래그를 마친다
    dragging = false;

    // 보이는 요소 좌표를 드래그 요소에 대입한다
    dragX = elemX;
    dragY = elemY;
}

격자에 스냅 시키기

JavaScript
// 요소 변수
var elemX = 150;
var elemY = 150;
var elemSize = 50;
var dragX = elemX;
var dragY = elemY;

// 격자 변수
var gridGap = 50;
var snapSize = gridGap;

// 스위치 변수
var dragging = false;

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

function draw(){
    background(235);

    // 드래그 중이라면
    if(dragging == true){
        // 마우스가 움직인 만큼 요소를 움직여준다
        dragX = dragX + (mouseX - pmouseX);
        dragY = dragY + (mouseY - pmouseY);

        
        // 요소 좌표에 미리 드래그 좌표를 넣어둔다
        elemX = dragX;
        elemY = dragY;
        
        // 각 격자 영역 안에 요소(중심점)가 들어왔다면
        // 각 격자에대한 스냅을 시킨다
        // 그렇지않다면 위에 설정한 드래그 좌표대로 요소좌표가 결정된다
        for(var col=gridGap; col<width; col=col+gridGap){
            for(var row=gridGap; row<width; row=row+gridGap){
                if(dist(col, row, dragX, dragY) < snapSize/2){
                    // 격자 칸 좌표에 요소의 좌표를 맞춘다 (Snap)
                    elemX = col;
                    elemY = row;
                }
            }
        }
    }
    
    // 격자 영역 확인하기
    /*
    stroke(200);
    noFill();
    for(var col=gridGap; col<width; col=col+gridGap){
        for(var row=gridGap; row<width; row=row+gridGap){
            ellipse(col, row, snapSize, snapSize);
        }
    }
    */

    // 격자 그리기
    stroke(200);
    strokeWeight(2);
    for(var col=gridGap; col<width; col=col+gridGap){
        line(col, 0, col, height);
    }
    for(var row=gridGap; row<width; row=row+gridGap){
        line(0, row, height, row);
    }

    // 요소의 영역안에 마우스가 들어왔거나 드래그중일때, 커서모양을 바꿔준다
    if(dist(mouseX, mouseY, elemX, elemY) < elemSize/2 || dragging){
        cursor(HAND);
    }
    else{
        cursor(ARROW);
    }

    // 요소 그리기
    noStroke();
    fill(50);
    ellipse(elemX, elemY, elemSize, elemSize);
}

// 마우스 버튼을 누른 순간
function mousePressed(){
    // 요소의 영역안에 마우스가 있다면 드래그를 시작한다
    if(dist(mouseX, mouseY, elemX, elemY) < elemSize/2){
        dragging = true;
    }
}

// 마우스 버튼에서 손을 땐 순간
function mouseReleased(){
    // 드래그를 마친다
    dragging = false;

    // 보이는 요소 좌표를 드래그 요소에 대입한다
    dragX = elemX;
    dragY = elemY;
}

두 지점 잇기

JavaScript
// 요소1 변수
var elem1X = 150;
var elem1Y = 350;
var drag1X = elem1X;
var drag1Y = elem1Y;

// 요소1 스위치 변수
var dragging1 = false;
var dragging2 = false;

// 요소2 변수
var elem2X = 350;
var elem2Y = 350;
var drag2X = elem2X;
var drag2Y = elem2Y;

// 요소2 스위치 변수
var snapped1 = false;
var snapped2 = false;

// 요소 크기 변수
var elemSize = 20;

// 목표물1 변수
var target1X = 100;
var target1Y = 250;

// 목표물1 변수
var target2X = 400;
var target2Y = 250;

// 목표물 크기 변수
var targetSize = elemSize + 10;

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

function draw(){
    background(235);

    // 요소1 드래그 중이라면
    if(dragging1 == true){
        // 마우스가 움직인 만큼 요소1 드래그좌표를 움직여준다
        drag1X = drag1X + (mouseX - pmouseX);
        drag1Y = drag1Y + (mouseY - pmouseY);

        // 목표물1 지름의 1/4 안에 요소1(중심점)이 들어왔다면
        if(dist(target1X, target1Y, drag1X, drag1Y) < targetSize/4){
            // 목표물1의 좌표에 요소1의 좌표를 맞춘다 (Snap)
            elem1X = target1X;
            elem1Y = target1Y;

            // 요소1이 스냅 되었다는 스위치를 킨다
            snapped1 = true;

        }
        // 그렇지 안다면, 목표물 영역 밖에 요소가 있다면
        else{
            // 요소1 드래그 좌표에 요소1 좌표를 맞춘다
            elem1X = drag1X;
            elem1Y = drag1Y;

            // 요소1이 스냅 되었다는 스위치를 끈다
            snapped1 = false;
        }
    }

    // 요소2 드래그 중이라면
    if(dragging2 == true){
        // 마우스가 움직인 만큼 요소2 드래그좌표를 움직여준다
        drag2X = drag2X + (mouseX - pmouseX);
        drag2Y = drag2Y + (mouseY - pmouseY);

        // 목표물2 지름의 1/4 안에 요소2(중심점)이 들어왔다면
        if(dist(target2X, target2Y, drag2X, drag2Y) < targetSize/4){
            // 목표물2의 좌표에 요소2의 좌표를 맞춘다 (Snap)
            elem2X = target2X;
            elem2Y = target2Y;

            // 요소2이 스냅 되었다는 스위치를 킨다
            snapped2 = true;

        }
        // 그렇지 안다면, 목표물 영역 밖에 요소가 있다면
        else{
            // 요소2 드래그 좌표에 요소2 좌표를 맞춘다
            elem2X = drag2X;
            elem2Y = drag2Y;

            // 요소2이 스냅 되었다는 스위치를 끈다
            snapped2 = false;
        }
    }

    //// 목표물 1

    // 스냅이 되었으면, 목표물 외곽선에 붉은색을 칠한다
    if(snapped1 == true) stroke(255, 100, 50);
    // 그렇지 않다면, 목표물 외곽선에 회색을 칠한다
    else stroke(150);

    // 목표물1 그리기
    strokeWeight(3);
    noFill();
    ellipse(target1X, target1Y, targetSize, targetSize);

    //// 목표물 2

    // 스냅이 되었으면, 목표물 외곽선에 녹색을 칠한다
    if(snapped2 == true) stroke(100, 255, 50);
    // 그렇지 않다면, 목표물 외곽선에 회색을 칠한다
    else stroke(150);

    // 목표물2 그리기
    strokeWeight(3);
    noFill();
    ellipse(target2X, target2Y, targetSize, targetSize);


    // 요소1의 영역안에 마우스가 들어왔거나, 요소2의 영역안에 마우스가 들어왔거나, 드래그 중이라면 커서모양을 바꿔준다
    if(dist(mouseX, mouseY, elem1X, elem1Y) < elemSize/2 || dist(mouseX, mouseY, elem2X, elem2Y) < elemSize/2 || dragging1 || dragging2){
        cursor(HAND);
    }
    else{
        cursor(ARROW);
    }

    // 요소 연결 선
    stroke(150);
    strokeWeight(3);
    line(elem1X, elem1Y, elem2X, elem2Y);

    //// 요소1

    // 스냅이 되었으면, 요소에 붉은색을 칠한다
    if(snapped1 == true) fill(255, 100, 50);
    // 그렇지 않다면, 요소에 회색을 칠한다
    else fill(150);

    // 요소1 그리기
    noStroke();
    ellipse(elem1X, elem1Y, elemSize, elemSize);

    //// 요소2

    // 스냅이 되었으면, 요소에 녹색을 칠한다
    if(snapped2 == true) fill(100, 255, 50);
    // 그렇지 않다면, 요소에 회색을 칠한다
    else fill(150);

    // 요소2 그리기
    noStroke();
    ellipse(elem2X, elem2Y, elemSize, elemSize);
}

// 마우스 버튼을 누른 순간
function mousePressed(){
    // 요소1의 영역안에 마우스가 있다면 드래그1를 시작한다
    if(dist(mouseX, mouseY, elem1X, elem1Y) < elemSize/2){
        dragging1 = true;
    }
    // 요소2의 영역안에 마우스가 있다면 드래그1를 시작한다
    else if(dist(mouseX, mouseY, elem2X, elem2Y) < elemSize/2){
        dragging2 = true;
    }
}

// 마우스 버튼에서 손을 땐 순간
function mouseReleased(){
    // 모든 드래그를 마친다
    dragging1 = false;
    dragging2 = false;

    // 보이는 모든 요소 좌표를 모든 드래그 좌표에 대입한다
    drag1X = elem1X;
    drag1Y = elem1Y;
    drag2X = elem2X;
    drag2Y = elem2Y;
}