p5.jsとは
Web上でProcesssingが使えるjavascriptライブラリ(みたいなもの)
とりあえずProcessingで作ったものを公開したいのに、公開できない人の救世主です。
PythonとFlask
ではpythonのFlaskでサーバサイドは記述します。
Flaskはpython用に提供されているweb用のマイクロフレームワークです。とにかく導入コストが低いです。
dj〇ngoと比べて本当に導入が楽です。本当に楽です。
(資料が古かったりでめんどくさい部分もありますが)
サンプルコード
早速どこかからパクってきた参考にしたコードをもとに作ります。
入門なので難しいことはまったくふれません(私自身が初心者なので)
動いている様子は前の記事と同じ感じです。
Pythonのコード
from flask import Flask, render_template, request, redirect, url_for
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run()
(よく考えたらこの実装だとpython使う必要なくねえか…。)
htmlのコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>p5.js</title>
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js"></script> <!--ここを適時修正してください。落としてくるなり、ネットワークで使うなり-->
<script src="/static/js/kurukuru.js"></script>
<style type="text/css">
* {margin: 0;}
* {padding: 0;}
</style>
</head>
<body>
{% block content %}{% endblock %}
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
</body>
</html>
{% extends "layout.html" %}
{% block content %}
<!-- Form
================================================== -->
<div class="form">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<p>
<div id="p5Canvas">
<p></p>
</div>
</p>
</div>
</div>
</div>
</div>
{% endblock %}
javascriptのファイル
const N = 20;
let p_x = [];
let p_y = [];
let p_pX = [];
let p_pY = [];
let p_distances = [];
let p_gap_theata = [];
let p_colors = [];
let p_frameCount;
function setup(){
let canvas = createCanvas(windowWidth, windowHeight);
canvas.parent("p5Canvas");
background(255);
colorMode(HSB, 255, 100, 100);
p_frameCount = 0;
noStroke();
for(var i = 0; i < N; i++){
p_x.push(30);
p_pX.push(30);
p_y.push(30);
p_pY.push(30);
p_distances.push(random(15, 150));
p_gap_theata.push(random(-PI, PI));
p_colors.push(color(random(255), 100, 100));
}
}
function draw(){
colorMode(RGB, 255);
background(255);
colorMode(HSB, 255, 100, 100);
for(var i = 0; i < N; i++){
fill(p_colors[i]);
let theata = radians(p_frameCount*5.0) + p_gap_theata[i];
let dist =p_distances[i] + 90.0*noise(theata/1.0, p_frameCount/100.0)
p_x[i] = (mouseX + dist*cos(theata) + p_pX[i])/2.0;
p_y[i] = (mouseY + dist*sin(theata) + p_pY[i])/2.0;
ellipse(p_x[i], p_y[i], 20, 20);
p_pX[i] = p_x[i];
p_pY[i] = p_y[i];
}
p_frameCount++;
}
function windowResized(){
resizeCanvas(windowWidth, windowHeight);
}
参考
前のProcessingのコードをjavascriptに落とし込んでいます。グローバル変数になりうるものはp_としています
感じ方次第ですが、javascriptとProcessingに慣れ親しんでいると、すんなり入れる感じだと思います。
let canvas = createCanvas(windowWidth, windowHeight);
canvas.parent("p5Canvas");
ここがキモだと思います。Processing.jsのころは画面いっぱいに出すのが、もう少し大変だった気がしますが、p5.jsはスムーズです。
また表示するcanvasのidを指定できます。これを指定しないでcanvasが存在すると普通にそれに紐づけられます。
参考URL
ただし画面の大きさを変えたときに、最初の大きさのまま表示領域が変わらないので
function windowResized(){
resizeCanvas(windowWidth, windowHeight);
}
これを追加します。
参考URL
mouseXやelipse、colorModeも使えます。
いいですね。
他のjsライブラリから来た人は、慣れないと思いますがdraw内で画面を初期化( bacground )しないと前の描画が残ります。
あと描画を初期化したいけど、canvasの裏の描画を残しておきたい場合にはbackgroundを工夫すればどうにかなります。
4つ変数をいれる場合には
background(r, g, b, α)
のはずなので、αの値によって前の描画の残し具合を変化できるはずです。(試したコードを紛失した)
結論
楽しい
おまけ
p5.jsの前にはProcessing.jsというものがありました。
Processing.jsではProcessingのコードをそのまま流用できます。
誰も得しないと思いますが残しておきます。
<!DOCTYPE html>
<head>
<script src="processing.js"></script>
<script>
window.onload = function(){
var canvas = document.getElementsByTagName('canvas')[0];
var codeElm = document.getElementById('processing-code');
var code = codeElm.textContent || codeElm.innerText;
new Processing(canvas, code);
};
</script>
<script id="processing-code" type="application/processing">
void setup() {
size(innerWidth, innerHeight);
frameRate(20);
}
void draw() {
size(innerWidth, innerHeight);
background(0, 0);
ellipse(width/2, height/2, mouseX, mouseY);
}
</script>
</head>
<body bgcolor="ffccff">
<div id="wrapper">
<canvas id = "main"></canvas>
</div>
</body>
</html>
body{
margin: 0px;
padding: 0px;
position: relative;
}
body #wrapper{
width: 100%;
height: 100%;
position: fixed;
}
$(function(){
sizing();
$(window).resize(function(){
sizing();
});
});
function sizing(){
$("#main").attr({height:$("wrapper").height()});
$("#main").attr({height:$("wrapper").width()});
}
最後のjsファイルで最大化処理を行っています。