<!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>
p5.js에서는 코딩하는 순서대로 도형을 그린다. 그래서 나중에 그린 도형이 더 위쪽 레이어로 표현된다.
function setup(){
createCanvas(500, 500);
background(235);
fill(255,0,0); // 빨강
rect(50, 50, 100, 100);
fill(0,255,0); // 초록
rect(60, 60, 100, 100);
fill(0,0,255); // 파랑
rect(70, 70, 100, 100);
fill(0,0,255); // 파랑
rect(270, 70, 100, 100);
fill(0,255,0); // 초록
rect(260, 60, 100, 100);
fill(255,0,0); // 빨강
rect(250, 50, 100, 100);
}
function setup(){
createCanvas(500, 500);
background(235);
// 150, 150 지점과 250, 250 지점 사이에 선을 그린다.
line(150, 150, 250, 250);
}
점, 선의 색깔은 stroke() 함수를 이용해 지정할 수 있다.
function setup(){
createCanvas(500, 500);
background(50);
}
function mouseClicked(){
// 마우스 클릭시 배경을 칠하고 붉은 원을 그린다.
background(50);
fill(255, 100, 50);
ellipse(mouseX, mouseY, 30, 30);
}
function setup(){
createCanvas(500, 500);
background(50);
}
function mousePressed(){
// 마우스버튼을 누를때 배경을 칠하고 붉은 원을 그린다.
background(50);
fill(255, 100, 50);
ellipse(mouseX, mouseY, 30, 30);
}
function mouseReleased(){
// 마우스버튼을 땔 때 녹색 원을 그린다.
fill(100, 255, 50);
ellipse(mouseX, mouseY, 30, 30);
}
// 시작점을 저장할 변수를 만든다.
var startX;
var startY;
function setup(){
createCanvas(500, 500);
background(50);
// 이후에 그릴 점, 선의 색을 지정한다.
stroke(255);
}
function mousePressed(){
// 마우스버튼을 누를때 배경을 칠하고 시작점을 찍는다.
background(50);
point(mouseX, mouseY);
// 시작점의 좌표를 저장해둔다.
startX = mouseX;
startY = mouseY;
}
function mouseReleased(){
// 마우스버튼을 땔 때 저장해둔 좌표와 현재 마우스 좌표사이에 선을 그린다.
line(startX, startY, mouseX, mouseY);
}
var circleSize = 30;
function setup(){
createCanvas(500, 500);
background(50);
}
function mouseDragged(){
// 마우스를 드래그할때마다 원의 크기를 1씩 증가시킨다.
circleSize = circleSize + 1;
background(50);
fill(255, 100, 50);
ellipse(mouseX, mouseY, circleSize, circleSize);
}
// 시작점을 저장할 변수를 만든다.
var startX;
var startY;
function setup(){
createCanvas(500, 500);
background(50);
// 이후에 그릴 점, 선의 색을 지정한다.
stroke(255);
}
function mousePressed(){
// 마우스버튼을 누를때 배경을 칠하고 시작점을 찍는다.
background(50);
point(mouseX, mouseY);
// 시작점의 좌표를 저장해둔다.
startX = mouseX;
startY = mouseY;
}
function mouseDragged(){
// 마우스를 드래그 할 때 배경을 칠하고 시작점과 현재 마우스 좌표 사이에 선을 그린다.
background(50);
line(startX, startY, mouseX, mouseY);
}
function mouseReleased(){
// 마우스버튼을 땔 때 배경을 칠하고 저장해둔 좌표와 현재 마우스 좌표사이에 선을 그린다.
background(50);
line(startX, startY, mouseX, mouseY);
}
일정한 규칙에따라 반복적으로 실행해야하는 연산은 반복문을 이용해 코드를 간결하게 작성할 수 있다.
function setup(){
createCanvas(500, 500);
background(50);
// x 150 위치에 y 0 부터 50 마다 30크기의 빨간 원을 10개 그린다.
fill(255, 0, 0);
ellipse(150, 0, 30, 30);
ellipse(150, 50, 30, 30);
ellipse(150, 100, 30, 30);
ellipse(150, 150, 30, 30);
ellipse(150, 200, 30, 30);
ellipse(150, 250, 30, 30);
ellipse(150, 300, 30, 30);
ellipse(150, 350, 30, 30);
ellipse(150, 400, 30, 30);
ellipse(150, 450, 30, 30);
// x 350 위치에 y 0 부터 50 마다 30크기의 녹색 원을 10개 그린다.
fill(0, 255, 0);
var count = 0;
while(count < 10){
ellipse(350, count*50, 30, 30);
count = count + 1;
}
}
function setup(){
createCanvas(500, 500);
background(50);
// x 150 위치에 y 0 부터 50 마다 30크기의 녹색 원을 10개 그린다.
fill(0, 255, 0);
var count = 0;
while(count < 10){
ellipse(150, count*50, 30, 30);
count = count + 1;
}
// x 350 위치에 y 0 부터 50 마다 30크기의 노란 원을 10개 그린다.
fill(255, 255, 0);
for(var count = 0; count < 10; count = count + 1){
ellipse(350, count*50, 30, 30);
}
}
function setup(){
createCanvas(500, 500);
}
function draw(){
background(50);
// 중심점을 기준으로 마우스가 얼마나 움직였는지를 구한다.
var moveX = mouseX - 250;
var moveY = mouseY - 250;
// 반복의 index변수로 움직이는 거리와 원의 크기를 나눠준다.
// 큰수로 나눈것이 더 멀기때문에 큰 수로 시작해서 가장 작은 수로 끝낸다.
for(var i=5; i>=1; i=i-1){
ellipse(250+(moveX/i), 250+(moveY/i), 200/i, 200/i);
}
}