日常の進捗

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

Processing

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

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

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

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

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_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)…

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…

Mod:Coding Challenge #89: Langton's Ant

ブロックノイズがすごいので実際に実行してみて欲しい. コード int[][] grid; int x; int y; int dir; int ANTUP = 0; int ANTLEFT = 1; int ANTDOWN = 2; int ANTRIGHT = 3; color c1, c2, c3, c4; PImage ant; void setup() { //fullScreen(); size(960, …

Mod: Generative Design / P_2_1_1_04

サンプルコードはSVGファイルをシェイプとして読み込むものだったが極力図形をコードで描いた.タイムアップ. コード import processing.pdf.*; import java.util.Calendar; boolean savePDF; int tileCount = 15; float tileWidth, tileHeight; float shap…

Mod: Generative Design / P_2_1_1_01 + P_2_1_1_02 + P_2_1_1_03

コード import processing.pdf.*; import java.util.Calendar; boolean savePDF = false; int strokecap = ROUND; int randomseed = (int) random(10000); int gridSize; color c1, c2, c3; void setup() { size(960, 540); colorMode(HSB, 360, 100, 100, 1…

Mod: Generative Design / P_2_0_02 + P_2_0_03

コード import processing.pdf.*; import java.util.Calendar; boolean recordPDF = false; void setup() { size(960, 540, FX2D); colorMode(HSB, 360, 100, 100, 100); blendMode(ADD); background(0, 0, 0); } void draw() { translate(width/2, height/2…

Mod: Generative Design / P_2_0_01

書けそうだったのでこれまでのPDF保存などの基本構造をベースに書いた.元のサンプルコードと比較してみるとアルゴリズムはかなりトレース出来たことが確認できた. コード import processing.pdf.*; import java.util.Calendar; boolean savePDF = false; v…

Mod: Generative Design / P_1_2_3_03 + P_1_2_3_04

コード import generativedesign.*; import processing.opengl.*; import java.util.Calendar; int colorCount = 20; float[] hue = new float[colorCount]; float[] sat = new float[colorCount]; float[] bri = new float[colorCount]; float alpha = 50; …

Mod: Generative Design / P_1_2_3_02

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

Mod: Generative Design / P_1_2_3_01

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

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…

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関数…

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

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

ランダムな点を線でつなぐ

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…