예제 미리보기
수업 영상
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;
}
}