はじめに このエントリは「2018 Advent Calendar 2018」の13日目の記事として書かれました．ここでは，今年，取り組んでいたフラットなイラストレーション技法の紹介と，その習得方法について紹介したいと思います．これが個人的体験として2018ベストという…

はじめに これはProcessing Advent Calendar 2018の3日目の記事です． 昨年のProcessing Advent Calendar 2017では「クリエイティブコーディング学習の最適解としてのProcessingと，デイリーコーディングのススメ」というエントリを書きました．このエントリ…

最近どうも思ったように時間が取れず，こういう自分の楽しみを納得いくところまで作業が進められない．それはそれで仕方がない部分もありつつ，違う楽しさを見つけるような感じにもなってきている．3Dの立体視はカメラつまり視点からの距離で赤／緑などの色…

なんとなくフィーリングで書けるなとおもったら，過去書いたCoding Trainのアルゴリズムを思いっきり踏襲していた． 風や消滅の処理を，もうちょっとエレガントに書けるようになっておきたい． //inspired by https://thecodingtrain.com/CodingChallenges/0…

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

//クリフォード・アトラクタ // 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…

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

ザ・手癖でコーディングした． 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…

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

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(…

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

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

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

再生すると音が出ます，すいません． // 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; …

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

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

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

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

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

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

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

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

リファレンス www.youtube.com

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

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

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

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

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

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

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