コード import generativedesign.*; import processing.pdf.*; import java.util.Calendar; boolean savePDF = false; int colorCount = 20; float[] hue = new float[colorCount]; float[] sat = new float[colorCount]; float[] bri = new float[colorCoun…
コード import generativedesign.*; import processing.pdf.*; import java.util.Calendar; boolean savePDF = false; int tileCountX = 100; int tileCountY = 50; float[] hue = new float[tileCountX]; float[] sat = new float[tileCountX]; float[] bri…
ロードした画像のピクセルから色を取得してタイル状に敷く．改変したところはウィンドウ／画像サイズを正方形でなくした．それに伴って配列に色を詰め込む計算が若干面倒な処理をしている．色の配列をソートする部分はほぼライブラリがやっているのであまり…
色Aと色Bの中間の色をグラデーションとして補完するもの．カラーパレットのようなものを出力できるようだったが，Processing 3.XだとどうもASEファイルが適切に書き出されないようだ． 任意の色AとBの中間色をlerpColor()という関数で取得するのだけど，RGB…
例年になく，あっという間に1年が過ぎた印象だった．が，同時に多方面で能力を発揮する場所があったという意味で実りの多い年だったように思う．紅白脇で観ながら振り返る． 1月ー2月 前職で勤めていた大学（院）20周年企画展でのキュレーション＋ディレクシ…
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…
Tumblrでアルゴリズミックに作られたGIFアニメーションを公開しているBees and Bombs．今回はその作品の中から一つを再作成するというもの． .@shiffman attempting to recreate my gif in @p5xjs live! https://t.co/tpySsB4Ozi pic.twitter.com/yDQPXR0vlp…
マウスカーソルの位置に合わせてグリッドの細かさが変わりながらHSBの色相を表示するもの． 今回のようにマウスの座標をステップ数使う場合，原点（0,0）の位置にあるときfor文が無限ループしてしまう問題がある．サンプルではstepX = mouseX + 2;のような感…
Generative Designをしばらくやってみることにする．サンプルコードにはP，M，Aが接頭辞として付いているが， それぞれ． P：(Basic) Principles（基本原理） M：(Complex) Methods（複雑なメソッド） A：Appendix（付録） のことらしい．みたところP→Aで進…
Processingで書きながらところどころ自己流で書いた．いわゆるスプライト画像と言われるような，複数の画像がタイル状に配置された1枚の画像を読み込んで適宜使用するようなやり方をやっている．メリークリスマス． コード // img src : https://alca.tv/sta…
結び目理論のコードがいまいち理解できてなかったので，もう少しやってみることにして，リファレンスのページにあったCのコードをProcessingにポーティングしてみた．座標算出のコードぽかったのでグラフィカルになるようにアレンジした． コード float n_se…
ここのところブログにログを残していなかったので（コードは書いてた）、3Dのノット（結び目）に関するチュートリアルをやってみた．球体の面上の点を求める式に似ているのが面白い．コードの中のコメントアウトしている式がそれぞれ，変数betaから半径や角…
これはProcessing Advent Calendar 2017 - Qiitaの21日目の記事です。 Advent Calendarを通じて「プログラミングを通じて個人が表現する文化」がもっと盛り上がったら良いなと思ったので，思い立って勢いで書いてみることにしました．このエントリの内容は大…
そもそもUnityの使い方がよくわかってなかったのだけど，なんとかなった．以下手順． Unityで新規プロジェクトを作成 新規シーンを作成 シーン内のカメラにインスペクタでMain CameraのTagを指定 空のゲームオブジェクトを配置 カメラの画角がゲームオブジェ…
コード float r = 200; float t; // setup関数 : 初回1度だけ実行される void setup() { size(960, 540, P3D);// ウィンドウサイズを960px,540pxに blendMode(ADD); colorMode(HSB, 360, 100, 100, 100); // HSBでの色指定にする } // draw関数 : setup関数…
パスファインダやシェイプ形成ツールをつかって，四角形や角丸長方形，円などの基本的な図形を組み合わせてパーツを作っている．慣れてくるとあまり苦にならず作れる気がする．人間はこれまでのものでバリエーションが作れそうなので，道具や動物などのバリ…
フラットデザインでのイラストレーション学習の続き，だけど内容がグラフィックデザインではないので別エントリにした． takawo.hatenablog.com IllustratorはSVGをファイルフォーマットとしてサポートしているので，保存の際にSVGを選ぶと書き出せる．が，…
抽象化した図形で構成することに慣れてきたのもあって，動画の終盤の完成版を確認しながら自分なりに形を作った．動きを表現する場合，骨格に収めようとするのではなく，ある程度のデフォルメがないと生き生きと動いているように見えない． ふとレイヤー化し…
リファレンスのGIFアニメーションをTwitterのタイムラインで見て，なんとなく書けそうと思って書いてみた．書けた． コード int num = 50; float r = 270; int current = 0; ArrayList<PVector> triangle = new ArrayList<PVector>(); ArrayList<PVector> points = new ArrayList<PVector>(); // </pvector></pvector></pvector></pvector>…
フラットデザインは要するに，3D→2Dへの変換の抽象度を上げて（解像度を上げるとスキューモーフィズム），指し示す事柄そのものにフォーカスするためのデザイン． 丸や四角，角丸などシンプルな形状による要素の組み合わせと，設定したデザインルールによっ…
イラストが依然描けないのでフラットデザインのイラストをとにかく描くというチュートリアルをやった．デザインのコツはシンプルで，特にフラットデザインはルールベースで作れるので，見た目以上に効果があるような感じがしたというか，個人的ブレイクスル…
コード { "name": "experimental", "version": "0.1", "manifest_version": 2, "background": { "scripts": ["background.js"] }, "permissions": [ "alarms", "notifications" ] } (function() { //アラームの作成 // 'test' : アラームの名前（なんでもい…
fullScreen(); colorMode(HSB,360,100,100); background(330, 80, 40); stroke(0, 0, 100); PVector[] points = new PVector[1000]; for (int i = 0; i < 1000; i++) { points[i] = new PVector(random(width), random(height)); } for (PVector p1 : points…
import wblut.geom.*; import wblut.hemesh.*; import wblut.core.*; import wblut.math.*; import wblut.nurbs.*; import wblut.processing.*; import peasy.*; import peasy.org.apache.commons.math.*; import peasy.org.apache.commons.math.geometry.*;…
OpenProcessingが落ちているのでコードをあげられないが，書いた．15行であるレベルのコードが書けると気持ちいい．失敗するとズッコケた感じになる．今回は比較的余裕があったので色とか触れた． vertexの最後の行で次の半径へスムーズにつなげるようにして…
放置してきたイラストを描く能力向上と本格的に向き合う必要が出てきたので，書籍をもとに描く練習をした．書籍に掲載されているキャラクターを観ながら，なんとなくそれっぽくIllustratorで造形できる感覚は，例えばバイト先でキャベツのみじん切りだけを延…
p5.jsを使って以前Chrome拡張を作ることをやってみた． takawo.hatenablog.com が，開くWebサイトによって実行されなかったりすることもあって原因がわからなかった． 今回の内容では，p5.jsを使ってChrome拡張を作るというまんまな内容で，普段書いているグ…
プリントで表示されるダイアログで，出力するプリンタを選択し，左のメニューから「詳細」を選択する．更に「ビットマッププリント」にチェックを入れて印刷する．
最近どうもProcessingでコーディングしてる最中に悩むことが増えた．昔はもっと雰囲気で良い感じに書く速度が早かった気がする．今は目的（15行で様々なバリエーションを作る）をもって書いてるので仕方ないのかもしれないが，もう少しイメージとコードを近…
