예제 미리보기
수업 영상
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) 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(){
dragging = false;
}
크기 조정하기
JavaScript
var elemX = 250;
var elemY = 250;
var elemSize = 100;
var dragging = false;
var edgeRange = 5;
var resizing = false;
function setup(){
createCanvas(500, 500);
strokeWeight(2);
}
function draw(){
// 마우스와 요소 거리를 미리 구해놓는다
var mouseDist = dist(mouseX, mouseY, elemX, elemY);
background(235);
// 드래그 중에 마우스가 움직인 만큼 요소를 움직여준다
if(dragging){
elemX = elemX + (mouseX - pmouseX);
elemY = elemY + (mouseY - pmouseY);
}
// 크기조정 중에 마우스와 요소의 거리만큼 요소 크기를 정한다
if(resizing){
elemSize = mouseDist*2;
}
// 요소의 영역 + 모서리영역 안에 마우스가 들어왔을때 커서모양을 바꿔준다
if(mouseDist < elemSize/2 + edgeRange) cursor(HAND);
else cursor(ARROW);
// 모서리 영역안에 마우스가 들어왔을때 테두리를 그려준다
if(mouseDist > elemSize/2 - edgeRange && mouseDist < elemSize/2 + edgeRange) stroke(255,150,50);
else noStroke();
// 요소 그리기
fill(127);
ellipse(elemX, elemY, elemSize, elemSize);
// 모서리 영역안에 마우스가 들어왔을때 요소 중앙에 점을 그려준다
if(mouseDist > elemSize/2 - edgeRange && mouseDist < elemSize/2 + edgeRange){
point(elemX , elemY);
}
}
// 마우스 버튼을 누른 순간
function mousePressed(){
// 마우스와 요소 거리를 미리 구해놓는다
var mouseDist = dist(mouseX, mouseY, elemX, elemY);
// 요소의 영역안에 마우스가 있다면 드래그를 시작한다
if(mouseDist < elemSize/2 - edgeRange){
dragging = true;
}
// 모서리 영역안에 마우스가 있다면 크기조정을 시작한다
else if(mouseDist > elemSize/2 - edgeRange && mouseDist < elemSize/2 + edgeRange){
resizing = true;
}
}
// 마우스 버튼에서 손을 땐 순간
// 드래그와 크기조정을 마친다
function mouseReleased(){
dragging = false;
resizing = false;
}