Drag & Drop

예제 미리보기

수업 영상

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

function setup(){
    createCanvas(500, 500);
    rect(100, 100, 200, 200);
}

원 그리기

JavaScript

function setup(){
    createCanvas(500, 500);
    ellipse(100, 100, 200, 200);
}

변수

변수 선언 방법

JavaScript

var 변수이름;

변수 정의하기 (변수에 값 넣기)

JavaScript

var 변수이름 = 값;
        
// 또는

var 변수이름;
변수이름 = 값;

특정영역 이벤트

사각형 영역

JavaScript

var rectX = 200;
var rectY = 200;
var rectSize = 100;

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

function draw(){
    background(255);
    
    if( mouseX > rectX && mouseX < rectX+rectSize && mouseY > rectY && mouseY < rectY+rectSize ){
        fill(255, 0, 0);
    }
    else{
        fill(255);
    }
    
    rect(rectX, rectY, rectSize, rectSize);
}

원 영역

JavaScript

var circleX = 250;
var circleY = 250;
var circleSize = 100;

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

function draw(){
    background(255);
    
    // 마우스와 원 중심의 거리가 반지름보다 작을때 (원의 경계 안쪽에 들어왔을 때)
    if( dist(mouseX, mouseY, circleX, circleY) < circleSize/2 ){
        fill(255, 0, 0);
    }
    else{
        fill(255);
    }
    
    ellipse(circleX, circleY, circleSize, circleSize);
}

마우스 이벤트

mouseIsPressed 변수

JavaScript

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

function draw(){
    // 평상시에는 흰색 배경, 마우스가 눌리면 검은색 배경이 칠해진다.
    if( mouseIsPressed ){
        background(0);
    }
    else{
        background(255);
    }
}

Mouse Pressed 함수

JavaScript

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

function draw(){}

function mousePressed(){
    // 마우스를 누른 순간 원이 그려진다.
    ellipse(mouseX, mouseY, 50, 50);
}

Mouse Released 함수

JavaScript

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

function draw(){}

function mouseReleased(){
    // 마우스에서 손가락을 땐 순간 사각형이 그려진다.
    rect(mouseX, mouseY, 50, 50);
}

요소 위치 옮기기

JavaScript

var x = 250;
var y = 250;
var circleSize = 100;
var dragging = false;

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

function draw(){
    background(235);
    if(dragging){
        x = x + (mouseX - pmouseX);
        y = y + (mouseY - pmouseY);
    }
    ellipse(x, y, circleSize, circleSize);
}

function mousePressed(){
    if( dist(mouseX, mouseY, x, y) < circleSize/2 ){
        dragging = true;
    }
}

function mouseReleased(){
    dragging = false;
}