code

【p5.js】角丸の四角の書き方(2)

角丸の四角の書き方その2 四隅の角度は個別に指定することができる。 ランダムで設定し、if分でループ。 プクプクのループ。 p5.jsはまだ慣れていないので配列に手こずった、、・ 日々書かねば。 ・・・ コードは「書く」だが、かたちは「描く」。 コードで…

【p5.js】角丸の四角の書き方

色盲のテスト画像みたいになっちゃったけど、角丸の四角形。 rect()の引数を追加すると角丸モードになるよ。 Processingでも同じ。 rect( x , y , w , h , r , r , r , r) rが角丸の大きさ。 やったことないけど個別でも指定できるっぽいのでこんどやってみ…

【p5.js】線を並べて面をつくる

目がチカチカする。 引いてみると色が見えたりする。 歪んで見える。 モノクロとシマシマは錯視効果を産む。

【p5.js】サーフェスにつぶつぶを描画してみる

マジで細かい話なのだけど,先月のワークショップのときに,グラフィックに粒状感を足す重要性(CGと実写の境目が曖昧になる効果)について割と時間配分ミスるレベルで説いたんだけど,それでいうと今回は少しだけ上等な粒粒(サイズの幅高さがランダム)を…

【Processing】だーじーだぁ

だーじーだぁだーじーだぁだーじーだぁ ハリウッドザコシショウが大好きなので、だーじーだぁをProcessingで書いた。 カメラキャプチャ→反転してコピーというむちゃくちゃシンプル構造。 シフトで保存できる。その際にコンソールにギャグが表示されるよ。 ど…

【Processing】画像のピクセル情報を利用したソニフィケーション

youtu.be ピクセル情報を取得してソニフィケーション。 一定の距離を進むとy方向に進みつつ距離とループ回数を再設定する。 すでに誰かがやってそうだけど、ここからいろいろ発展できそう。 import processing.sound.*; SawOsc sine1, sine2, sine3; float …

【p5.js】sqrt()をつかってみる

久しぶりにp5.jsを。 対してむずかしいことはしてないが、たのしい。 今回は、sqrt()をつかってみた。円をゆらしながら大きくして、画面いっぱいになったときにリセットする際、直角三角形の長編を求める計算式をつかうとスマートかなと思ってやってみた。い…

【Processing】minimでオーディオスペクトラム その4(プログラムを変えてみる)

youtu.be 94.hatenadiary.jp 94.hatenadiary.jp 94.hatenadiary.jp 94.hatenadiary.jp 94.hatenadiary.jp 94.hatenadiary.jp このシリーズ。 プログラムかえた。 実は前回つくったんだけど、スローテンポのほうが合うと思って見逃した。 もっとスローテンポ…

【Processing】minimでオーディオスペクトラム その3の2(音源を変えてみる)

youtu.be 94.hatenadiary.jp 94.hatenadiary.jp 94.hatenadiary.jp 94.hatenadiary.jp 94.hatenadiary.jp このシリーズ。 今度はその3のコードに使う音源を使ってプログラムを変えてみた。 やってたけど投稿が遅れてしまった。 いろいろあって生活環境が変わ…

【Processing】minimでオーディオスペクトラム その3(プログラムを変えてみる)

youtu.be 94.hatenadiary.jp 94.hatenadiary.jp 94.hatenadiary.jp 94.hatenadiary.jp このシリーズ。 今度はその2の2の音源を使ってプログラムを変えてみた。前回の宣言通り回転を使って書いてはみたものの、この音には合わないようなので却下。 代わりに色…

【Processing】minimでオーディオスペクトラム その2の2(音源を変えてみる)

youtu.be 94.hatenadiary.jp 94.hatenadiary.jp 94.hatenadiary.jp このシリーズ。 今度はその2の音源を変えてみた。やっぱ波形なので、音域によってはなんのこっちゃわからんくなる。 おもしろい音が面白い波形になるとも限らないし、逆もしかり。 プログラ…

【Processing】minimでオーディオスペクトラム その2(プログラムを変えてみる)

【Processing】minimでオーディオスペクトラム その2(プログラムを変えてみる) www.youtube.com 94.hatenadiary.jp 94.hatenadiary.jp このシリーズ。同一音源で、プログラムの方を変えてみた。オシレータがノコギリ波なので、それが描画に反映される。for…

【Processing】minimでオーディオスペクトラム その1の2(音源を変えてみる)

94.hatenadiary.jp 音源を変えてみた。 www.youtube.com 次は同じ音源でプログラムを変えてみよう。

【Processing】minimでオーディオスペクトラム その1

youtu.be ライブラリminimを使う。 オーディオスペクトラムを描画に使った。 波形はアナログシンセの電子音と相性が良い。 見てて楽しい。 音はKORGのmonotribe。monotribeの演奏がたのしくてたまらないので、 それに合う描画のプログラムを書き溜めておいた…

【Processing】ドット絵をかくやつ2

Finderを見て描いた マウスカーソルを見て描いた Appleロゴを見て描いた 94.hatenadiary.jp 続き。 保存する機能を追加した。絵もなんこか描いた。 この解像度だと描けるモチーフが限られてるし、無理してこの解像度でモチーフを見ようとする。 見る力と抽象…

【Processing】リサージュ曲線を描画に使う(5)〜ellipse2()をゆらしながら動かす〜

