p5.jsとは？
processingがブラウザでできるようになったよ、みたいなやつ。
準備
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>p5.js practice</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/addons/p5.dom.min.js"></script>
<script src="try1.js"></script>
</body>
</html>
try1.js
function setup(){
////描画範囲指定
createCanvas(windowWidth, windowHeight);
//背景色指定
background('gray');
//円描画（位置指定x軸,位置指定y軸,円の縦幅指定,円の横幅指定）
ellipse(windowWidth/2, windowHeight/2, 72, 72);
}
function draw(){
}
これだけで・・・はじめられる！
円の描き方などはrefferenceとか、processingを参考にしましょう。
コミュニティ openprocessing
processingのいいところはコミュニティが発展しているところ。
誰かが作ったexampleを触ってみたい人はopenprocessingで探しましょう。
基本的にはprocessingで書かれているので、p5.jsで実行するには書き換えなければならないですが、
ちらほらp5.jsで書かれているものもあります。
検索して・・・
実行したいものを見つけて・・・
コードも公開されているのでコピペして
触ってみましょう
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>p5.js practice</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/addons/p5.dom.min.js"></script>
<script src="try2.js"></script>
</body>
</html>
try2.js
//walker object
function Walker() {
//temp nx, ny value holders
var nxloc;
var nyloc;
//original values
this.xloc = windowWidth / 2;
this.yloc = windowHeight / 2;
//generate walker direction
this.move = function() {
//choose integer 1-8 for direction: 1- 0 degrees, 2- 45 degrees, 3- 90 degrees etc.
var dir = floor(random(1, 9));
var t = random(0, 800);
//generate temp nx, ny values based on dir
switch (dir) {
case 1:
nxloc = this.xloc + t;
break;
case 2:
nxloc = this.xloc + t;
nyloc = this.yloc + t;
break;
case 3:
nyloc = this.yloc + t;
break;
case 4:
nyloc = this.yloc + t;
nxloc = this.xloc - t;
break;
case 5:
nxloc = this.xloc - t;
break;
case 6:
nxloc = this.xloc - t;
nyloc = this.yloc - t;
break;
case 7:
nyloc = this.yloc - t;
break;
case 8:
nxloc = this.xloc + t;
nyloc = this.yloc - t;
}
//draw line
line(this.locx, this.locy, nxloc, nyloc);
//scaled 3x line
line(this.locx * 3, this.locy * 3, nxloc * 3, nyloc * 3);
//ensure walker does not go off of canvas
if (this.xloc < 0 || this.nxloc < 0 || this.xloc > windowWidth || this.nxloc > windowWidth || this.yloc < 0 || this.nyloc < 0 || this.yloc > windowHeight || this.nyloc > windowHeight) {
this.xloc = windowWidth / 2;
this.yloc = windowHeight / 2;
this.nxloc = windowWidth / 2;
this.nyloc = windowHeight / 2;
}
//re-enter walker with new x,y values
this.locx = nxloc;
this.locy = nyloc;
}
}
function setup() {
createCanvas(windowWidth, windowHeight);
//set density for pixels[] manip
pixelDensity(1);
}
function draw() {
background(-frameCount % 200, 24, 0, .5);
fill(random(122, 255));
//ground
rect(-10, windowHeight / 1.4, windowWidth + 20, windowHeight / 1.4);
//little explosions
for (var g = 0; g < 2; g++) {
ellipse(random(0, windowWidth), random(0, windowHeight), random(2, 50));
}
//text stuff, self explanitory
textSize(windowWidth / 5);
var word = "P5.js";
word = word.toUpperCase();
textFont("Helvetica");
//draw rainbow layers of 3d text
for (var c = 0; c < 8; c++) {
fill(random(0, 255), 255, 255);
text(word, windowWidth / 2, windowHeight / 1.4);
translate(c * .5, c * .5);
}
//text-align
textAlign(CENTER);
//blacked out layer on top
fill(0);
text(word, windowWidth / 2, windowHeight / 1.4);
//fill for big moon circle behind text
fill(random(144, 255), random(128, 255), random(200, 255), .07);
//big moon
ellipse(random(-6, 6) + windowWidth / 3, random(-6, 6) + windowHeight / 5, random(150, 160));
//shooting stars shapes
beginShape();
vertex(windowWidth / 2, windowHeight / 2);
noFill();
for (var b = 0; b < 4; b++) {
curveVertex(random(0, windowWidth), random(0, windowHeight));
}
endShape();
// instantiate walker
var walker = new Walker();
var walker2 = new Walker();
for (var i = 0; i < 4; i++) {
colorMode(HSB);
stroke(frameCount % 200, 255, 255);
fill(frameCount % 200, 255, 255)
walker.move();
//translate(-windowWidth/6,-windowHeight/6);
walker2.move();
//scale(-cos(PI/.4)*PI^2)
ellipse(walker.locx, walker2.locy, random(2, 20));
}
//pixel manip
loadPixels();
for (var x = 0; x < width; x++) {
for (var y = 0; y < height; y++) {
var index = (x + y * width) * 4;
if (pixels[index - 4] < pixels[index + 1]) {
pixels[index - 2] = random(255);
pixels[index + 4] = random(200, 255);
pixels[index + 5] = random(255) * -y;
}
if (pixels[index] > 240) {
pixels[index + 1] = random(0, 100);
pixels[index - 1] = random(0, 100) * 2;
}
}
}
updatePixels();
smooth();
}
実行！
誰かのコードをいじってみる
try2.jsのコードをいじってみましょう。
文字の部分を変えてみたり・・・
元コード.js
var word = "P5.js";
元コード.js
var word = "HELLO";
月の大きさを２倍に変えてみたり・・・
元コード.js
//big moon
ellipse(random(-6, 6) + windowWidth / 3, random(-6, 6) + windowHeight / 5, random(150, 160));
元コード.js
//big moon
ellipse(random(-6, 6) + windowWidth / 3, random(-6, 6) + windowHeight / 5, random(150*2, 160*2));
誰かのコードを参考に、
好きなものを作っていきましょう。
3D描画や、音、カメラなども使ってるexampleも多いので楽しみましょう