日常の進捗

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

イラストを描く(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>…

Tinkercadでポスターのデザインをする

Tinkercadは3DCADのソフトウェアで3D上にオブジェクトを配置したり形状をデザインできる.一方これまで使ってきたIllustratorのような2Dのグラフィックデザインのソフトウェアで考えてきたようなデザインのセオリーをもって3D空間上にオブジェクトを配置する…

Chrome拡張(7) Chrome拡張とブックマークレット

「11.1 : Introduction to Chrome Extensions - Programming with Text」はChrome拡張に関するイントロダクション.その中で,通常の「サービスやChromeでのブラウジング体験をより便利にする」という目的のChrome拡張ではなく,より多様な価値観へ向けたク…

Mod: Coding Challenge #81.2: Circle Morphing - Part 2

p5.jsで書かれてたコードを読み解きながらProcessingにポーティングした. コード ArrayList<Point> circlePath = new ArrayList<Point>(); int spacing = 1; float t; void setup() { size(960, 540); colorMode(HSB, 360, 100, 100); setN(); strokeJoin(ROUND); strokeC</point></point>…

Tinkercad SVGのインポート

忘れそうなのでメモ書き. TinkercadはIllustratorやInkscapeなどで作成したSVGデータをインポートできる.その時, SVGのアートボード全体をインポートする アート(グラフィック単体)を抽出してインポートする 2つのうちいずれかを選べる.いままでは感覚…

乱数のコク

コード fullScreen(); background(255,255,255); for (int i = 0; i < 100000; i++) { float x = random(width/2); float y = random(height); point(x, y); } translate(width/2, 0); for (int i = 0; i < 100000; i++) { float x = (random(width/2)+rando…

連続する三角形

コード fullScreen(); colorMode(HSB, 360, 100, 100); background(0, 0, 100); for (float x = width * 3/4; x > width * 1/4; x -= 50) { float y = height /2; fill(int(random(5))*360/5, random(80, 100), random(80, 100)); stroke(0,0,100); beginSha…

ノイズによるパターン

コード size(960, 540, P2D); // ウィンドウサイズを960px,540pxに colorMode(HSB, 360, 100, 100); // HSBでの色指定にする float grid = 15; background(0, 0, 100); for (float y = 0; y < height; y += grid) { for (float x = 0; x < width; x += grid)…

Mod:Coding Challenge #81.1: Circle Morphing - Part 1

円から三角形のモーフィング,パート1.円周上の点,三角形の辺上の点をそれぞれ配列として保存して,その間を動く点を描画する. コード ArrayList<PVector> circlePath = new ArrayList<PVector>(); ArrayList<PVector> trianglePath = new ArrayList<PVector>(); int n = (int)random(3,10); i</pvector></pvector></pvector></pvector>…

樹木の年輪

コード fullScreen(); translate(width/2, height/2); noiseSeed(10111101); float maxR = sqrt(width*width+height*height); for (float r = maxR; r > 0; r -= maxR/100) { pushMatrix(); beginShape(); for (float angle = 0; angle < 360; angle += 360/…

Chrome拡張(6)p5.jsで作る,バックグラウンドで動作するChrome拡張

タイトル通り,背景でなんとなくジェネラティブに動くものをChrome拡張を使ってやりたいと思い立った.今回は,個人的な興味でp5.jsを使うことにした.その理由は以下. p5.js自体が微妙に重い(通常版が2.6MB,min版が1.2MB)ので,逆にローカルにダウンロ…

ガチャガチャと3Dプリンタ(2)中身をモデリングしてみる

オープンキャンパスの学科イベントで3Dプリンタで作ったものを中に入れたガチャガチャを回してもらうというのを考えた.で,コインを3Dプリンタでモデリングするところまでやった. takawo.hatenablog.com 筐体はコレ. http://amzn.asia/cKD7S1U コインをテ…

HE_MESH Tutorial (4)

ライブラリ PeasyCam ControlP5 HE_Mesh 上記ライブラリをContribution Managerで検索してインストールする コード 01 import controlP5.*; import peasy.*; import peasy.org.apache.commons.math.*; import peasy.org.apache.commons.math.geometry.*; imp…

HE_MESH Tutorial (3)

HE_MESH,難しいイメージだったけど,やっていくとわかることもある. – All classes prefixed by HE_ specify core classes for accessing specific data concerning our mesh. – All classes prefixed by HEC_ specify creators for creating & configurin…

HE_MESH Tutorial (2)

ライブラリ PeasyCam ControlP5 HE_Mesh 上記ライブラリをContribution Managerで検索してインストールする コード import controlP5.*; import peasy.*; import peasy.org.apache.commons.math.*; import peasy.org.apache.commons.math.geometry.*; import…

HE_MESH Tutorial (1)Basic

コード import controlP5.*; import wblut.geom.*; import wblut.hemesh.*; import wblut.core.*; import wblut.math.*; import wblut.nurbs.*; import wblut.processing.*; WB_Render3D render; HE_Mesh mesh; int setTubeFacets; int setTorusFacets; int …

N角形の各辺に内接するN角形

コード // setup関数 : 初回1度だけ実行される void setup() { size(960, 540); // ウィンドウサイズを960px,540pxに colorMode(HSB, 360, 100, 100, 100); // HSBでの色指定にする blendMode(ADD); smooth(); // 描画を滑らかに stroke(0, 0, 100); frameRa…

ProcessingでFizz Buzz

21世紀,プログラミング界隈には,Fizz Buzzという概念がある. Fizz Buzz - Wikipedia プレイヤーは円状に座る。最初のプレイヤーは「1」と数字を発言する。次のプレイヤーは直前のプレイヤーの次の数字を発言していく。ただし、3で割り切れる場合は「Fizz…

Processingでズンドコキヨシ

21世紀,プログラミング界隈には,ズンドコキヨシという文化がある. Javaの講義、試験が「自作関数を作り記述しなさい」って問題だったから「ズン」「ドコ」のいずれかをランダムで出力し続けて「ズン」「ズン」「ズン」「ズン」「ドコ」の配列が出たら「キ…

セル・オートマトン

CA ca; int scale = 5; // setup関数 : 初回1度だけ実行される void setup() { size(960, 540); // ウィンドウサイズを960px,540pxに colorMode(HSB, 360, 100, 100); // HSBでの色指定にする smooth(); // 描画を滑らかに int[] rule = {0, 1, 0, 1, 1, 0, …

相互に引き寄せ合う球体

float g = 0.8; int num = 100; ArrayList<Mover> movers = new ArrayList<Mover>(); // setup関数 : 初回1度だけ実行される void setup() { fullScreen(); // ウィンドウサイズを960px,540pxに colorMode(HSB, 360, 100, 100,100); // HSBでの色指定にする smooth(); // </mover></mover>…

game of life

コード GOL gol; void setup() { size(960, 540); colorMode(HSB, 360, 100, 100); gol = new GOL(); } void draw() { background(0, 0, 100); gol.generate(); gol.display(); if (frameCount%200 == 0) { gol.init(); } } void mousePressed() { gol.init(…

ノイズとランダム

コード noise / 15 lines of code fullScreen(); noiseSeed(100); noFill(); beginShape(); for (float x = 0; x <= width; x += width/30) { float y = map(noise(x*0.001),0,1,0,height); vertex(x, y); } endShape(); fill(0, 0, 100); for (float x = 0;…

Mod: Guest Tutorial #6: The Modulo Operator with Golan Levin

朝起きてなんとなくチュートリアルの動画を流しながら朝支度するのが日課ぽくなってる.今日はクリエイティブ・コーディングやメディアアートで著名なGolan Levinが剰余演算について話してる回を観た.剰余演算自体はプログラミングをやっていれば使う便利な…

カードゲーム「15 lines of <code>」(3)試作 カードのデザイン

前回テストで出力した際に,懸念点として挙がったこと コードの読みやすさ(シンタックスのハイライト[構文を色分けする]) 書き写したくなるものになっているか(書き写すのが簡単/の割に実行結果が面白い) 実行結果の面とコードの面,ひと目で区別がで…