p5.jsを動かそう

なんか簡単にプログラミングで映像を作るやつ

ブラウザ上で書けるぞ！

アカウント登録すればクラウドにファイルも保存できるっぽい

scrapbox上でp5jsを利用しているプロジェクト事例

プログラミングの練習問題集

masui先生が作ったぽい

いい感じのURLを作れば、scrapbox上に書いたコードをクリックして即実行できる

scrapbox上のコードは名前をつければホスティングされる性質を利用している

ここのコードをこうやって渡す

?pでscrapboxのページのパス

?cでファイル名

scrapbox上でp5のコードを共有して見てもらうにはこの方法かなりよさそう

キモいのができた

https://gyazo.com/7115ccc5833620e13627f2a87fab4fb3

code:js

const 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()

} )

}