예제 미리보기

수업 영상

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 = 120;
var dragging = false;
            
var targetX = 350;
var targetY = 350;
var targetSize = 200;
            
var score = 0;

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

function draw(){
    background(235);
    
    // 요소 크기가 기본 크기(120)보다 작을 때 프레임당 10씩 크기를 키워준다
    if(elemSize < 120) elemSize += 10;

    // 목표물 그리기
    // 목표물을 요소보다 먼저 그려서 그 위에 요소가 겹쳐지게 한다
    fill(76, 224, 179);
    ellipse(targetX, targetY, targetSize, targetSize);
    
    // 목표물 위에 점수 출력
    fill(55, 119, 113);
    textSize(40);
    textAlign(CENTER, CENTER);
    text(score, targetX, targetY);
    
    // 드래그 중에 마우스가 움직인 만큼 요소를 움직여준다
    if(dragging){
        elemX = elemX + (mouseX - pmouseX);
        elemY = elemY + (mouseY - pmouseY);
    }

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

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

// 마우스 버튼을 누른 순간
function mousePressed(){
    // 요소의 영역안에 마우스가 있다면 드래그를 시작한다
    if(dist(mouseX, mouseY, elemX, elemY) < elemSize/2){
        dragging = true;
    }
}
            
// 마우스 버튼에서 손을 땐 순간
function mouseReleased(){
    // 목표물안에 요소가 완전히 들어오면 점수를 1 올리고 요소를 초기화한다
    if(dist(targetX, targetY, elemX, elemY) < targetSize/2 - elemSize/2){
        elemSize = 0;
        elemX = 150;
        elemY = 150;
        
        score ++;
    }
    
    // 드래그를 마친다
    dragging = false;
}

목표물에 넣기 : 색상 전달하기

JavaScript
var elemX = 150;
var elemY = 150;
var elemSize = 120;
var dragging = false;
var elemColor;
            
var targetX = 350;
var targetY = 350;
var targetSize = 200;
var targetColor;

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

    // 요소와 목표물의 처음 보여질 색상을 만들어 변수 넣는다
    elemColor = color(255, 100, 50);
    targetColor = color(200);
}

function draw(){
    background(235);
    
    // 요소 크기가 기본 크기(120)보다 작을 때 프레임당 10씩 크기를 키워준다
    if(elemSize < 120) elemSize += 10;
    
    // 목표물 그리기
    // 목표물을 요소보다 먼저 그려서 그 위에 요소가 겹쳐지게 한다
    fill(targetColor);
    ellipse(targetX, targetY, targetSize, targetSize);

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

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

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

// 마우스 버튼을 누른 순간
function mousePressed(){
    // 요소의 영역안에 마우스가 있다면 드래그를 시작한다
    if(dist(mouseX, mouseY, elemX, elemY) < elemSize/2){
        dragging = true;
    }
}
            
// 마우스 버튼에서 손을 땐 순간
function mouseReleased(){
    // 목표물안에 요소가 완전히 들어왔다면
    if(dist(targetX, targetY, elemX, elemY) < targetSize/2 - elemSize/2){
        // 요소 위치를 초기화하고 크기를 0으로 바꾼다
        elemSize = 0;
        elemX = 150;
        elemY = 150;
        
        // 요소의 색상을 목표물에 전달한다
        targetColor = elemColor;
        
        // 랜덤으로 새로운 색상을 생성한다
        var r = int( random(256) );
        var g = int( random(256) );
        var b = int( random(256) );
        
        elemColor = color(r, g, b);
    }
    
    // 드래그를 마친다
    dragging = false;
}

여러 요소 목표물에 넣기 : 색상 전달하기

JavaScript
// 각 요소의 변수를 객체 안에 정의한다
var elem1 = {
    x:100,
    y:350,
    size:120,
    dragging:false
};

var elem2 = {
    x:150,
    y:150,
    size:120,
    dragging:false
};

var elem3 = {
    x:350,
    y:100,
    size:120,
    dragging:false
};

var targetX = 350;
var targetY = 350;
var targetSize = 200;
var targetColor;

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

    // 각 요소의 색상을 만들어 변수에 넣는다
    elem1.color = color(255, 100, 50);
    elem2.color = color(76, 224, 179);
    elem3.color = color(78, 89, 140);
    
    // 목표물의 처음 보여질 색상을 만들어 변수에 넣는다
    targetColor = color(200)
}

function draw(){

    background(235);
    
    // 각 요소 크기가 기본 크기(120)보다 작을 때 프레임당 10씩 크기를 키워준다
    if(elem1.size < 120) elem1.size = elem1.size + 10;
    if(elem2.size < 120) elem2.size = elem2.size + 10;
    if(elem3.size < 120) elem3.size = elem3.size + 10;
    
    
    // 드래그 중에 마우스가 움직인 만큼 각 요소를 움직여준다
    if(elem1.dragging){
        elem1.x = elem1.x + (mouseX - pmouseX);
        elem1.y = elem1.y + (mouseY - pmouseY);
    }

    if(elem2.dragging){
        elem2.x = elem2.x + (mouseX - pmouseX);
        elem2.y = elem2.y + (mouseY - pmouseY);
    }

    if(elem3.dragging){
        elem3.x = elem3.x + (mouseX - pmouseX);
        elem3.y = elem3.y + (mouseY - pmouseY);
    }

    // 목표물 그리기
    // 목표물을 요소보다 먼저 그려서 그 위에 요소가 겹쳐지게 한다
    fill(targetColor);
    ellipse(targetX, targetY, targetSize, targetSize);
    
    // 각 요소 그리기
    fill(elem1.color);
    ellipse(elem1.x, elem1.y, elem1.size, elem1.size);

    fill(elem2.color);
    ellipse(elem2.x, elem2.y, elem2.size, elem2.size);

    fill(elem3.color);
    ellipse(elem3.x, elem3.y, elem3.size, elem3.size);
}
            
