創作タイム22時

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

p5.jsのnoiseで波線を書く - 5

p5.jsを基礎から復習しています。基礎の基礎です。 noiseは、p5.jsの記事や本を見ていると絶対に出てくるので、慣れておきたいなと思っています。今回はすごく単純でよく見る波線です。点（point）をx軸に並べて、y軸の高さをnoiseで作っています。 noiseを使って波線を書く let img, y, h;function setup() { let canvas = createCanvas(640, 335, P2D); canvas.paren

Web Audio APIの基本

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

基礎力（Processing）

久しぶりにProcessingをしたら、使い方を忘れている。 p5.jsはちょっと勉強していたので、基本的なことは同じなのでわかったが、配列やclassはすっかり忘れていた。 Processingはいいなと改めて思った。思い出しながら、簡単なものを作ってみた。 int NUM=750;DrawEllipse[] myCircle=new DrawEllipse[NUM];void setup() { size(640, 335); for (int i=0; i<NU

noiseがわからない

こんばんは。最近、p5.jsではなくProcessingに戻ってます。パソコンをパワーアップしたらProcessingが快適になりました。過去の復習をしています。noiseがむつかしいです。以前はわかっていたつもりなのですが、改めてやると理解していないことに気づきました。とりあえず、基本的なものをつくってみました。もちろん本を参考にしながらです。 void setup() { size(640, 335); background(0); int step=1

Processingで写真加工

雨が降ってなければ、毎日ウォーキングに行ってます。運動不足解消と気分転換のためです。歩いているとき、いい景色があれば写真を撮ってます。そして、記録としてnoteにアップしているのですが、歩いているところが毎日ほぼ同じなので飽きてきます。飽きないようにSnapseedを使って写真加工をしているのですが、それでもやっぱり飽きます。なので、さらに加工を激しくしようと思います。 Processingでさらに加工今、勉強中のProcessingで加工します。 Proces

atan2

ここ最近、ずっとProcessingを勉強しています。レベルアップのスピードが亀の歩みなのが自分でも驚きます。本の事例を1つ理解するのに、2週間くらいかかります。そんな状況なのに、飽きずに楽しめていることも、また驚きであります。数学の壁Processingを理解するのに、いくつもの壁があります。その中でも大きくそびえ立っている壁が「数学」です。 Processingのコードを書くのは本やネットの記事を読めばわかるのですが、数学だけは読んでも読んでも理解できな

atan2 - 2

Processingを勉強してます。今はatan2をやってます。今日のメモです。円が前の円にひっつきながらどんどん発生させてます。かっこよくならなかったのは残念ですが、一応意図通りにできたので残しておきます。 PImage img;color col, col_bg, col_line;int NUM=100000;float[] x=new float[NUM];float[] y=new float[NUM];float[] r=new float[NUM];

saveFrames (p5js)

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

Processingはむつかしい

Processingをできるだけ毎日勉強しているのですが、なかなか成長しません。 2ヶ月くらい前に集中して本で理解したものを今日改めて作ってみようと思ったら、まったくできませんでした。理解していたものも忘れてしまうというのはショックですが、諦めずにがんばろうと思います（泣）。エージェントが作る成長構造これは「Generative Design」という本にあるサンプルです。タイトルは「エージェントが作る成長構造」というものです。私はこういうのが大好きなのですが、

Py版Processingでclass*listを使いたい

Pythonを理解したいので、Python版のProcessingを使いだしました。 Java版とp5.js版を少しだけ使ったことはあったのですが、同じProcessingなのですぐに理解できると思ったのですが、やっぱり違いますね。。。最初はなんでも大変ですね。 classを使う前にclassの使いかたを勉強しました。 classで1つの円（ellipse）を作りました。 classとlistを使う今回はlistを使って、複数の円を作りました。見た目はこちら↓

Py版ProcessingでPVectorを使いたい

最近、Pythonを勉強しているので、ProcessingもPython版にしてみました。 Java版、p5.js版と同じような感じだと思ってましたが、やっぱり違いますね。。 PVectorは苦労なく使うことができました。 Java版、p5.js版との違いはなかったです。 def setup(): size(600,450) global v,v1,w v=PVector(300,250) v1=PVector(5,3) w=30def draw():

#プログラミング