p5.jsを動かそう
p5jsとは
なんか簡単にプログラミングで映像を作るやつ
こういうのをクリエーティブコーディングと言ったりする
ブラウザ上で書けるぞ！
アカウント登録すればクラウドにファイルも保存できるっぽい
scrapbox上でp5jsを利用しているプロジェクト事例
プログラミングの練習問題集
masui先生が作ったぽい
いい感じのURLを作れば、scrapbox上に書いたコードをクリックして即実行できる
scrapbox上のコードは名前をつければホスティングされる性質を利用している
例えばこのページ/prog-exercises/結城氏のプログラム
ここのコードをこうやって渡す
?pでscrapboxのページのパス
?cでファイル名
scrapbox上でp5のコードを共有して見てもらうにはこの方法かなりよさそう
キモいのができた
jsconst mod = (x,y) => (x+y)%y
// それっぽくclass作ったけどこのレベルならいらない
class Circle {
constructor(position, radius) {
this.position = position
this.radius = radius;
}
update(p) {
this.position.x = p.x;
this.position.y = p.y;
this.position.x = mod(this.position.x, width);
this.position.y = mod(this.position.y, height);
}
draw() {
fill((this.radius * 10) % 256, 10,100);
circle(this.position.x, this.position.y, this.radius);
}
}
const circles = []
function setup() {
createCanvas(400, 400);
for( let i=0; i<300; i++) {
const position = {
x: random() * width,
y: random() * height
}
const c = new Circle(position, i)
circles.push(c);
}
colorMode(HSB)
}
function draw() {
background(90);
let n = circles.length
let m = frameCount * 0.004
circles.forEach( (c,i) => {
c.update({
x: noise(m, i/n* 13.1, 0) * width * 3,
y: noise(m, i/n* 10.1, 1) * height* 3
})
c.radius = 5 + noise(m,i,2) * 50
c.draw()
} )
}かっこいい