日常の進捗

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

クリエイティブコーディング

2019年のデイリーコーディングを振り返る

はじめに デイリーコーディングについては,過去にこのようなエントリを書きました. takawo.hatenablog.com デイリーコーディングは「毎日コーディングする習慣」を指す造語で,時間ややり方については,明確な定義を設けていません.自分なりに考えて,今…

音楽,あるいはPotluck LabとOrca

今年は個人的に様々な新しいことに取り組めた有意義な一年だった.中でも自分にとってもっとも大きかった「ベスト・オブ・ベスト2019」は音楽,DTMやライブコーディングとの出会いだった.実際のところ,自分はギターやベースといったバンド活動の先にある音…

クリエイティブコーディングと配色

はじめに これはp5.jsやProcessingでコーディングをしていて配色について考え始めた人へ向けたエントリです.合わせてデイリーコーディングのコツや,「グラフィックのためのコード」についてもまとめています. 僕は毎日時間を決めてクリエイティブコーディ…

クリエイティブコーディング学習の最適解「ルートB」としてのp5.js

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

#Codevember day16: Star

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

#Codevember day15: Fire

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

#Codevember day14: Coffee

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

#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 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.あたりが掛かってるのかな.日本語だとついコーデン…

2軸で動く点

blendMode(ADD)を使いつつ背景をフェードさせ動きを効果的に見せる方法が分かっていなかったが,今回のようにblendMode(BLEND)と組み合わせると行けるのが分かった. 全く関係ないが,久しぶりにWeb開発などをしようと思いCodekitというアプリケーションで作…

根茎図のカタログ

実家に帰るとあまりやることがないので今年の振り返りをしながらWebの改修のための作業などをする予定. コード(カタログ版) import processing.pdf.*; import java.util.Calendar; boolean savePDF = false; float len = 35; int row = 6; int col = 5; i…

クリエイティブコーディング学習の最適解としてのProcessingと,デイリーコーディングのススメ

これはProcessing Advent Calendar 2017 - Qiitaの21日目の記事です。 Advent Calendarを通じて「プログラミングを通じて個人が表現する文化」がもっと盛り上がったら良いなと思ったので,思い立って勢いで書いてみることにしました.このエントリの内容は大…