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