<!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>
var img;
function preload() {
img = loadImage("img/cat.png");
}
function setup() {
createCanvas(500, 500);
image(img, 0, 0);
}
p5.js 는 도형이나 이미지를 그릴때 어느지점을 기준으로 위치시킬지 함수를 통해 지정할 수 있다.
function setup() {
createCanvas(500, 500);
}
function draw(){
background(235);
// X축 200과 300 사이, Y축 200과 300 사이에 마우스가 위치하면 색이 바뀐다.
if( mouseX > 200 && mouseX < 300
&& mouseY > 200 && mouseY < 300 ){
fill(255, 0, 0);
}
else{
fill(0);
}
// X축 200과 300 사이, Y축 200과 300 사이 공간에 사각형을 그린다.
rect(200, 200, 100, 100);
}
function setup() {
createCanvas(500, 500);
}
function draw(){
background(235);
// X,Y축 250, 250 위치(canvas중앙)로부터 거리가 100 안쪽으면 색깔이 변한다.
if( dist(mouseX, mouseY, 250, 250) < 100){
fill(255, 0, 0);
}
else{
fill(0);
}
// X,Y축 250, 250 위치(canvas중앙)로부터 반지름이 100인 원을 그린다.
ellipse(250, 250, 200, 200);
}
var position = [];
function setup(){
createCanvas(500, 500);
for(var i=0; i<300; i=i+1){
position.push({x:Math.random()*width, y:Math.random()*height});
}
}
function draw(){
background(235);
for(var i=0; i<position.length;i=i+1){
position[i].x = position[i].x + Math.random()*8 - 4;
position[i].y = position[i].y + Math.random()*8 - 4;
ellipse(position[i].x, position[i].y, 30, 30);
}
}
var position = [];
var img;
function preload(){
img = loadImage("img/cat.png");
}
function setup(){
createCanvas(500, 500);
for(var i=0; i<300; i=i+1){
position.push({x:Math.random()*width, y:Math.random()*height});
}
}
function draw(){
background(235);
for(var i=0; i<position.length;i=i+1){
position[i].x = position[i].x + Math.random()*8;
if(position[i].x > width) position[i].x = 0;
position[i].y = position[i].y + Math.random()*8 - 4;
image(img, position[i].x, position[i].y, img.width*0.1, img.height*0.1);
}
}