日常の進捗

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

Mod: Generative Design / P_1_2_2_01

ロードした画像のピクセルから色を取得してタイル状に敷く.改変したところはウィンドウ/画像サイズを正方形でなくした.それに伴って配列に色を詰め込む計算が若干面倒な処理をしている.色の配列をソートする部分はほぼライブラリがやっているのであまり…

Mod: Generative Design / P_1_2_1_01

色Aと色Bの中間の色をグラデーションとして補完するもの.カラーパレットのようなものを出力できるようだったが,Processing 3.XだとどうもASEファイルが適切に書き出されないようだ. 任意の色AとBの中間色をlerpColor()という関数で取得するのだけど,RGB…

2017年を振り返る

例年になく,あっという間に1年が過ぎた印象だった.が,同時に多方面で能力を発揮する場所があったという意味で実りの多い年だったように思う.紅白脇で観ながら振り返る. 1月ー2月 前職で勤めていた大学(院)20周年企画展でのキュレーション+ディレクシ…

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…

Mod: Coding Challenge #86: Cube Wave by Bees and Bombs

Tumblrでアルゴリズミックに作られたGIFアニメーションを公開しているBees and Bombs.今回はその作品の中から一つを再作成するというもの. .@shiffman attempting to recreate my gif in @p5xjs live! https://t.co/tpySsB4Ozi pic.twitter.com/yDQPXR0vlp…

Mod: Generative Design / P_1_1_1_01

マウスカーソルの位置に合わせてグリッドの細かさが変わりながらHSBの色相を表示するもの. 今回のようにマウスの座標をステップ数使う場合,原点(0,0)の位置にあるときfor文が無限ループしてしまう問題がある.サンプルではstepX = mouseX + 2;のような感…

Mod: Generative Design / P_1_0_01

Generative Designをしばらくやってみることにする.サンプルコードにはP,M,Aが接頭辞として付いているが, それぞれ. P:(Basic) Principles(基本原理) M:(Complex) Methods(複雑なメソッド) A:Appendix(付録) のことらしい.みたところP→Aで進…

Mod: Coding Challenge #88: Snowfall

Processingで書きながらところどころ自己流で書いた.いわゆるスプライト画像と言われるような,複数の画像がタイル状に配置された1枚の画像を読み込んで適宜使用するようなやり方をやっている.メリークリスマス. コード // img src : https://alca.tv/sta…

3次元の結び目

結び目理論のコードがいまいち理解できてなかったので,もう少しやってみることにして,リファレンスのページにあったCのコードをProcessingにポーティングしてみた.座標算出のコードぽかったのでグラフィカルになるようにアレンジした. コード float n_se…

Mod: Coding Challenge #87: 3D Knots

ここのところブログにログを残していなかったので(コードは書いてた)、3Dのノット(結び目)に関するチュートリアルをやってみた.球体の面上の点を求める式に似ているのが面白い.コードの中のコメントアウトしている式がそれぞれ,変数betaから半径や角…

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

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

UnicessingをつかってProcessingライクなコードをUnityで実行する

そもそもUnityの使い方がよくわかってなかったのだけど,なんとかなった.以下手順. Unityで新規プロジェクトを作成 新規シーンを作成 シーン内のカメラにインスペクタでMain CameraのTagを指定 空のゲームオブジェクトを配置 カメラの画角がゲームオブジェ…

1960年代のコンピュータアートをProcessingを使って再考する

コード 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関数…

フラットデザインでイラストを描く(4)表情

パスファインダやシェイプ形成ツールをつかって,四角形や角丸長方形,円などの基本的な図形を組み合わせてパーツを作っている.慣れてくるとあまり苦にならず作れる気がする.人間はこれまでのものでバリエーションが作れそうなので,道具や動物などのバリ…

IllustratorのレイヤーをSVG書き出しして,Tinkercadにインポートする

フラットデザインでのイラストレーション学習の続き,だけど内容がグラフィックデザインではないので別エントリにした. takawo.hatenablog.com IllustratorはSVGをファイルフォーマットとしてサポートしているので,保存の際にSVGを選ぶと書き出せる.が,…

フラットデザインでイラストを描く(3)動き

抽象化した図形で構成することに慣れてきたのもあって,動画の終盤の完成版を確認しながら自分なりに形を作った.動きを表現する場合,骨格に収めようとするのではなく,ある程度のデフォルメがないと生き生きと動いているように見えない. ふとレイヤー化し…

三角形の辺の上を移動しながら結ぶ線

リファレンスの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>…

フラットデザインでイラストを描く(2)立ち姿

フラットデザインは要するに,3D→2Dへの変換の抽象度を上げて(解像度を上げるとスキューモーフィズム),指し示す事柄そのものにフォーカスするためのデザイン. 丸や四角,角丸などシンプルな形状による要素の組み合わせと,設定したデザインルールによっ…

フラットデザインでイラストを描く(1)顔

イラストが依然描けないのでフラットデザインのイラストをとにかく描くというチュートリアルをやった.デザインのコツはシンプルで,特にフラットデザインはルールベースで作れるので,見た目以上に効果があるような感じがしたというか,個人的ブレイクスル…

Chrome拡張(8)起動〇〇分後に,△△分間隔で繰り返されるChrome拡張

コード { "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…

HE_MESH Tutorial (5)ベートーベンのポリゴンを削減する

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の最後の行で次の半径へスムーズにつなげるようにして…

イラストを描く(1) 鳥とハリネズミ

放置してきたイラストを描く能力向上と本格的に向き合う必要が出てきたので,書籍をもとに描く練習をした.書籍に掲載されているキャラクターを観ながら,なんとなくそれっぽくIllustratorで造形できる感覚は,例えばバイト先でキャベツのみじん切りだけを延…

Mod: Coding Challenge #83: Chrome Extension with p5.js Sketch

p5.jsを使って以前Chrome拡張を作ることをやってみた. takawo.hatenablog.com が,開くWebサイトによって実行されなかったりすることもあって原因がわからなかった. 今回の内容では,p5.jsを使ってChrome拡張を作るというまんまな内容で,普段書いているグ…

Illustratorで印刷時にPNG画像の透過部分がおかしい場合の対処法

プリントで表示されるダイアログで,出力するプリンタを選択し,左のメニューから「詳細」を選択する.更に「ビットマッププリント」にチェックを入れて印刷する.

螺旋状のブロック

最近どうもProcessingでコーディングしてる最中に悩むことが増えた.昔はもっと雰囲気で良い感じに書く速度が早かった気がする.今は目的(15行で様々なバリエーションを作る)をもって書いてるので仕方ないのかもしれないが,もう少しイメージとコードを近…

階段状のパターン

コード fullScreen(); for (float y = height*2; y > 0; y -= height/20) { float yn = y; float xn = 0; strokeWeight(10); beginShape(); while (yn >= 0) { vertex(xn, yn); xn += width/20; vertex(xn, yn); yn -= height/30; vertex(xn, yn); } endShap…

Mod: Coding Challenge #82: Image Chrome Extension: The Ex-Kitten-sion!

{ "manifest_version": 2, "name":"Chrome Extension", "version": "0.1", "web_accessible_resources" : ["images/*.jpg"], "content_scripts": [ { "matches" : ["<all_urls>"], "js" : ["content.js"] } ] } (function (){ let files = [ "nasa-63032.jpg", "joel-f</all_urls>…