// 마우스 버튼을 누른 순간
function mousePressed(){
    
    // 각 요소의 영역안에 마우스가 있다면 드래그를 시작한다
    if(dist(mouseX, mouseY, elem1.x, elem1.y) < elem1.size/2){
        elem1.dragging = true;
    }

    if(dist(mouseX, mouseY, elem2.x, elem2.y) < elem2.size/2){
        elem2.dragging = true;
    }

    if(dist(mouseX, mouseY, elem3.x, elem3.y) < elem3.size/2){
        elem3.dragging = true;
    }
}

// 마우스 버튼에서 손을 땐 순간
function mouseReleased(){
    // 목표물안에 각 요소가 완전히 들어왔다면 각 요소의 위치를 초기화하고 크기를 0으로 바꿔준다
    // 각 요소의 색상을 목표물에 전달한다
    if(dist(elem1.x, elem1.y, targetX, targetY) < targetSize/2 - elem1.size/2){
        elem1.x = 100;
        elem1.y = 350;
        elem1.size = 0;
        targetColor = elem1.color;
    }
    
    if(dist(elem2.x, elem2.y, targetX, targetY) < targetSize/2 - elem2.size/2){
        elem2.x = 150;
        elem2.y = 150;
        elem2.size = 0;
        targetColor = elem2.color;
    }
    
    if(dist(elem3.x, elem3.y, targetX, targetY) < targetSize/2 - elem3.size/2){
        elem3.x = 350;
        elem3.y = 100;
        elem3.size = 0;
        targetColor = elem3.color;
    }

    // 각 요소의 드래그를 마친다
    elem1.dragging = false;
    elem2.dragging = false;
    elem3.dragging = false;
}

여러 요소 목표물에 넣기 : 색상 전달하기 - 배열 이용

JavaScript
// 요소들을 담을 배열을 만든다
var elem = [];

// 각 요소의 기본 위치를 담을 변수를 객체 안에 정의한다
elem[0] = {
    startX:100,
    startY:350
};
            
elem[1] = {
    startX:150,
    startY:150
};
            
elem[2] = {
    startX:350,
    startY:100
};
            
var targetX = 350;
var targetY = 350;
var targetSize = 200;
var targetColor;

function setup(){
    createCanvas(500, 500);
    
    // 각 요소의 위치, 크기, 드래그 상태를 초기화 시킨다
    for(var i=0; i<elem.length; i++){
        elem[i].x = elem[i].startX;
        elem[i].y = elem[i].startY;
        elem[i].size = 120;
        elem[i].dragging = false;
    }

    // 각 요소의 색상을 만들어 변수에 넣는다
    elem[0].color = color(255, 100, 50);
    elem[1].color = color(76, 224, 179);
    elem[2].color = color(78, 89, 140);
    
    // 목표물의 처음 보여질 색상을 만들어 변수에 넣는다
    targetColor = color(200);
}

function draw(){
    background(235);
    
    // 각 요소 크기가 기본 크기(120)보다 작을 때 프레임당 10씩 크기를 키워준다
    for(var i=0; i<elem.length; i++){
        if(elem[i].size < 120) elem[i].size += 10;
    }
    
    // 드래그 중에 마우스가 움직인 만큼 각 요소를 움직여준다
    for(var i=0; i<elem.length; i++){
        if(elem[i].dragging){
            elem[i].x = elem[i].x + (mouseX - pmouseX);
            elem[i].y = elem[i].y + (mouseY - pmouseY);
        }
    }
    
    cursor(ARROW);
    // 각 요소의 영역안에 마우스가 들어왔을때 커서모양을 바꿔준다
    for(var i=0; i<elem.length; i++){
        if(dist(mouseX, mouseY, elem[i].x, elem[i].y) < elem[i].size/2) cursor(HAND);
    }

    // 목표물 그리기
    // 목표물을 요소보다 먼저 그려서 그 위에 요소가 겹쳐지게 한다
    fill(targetColor);
    ellipse(targetX, targetY, targetSize, targetSize);


    // 각 요소 그리기
    noStroke();
    for(var i=0; i<elem.length; i++){
        fill(elem[i].color);
        ellipse(elem[i].x, elem[i].y, elem[i].size, elem[i].size);
    }
    
    
    
}

// 마우스 버튼을 누른 순간
function mousePressed(){
    // 각 요소의 영역안에 마우스가 있다면 드래그를 시작한다
    for(var i=0; i<elem.length; i++){
        if(dist(mouseX, mouseY, elem[i].x, elem[i].y) < elem[i].size/2) elem[i].dragging = true;
    }
}
            
// 마우스 버튼에서 손을 땐 순간
function mouseReleased(){
    // 목표물안에 각 요소가 완전히 들어왔다면
    for(var i=0; i<elem.length; i++){
        if(dist(targetX, targetY, elem[i].x, elem[i].y) < targetSize/2 - elem[i].size/2){
            // 요소 위치를 초기화하고 크기를 0으로 바꾼다
            elem[i].size = 0;
            elem[i].x = elem[i].startX;
            elem[i].y = elem[i].startY;

            // 요소의 색상을 목표물에 전달한다
            targetColor = elem[i].color;
        }
    }
    
    // 각 요소의 드래그를 마친다
    for(var i=0; i<elem.length; i++){
        elem[i].dragging = false;
    }
    
}