フラットデザインでのイラストレーション学習の続き，だけど内容がグラフィックデザインではないので別エントリにした． 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行で様々なバリエーションを作る）をもって書いてるので仕方ないのかもしれないが，もう少しイメージとコードを近…

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

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

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

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

円から三角形のモーフィング，パート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拡張を使ってやりたいと思い立った．今回は，個人的な興味でp5.jsを使うことにした．その理由は以下． p5.js自体が微妙に重い（通常版が2.6MB，min版が1.2MB）ので，逆にローカルにダウンロ…

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

ライブラリ 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，難しいイメージだったけど，やっていくとわかることもある． – 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…

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

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