Canvas

Canvasで

JSのCanvasで作成

Canvasで大量の円に重力を与える

Canvas（JavaScript）の勉強をしています。 前回は、円（ボール）に重力を与えました。 今回は、円を大量に増やしました。 let RBall = [];let NUM = 100;function initialize() { canvas = document.body.querySelector('canvas'); canvas.width = 640; canvas.height = 335; ctx = canvas.getContext('2d'

p5.jsで音を拾う

音を表現したいと思いました。 今、勉強しているCanvasでやろうと音を表現したいと思ったのですが、私の技術力ではできませんでした。 以前、ちょっとだけ勉強していたp5.jsでやってみました。 音を拾う音は私の手拍子です。 p5js.org内のこのページを参考にしました。 コードはこちら↓ let mic;function setup() { let canvas = createCanvas(640, 335, P2D); canvas.parent('myCo

p5.jsでノイズを作ってみる（２）

最近、p5.jsの勉強をリスタートさせてます。 前回は、田所淳さんの『Processing クリエイティブ・コーディング入門』パーリンノイズを作りました。 今回も、引き続き、この本のパーリンノイズの続きをやりました。 本のままですが「角度によるノイズ表現」です。 角度によるノイズ表現 function setup() { let canvas = createCanvas(640, 335, P2D); canvas.parent('canvas'); backgro

Web Audio APIの基本

Web Audio APIを勉強しているのですが、MDNでは難しかったので、本を購入しました。 本は、Web Audio APIについてのものが少なく探し続けて、『HTML5＋WebAudioAPIによるオーディオデータプロセッシング』という本を見つけました。 ただ、すごく良いの本なのですが、2015年のものなのでちょっと古いので、古い情報から新しいものへの翻訳作業とjQueryが素人の私にはしんどい部分もあります。 けど、音楽的な部分もかなり掘り下げてくれているので、

saveFrames (p5js)

ここ最近、Processing（& p5js）をがんばっています。 難しすぎて全然進みません。 自分がイメージしたものを自由に作れる日はいつになるのでしょうか。 「Generative Design with p5.js」という本で勉強してます。 1ページを理解するのに1週間以上かかります。 今、「エージェントが作る成長構造」をやっています。 これは円がどんどん発生するのですが、発生する場所は前の円にひっついて発生します。細胞が増える動きのようで気持ち悪さもあるのですが、

p5.jsでマガジンのカバーを作った

マガジンのカバー（ヘッダー？）に何もないと寂しいので作りました。 こちら↓ カバーのサイズはカバーのサイズは、ヘルプページにありました。 1600×568pxのようです。 ヘルプページ↓ 6月からサイズが変わるようです↓ p5.jsで作りましたコードを見られるのは恥ずかしいけど、その恥ずかしさで「次はちゃんとしたコードを書けるようにしよう！」となるんじゃないかと思ったでの、載せます。初心者だし、恥ずかしがるのも自意識過剰だし。 let w;function set

ランダム

3Dで

p5.jsでclassを使いたい

田所淳さんの『Processing クリエイティブ・コーディング入門−コードが生み出す創造表現』でProcessingを勉強中です。 この前Processingで作ったものをp5.jsで作れるかどうか、挑戦してみました。 let NUM = 100;let movers = new Array(NUM);let pos, vel, diameter, c;function setup() { createCanvas(400, 400); colorMode(HSB,