日常の進捗

主に自分のための,行為とその習慣化の記録

#Codevember day14: Coffee

色を取得して,RGBの3つの値をXYZのような距離として,特徴的な色を抽出するテスト. ……と思ったがあまりうまくいかなかった. p5.js Web Editor let img; let rows; //行(Y方向) let cols; //列(X方向) let colors = []; //画像の読み込み function pre…

#Codevember day13: Black Hole

//クリフォード・アトラクタ // Xn+1 = sin( a * Yn ) + c * cos( a * Xn ) // Yn+1 = sin( b * Xn ) + d * cos( b * Yn ) //係数 let a = 1.374; let b = -1.764; let c = 1.582; let d = 1.056; //プロットする点,漸化式のn+1 let dx, dy; //点と初期値 l…

#Codevember day12: Bread

お題が「Bread」だったのでをつかってp5.jsのグラフィックス機能(レイヤーみたいなやつ)を使ってみた. ProcessingでいうところのPGraphicsとの挙動が違う点が現時点ではあったのでちょっとハマった. beginDraw,endDrawは使わない. グラフィクスに描画し…

#Codevember day11: RGB

ザ・手癖でコーディングした. function setup() { createCanvas(windowWidth, windowHeight, WEBGL); } function draw() { background(0); ambientLight(100); directionalLight(255,255,255,0,0,1); normalMaterial(); translate(0,0,-500); // 回転 rotat…

#Codevember day10: Apple

以前p5.jsでobjのロードは経験があったけど,動かなくなっててハマった.現状バージョンを下げて対応できることがissueで確認できたのでそれでやってみた. //p5.jsのバージョンv.0.5.11を使用 let obj; function preload(){ obj = loadModel("apple.obj"); …

#Codevember day09: Green

let sw; let sc; let depth; let noiseScale; function setup() { createCanvas(400, 400); colorMode(HSB,360,100,100,100); angleMode(DEGREES); sw = 10; sc = color(0,0,100); depth = 0; noiseScale = random(100,400); } function draw(){ background(…

#Codevember day08: Cat

角丸の多角形など,チャレンジしたいこともあったが時間もあり,今回はたどり着けなかった.しかしやれることはやった Add rounding corners of triangles. · Issue #2529 · processing/p5.js · GitHub let dark_yellow; let yellow; let light_yellow; let …

#Codevember day07: Sea

乗算をすると海の深さが表現できるかなと思ってblendModeを使ってみた.見ている時間で背景の色が変わるようにしている.レイヤーの合成の概念はもう少しきちんと理解しておきたいけど,ひとまず. let font; let gridY; let gridX; let noiseScaleX = 250; …

#Codevember day06: Web

いわゆる地味グラミングだけど蜘蛛の巣を張るをやってみる.中の連結をlineで引いてるけど角度計算は三角形だしbezierでできそう. 0〜360度の角度のなかでランダムに角度を増やしながらrotateで回転しながら線を引く. 回転しながら引かれる線Aと次の線Bの…

#Codevember day05: Music

再生すると音が出ます,すいません. // fork and port from 94's processing code. // http://94.hatenadiary.jp/entry/2018/11/04/013440 let sound_top; let sound_bottom; let sound_right; let sound_left; let sound_vertical; let sound_horizontal; …

#Codevember day04: Sky

「コーディングチャレンジ的なものを続けるコツ」は,軽くてもいいので1日のうちで早い時間にアップするのがいい. 早くアップできると気分が軽くなるし,あとで手も入れやすい.たとえば明日のCodevemberのお題は「Music」だけど,早めに取り組んであげられ…

#Codevember day03: Carrot

人参みたいなかわいいお題,いけるんかなとおもったけどいけた.過去に書いた根茎図のプログラムがつかえるなーと思ってp5.jsに転用した. takawo.hatenablog.com //modify from my past sketch in p5. //http://takawo.hatenablog.com/entry/2017/12/30/152…

#Codevember day02 : Time

時計ぽいプログラムを書こうかなと思って絵文字などを配列に突っ込んでいたらどうも行き詰まったので,以前書いたヴィンテージのコンピュータグラフィックスをp5.jsにポーティングした.意外と楽だったけど質感が面白くできないかとおもって,線の透明度を変…

p5.jsで外部ファイルを扱う方法をGoogle Fontsを例に説明する

p5.jsで外部ファイルを読み込んで利用する手順を,フォントを読み込む例としてまとめておく.フォント以外にも音声ファイルや画像ファイル,映像ファイルを読み込めるようだ.アップロードできる容量は制限があるものの,Webでのグラフィックス表現としては…

#Codevember day01 : Infinity

Codevemberは11月1日から30日までの1ヶ月間,毎日設定されているお題に合わせてプログラミングでスケッチするという一種のコーディングチャレンジ.お題はウェブサイトから確認できる.NovemberとCode Dev.あたりが掛かってるのかな.日本語だとついコーデン…

180802

今日はコンピュータクラブの学生が3Dプリンタの組み立てやるのお目付け役をしていた.やはり組み立てのコツ(取扱説明書や動画解説を観ながら,向きや取り付け位置,ポイントなど)を確認することは重要だなと思いつつ,中国製の3Dプリンタキットがあるブレ…

180801この夏のToDoリスト

TouchDesigner DAT,Pythonでのスクリプティング UI,OSCなどの理解 Blender コンピュータグラフィックスで使いたい気持ちも出てきた p5.js 体験授業準備 ml5.jsとp5.js Arduino ソリッドステートリレーの100V照明制御 一眼レフのカメラ制御 フィジカルコン…

TouchDesigner #005 CHOP to SOP/SOP to CHOP study

インスタンシングのスタディとあわせて,CHOP2SOP,SOP2CHOPについて.

TouchDesigner #004 Instancing study

リファレンス www.youtube.com

TouchDesigner #003 Feedback TOP study

Feedback TOP,Cache TOP,Cache Select TOPを使ったビデオフィードバック.

TouchDesigner #002 Switch TOP study

スクリーンレコーディングはライブコーディングに似ててやり直しがきかない感じの緊張感がある.気負わずやれるほうがいいと思っている. TODO スクリーンレコーディングするまえにSpot on the mouseの起動を忘れない keycastのようなキーボード押下を表示す…

TouchDesigner #001 SOP study

ワークショップspektra 4.0.0での永松さんのサンプルにあった図形をイメージしながら見ないでトレースしてみた. SPEKTRA Vol.4.0.0 : Programming GPU based real-time graphics with TouchDesigner | MTRL KYOTO(マテリアル京都)

Re: 波紋

yetirom.hatenablog.com イエティが描いていた波紋のプログラムで,困っていたところについて幾つか考えて描いてみた. 要件としては クリックしたら波紋が発生 クリックしてなくても波紋が広がっていくと 波紋の数が増えると 波紋を作るのに必要な変数(括…

Mod: Coding Challenge #90: Floyd-Steinberg Dithering

チュートリアルではFloyd-Steinbergのディザを生成するアルゴリズムを使っているが,書き換えたプログラムでは便宜上16を4つのランダムな数字をつかって表すやり方でディザを作ってみている. コード import processing.pdf.*; import java.util.Calendar; P…

Mod: Generative Design / P_2_1_3_02

当初実行画面を見た時に,アルゴリズムが読めなくて困惑した. コードの込み入った部分だけを取り出して読んでみると,for文を使って矩形領域の4辺をなぞるように変数x2,y2を使って座標を移動している.周囲をなぞるようなアルゴリズムはちょうど今日見た以…

Mod: Generative Design / P_2_1_3_01

randomで設定した方向に同心円が伸びる(中心が進行方向に移動する)部分のオフセットの書き方が面白かった. コード import processing.pdf.*; import java.util.Calendar; boolean savePDF = false; int actRandomSeed = (int) random(100000); int tileCo…

Mod: Generative Design / P_2_1_2_04

タイリングした矩形の頂点をランダムにバラけさせる.randomSeed()の使い方(引数の値が固定されるとフレームごとのrandomの値が同じ=固定される)はこれまでもやってきているけど,こういったシミュレーションのスケッチだと便利に使える. コード import …

Mod: Generative Design / P_2_1_2_03

コード import processing.pdf.*; import java.util.Calendar; boolean savePDF; int actRandomSeed = (int) random(100000); float tileCount = 20; color moduleColor; int moduleAlpha = 70; int max_distance = 500; void setup() { size(960, 540, P3D)…

一日ひとつだけ強くなる,だけではなくて

プロゲーマー,梅原大吾さんが2017年1月に慶應丸の内シティキャンパスで講演したときの動画がYouTubeに公開されている.2時間の動画だが普通にききやすく,全く時間を感じることなく観ることができた. この講演では「ゲーム」という,これまで娯楽以上の社…

Mod: Generative Design / P_2_1_2_02

84行目あたりのmoduleRadiusBackground = max(moduleRadiusBackground-2, 10);みたいな書き方はスマートでいいなと思った. コード import processing.pdf.*; import java.util.Calendar; boolean savePDF = false; color moduleColorBackground; color modu…