<!DOCTYPE html>
<html>
<head>
<title>Processing.JS inside Webpages: Template</title>
</head>
<body>
<h1>make it rain</h1>
<p align="center">
<canvas id="mycanvas"></canvas>
</p>
</body>
<script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script>
<script>
var sketchProc = function(processingInstance) {
with (processingInstance) {
size(400, 400);
frameRate(30);
var xPositions = [200];
var yPositions = [0];
var rainColorArray = [];
var rainColor = function(r,g,b) {
this.r = r;
this.g = g;
this.b = b;
};
rainColorArray.push(new rainColor(0,200,255));
draw = function() {
background(204, 247, 255);
for (var i = 0; i < xPositions.length; i++) {
noStroke();
fill(rainColorArray[i].r, rainColorArray[i].g, rainColorArray[i].b);
ellipse(xPositions[i], yPositions[i], 10, 10);
yPositions[i] += Math.floor(Math.random() * 5)+1;
if(yPositions[i]>400) {
yPositions[i] = 0;
}
}
if(mouseButton == LEFT) {
rainColorArray.push(new rainColor(random(0,400),random(0,400),random(0,400)));
xPositions.push(random(0,400));
yPositions.push(random(0,400));
mouseButton = RIGHT;
}
};
}
};
var canvas = document.getElementById("mycanvas");
var processingInstance = new Processing(canvas, sketchProc);
</script>
</html>
// 처음에는 빗방울 1개가 떨어진다. draw 함수는 반복해서 이미지를 그려주는 함수.
// 49번째 라인 : y축값이 랜덤하게 커지고 있다. 빗방울이 떨어지는 효과를 나타낸다.
// 50~51번째 라인 : y축값이 400을 넘어가면 0으로 다시 초기화. 계속해서 빗방울이 떨어지는 효과를 보내주기 위해.
// 54번째 ~ 58번째 라인 : 마우스 클릭을 하면 빗방울이 한개가 x축,y축이 랜덤하게 추가되고 색깔도 랜덤하게 설정된다.
if 조건에 mousePressed, mouseClicked 이벤트로 하려고 했는데 이상하게 잘 되지 않았다..