#Processing #generative pic.twitter.com/uACc5ELlMV— 94 (@_94_94) November 29, 2018 またまた自分で作った関数を使うシリーズ。 そろそろネタ切れ。 今回は色とサイズと変えながら、ゆらゆら動かして描画。 次はnoise()をつかってみようか。 float a; fl…

【Processing】リサージュ曲線を描画に使う(4)〜ellipse2()をまわしてみた〜

#Processing #generative pic.twitter.com/KgBJ7pyE9G— 94 (@_94_94) November 28, 2018 巻き貝ぽい。 float a = 360; float b = random(1,1.5); float c = random(255); void setup() { size(800, 800); background(250); } void draw() { pushMatrix(); tr…

【Processing】リサージュ曲線を描画に使う(3)〜ellipse2()をならべてみた〜

94.hatenadiary.jp 続き。 https://twitter.com#Processing pic.twitter.com/Um3Vt98q1m— 94 (@_94_94) November 26, 2018 せっかく関数を作ったので、使ってみた。 とりあえずならべてみた。 縦横比を調整できるようにしたけどその機能は使わなかった。二重…

【Processing】リサージュ曲線を描画に使う(2)〜ellipse2()をつくる〜

#Processing pic.twitter.com/2C3s8fIkgC— 94 (@_94_94) November 24, 2018ここ最近、三角関数とコードについて考えることがあった。 リサージュ曲線を見てると、やっぱり数値の振る舞いはきれいだよな〜と思う。ところで、リサージュ曲線を書きたいとき、い…

【Processing】tan()を使う

#Processing pic.twitter.com/kKeiQ3l6Io— 94 (@_94_94) November 24, 2018 94.hatenadiary.jpこの記事の続き。 sin()とcos()はよく使うけど、tan()はいつ使うかな〜と思って書いてみた。 回転しながら描画する際に、彩度にtan()をあてるとこんな感じになっ…

【Processing】リサージュ曲線を描画に使う

#Processing pic.twitter.com/kJpDV2ixiM— 94 (@_94_94) November 21, 2018つかれた float degree; //角度 int[] a = new int[8]; void setup() { size(800, 800); background(0); degree = 0; for (int i = 0; i < 8; i++) { a[i] = ((2*(int)random(i+2)) …

【Processing】3D空間内でのカメラの切り替え

youtu.be background()を消すだけでこんなことになるのか、、! 知らんかった。カメラの切り替え雑〜。 float X = random(2000); float Y = random(2000); float Z = random(2000); void setup() { size(500, 500, P3D); //3Dに } void draw() { //backgroun…

【Processing】Open CVを使ってみる(1)動体検知とピクセル情報取得

youtu.be Open CVを使う機会があったので。 動体検知はおもしろいなあ。 import gab.opencv.*; import processing.video.*; Capture camera; //カメラを使う OpenCV opencv; //オープンCVを宣言 void setup() { // 画面サイズ size(1280, 720); // 動画の読…

【Processing】minimを使ってみる(4)〜フィードバックを見る〜

#Processing #minim フィードバックを見る pic.twitter.com/qDKzn5FNdG— 94 (@_94_94) November 4, 2018 フィードバックを見る公式サンプルのディレイをいじって遊んだ。 オーディオインして、ディレイしてフィードバック。 気がついたら1時間くらい遊んでた…

【Processing】minimを使ってみる(3)

#Processing #Minim pic.twitter.com/Y5TFaQdYFu— 94 (@_94_94) 2018年11月3日 minimを触る機会があったので。 ハイハット・スネア・バスドラ・シンセ、この4音のみ。すべてボールの挙動のif文を使ってトリガー。 スネア(十字架の部分に触れたらトリガー)…

【Processing】ドット絵をかくやつ

int[] rectX = new int[10]; //配列、xの数値に使います int[] rectY = new int[10]; //配列、yの数値に使います color[][] c = new color[10][10]; //二次元配列 void setup() { size(500, 500); background(200); noStroke(); for (int x = 0; x < 10; x++…

【Processing】画像をイージングで動かすことによって、チョロQ

制作でチョロQのアニメーションを作る必要があって、Processingでちと動かしてみた。 でも結局Premiereでちゃんと制御してつくりましたとさ。 おれのチョロQ #Processing pic.twitter.com/q5tx9o5FHS— 94 (@_94_94) 2018年8月13日 PImage car; float x ; flo…

【Processing】リ・ソ・ン・ニ

「リ」と「ソ」と「ン」と「ニ」の境界線とは? size(800, 800); background(235, 235, 230); int masu =30; for (int i = 0; i < width; i+=masu) { for (int j = 0; j < height; j+=masu) { pushMatrix(); translate(i + (masu/2), j + (masu/2)); //rectM…

【Processing】5択でジェネる

#Processing pic.twitter.com/udvQr63svv — 94 (@_94_94) June 30, 2018 以前書いたコードを改変した。 94.hatenadiary.jp void setup(){ size(800,800,P3D); background(0); frameRate(20); } void draw(){ translate( width/2, width/2,-100); rotateZ(rad…

【Processing】copy()を使ってみる(9)

#Processing pic.twitter.com/8wPociRIiq — 94 (@_94_94) June 29, 2018 棒状にコピペすることで、スクレイパーで横にペーーーーっって感じ。 にゅらにゅらにゅらとマウスを動かすと、ぺりぺりぺりとなる。 コピペによる表現って、コピー元とコピー先の位置…