Processingで曲線を描くときに楽できるツール
Processingで思ったような曲線を描くのがめんどいのーと検索してたところ、こんなツールがあったのでご紹介です。
Illustratorのようにハンドルを動かすと、自動的にvertexとbezierVertexの座標を出してくれます。
こんな感じです。
void setup() { size(600,600); noLoop(); } void draw() { background(255); fill(0); beginShape(); vertex(150,43); bezierVertex(220,107,224,173,156,252); bezierVertex(204,166,200,102,150,43); endShape(); }
Processingでイラレから出力したSVGを使う
Processingで全自動生成したいところですが、自分の気にいったパーツを使いたいというときもあるハズ。
ということで、ProcessingにSVGファイルを読み込ませて、複数個ランダムな位置・大きさ・角度にしてみました。
イラレから書き出すときに設定に気をつけないと、Processingで読み込んだときにいちばん下にあるパーツの形しか表示してくれませんでした。色も抜け落ちます。
まずはIllustrator(CC2017)から下記の設定でSVGを書き出します。
ファイル→書き出し→書き出し形式でSVGにすればOKです。背景というかアートボードを白の状態にしていても、Processingで読み込んだときにちゃんとオブジェクトのみ表示してくれます。
このことが分かりやすいように、Processingの背景を黒にしています。
実際読み込むSVGファイルがこれ。
今回の結果がこれです。
書き出した後はProcessingに移り、下記を入力します。
PShape s1; int x,y; //位置ランダム float r;//大きさランダム void setup() { size(600, 600); background(0); noLoop(); smooth(); //SVGファイル s1 = loadShape("test6.svg"); } void draw() { background(0); for (int i = 0; i < 10; i++) { r = random(42.71,170.87); x = int(random(0, 600)); y = int(random(0, 600)); //回転 s1.rotate(random(0,359)); shape(s1,x,y,r,r); } } void mousePressed() { redraw();// ボタンが押されたら再描画 }
Processingで集中線を描く
集中線はあまり使わないかもですが、線を一定角度回転させるということはありそうなのでメモです。
太さをランダムに、そして線の角の種類を変えることで、集中線っぽくしてます。
//角度。小さくすると密度が増える int angle = 3; void setup() { size(600,600); noLoop(); } void draw() { background(255); translate(width/2.0, height/2.0); pushMatrix(); for (int i = 0; i < 360/angle; i++) { //中心が原点で、角度ぶん回転させてる rotate(radians(angle)); stroke(0); //線の太さをランダムにすることで、集中線っぽさを出す strokeWeight(int(random(1,6))); //線の角が四角になるように strokeCap(SQUARE); line(0, 0, 400, 400); } noStroke(); fill(255); ellipse(0, 0, 200,400); popMatrix(); }
Processingで紙ふぶきを描く
よくイラストで飛んでる三角形です。
色数多すぎたかも・・・完全に形までランダムだといびつになったりするので、欲しい三角形の形を拡大縮小と回転させたほうがよさげです。
int tx,ty; //三角形の数 int triangleCount = 20; //最大個数分、または色のパターンの数配列を用意する int[] colt = new int[triangleCount]; color[] colarray = { #263716,#f16343,#9774c7,#7b6c30,#f32cd5,#e4dfb2,#17cfc8,#8bac33,#315d21,#eee9e6,#e8cb37,#f16bb4,#92cedc,#2a45e7,#720e29,#f20943,#ffffff }; void setup() { size(600,600); background(255); noLoop(); smooth(); } void draw() { background(255); for(int c = 0; c < colt.length; c++){ //色の乱数生成、小さい三角。ランダムの数値は色の種類の数 colt[c] = int(random(17)); } //0から600の間で、triangleCountの個数分ランダムに描く。実際はtranslateでランダムに移動させている for (int n = 0; n < triangleCount; n++) { noStroke(); fill(colarray[colt[n]]); tx = int(random(600)); ty = int(random(600)); sankakuR(); } } void sankakuR() { pushMatrix(); translate(tx,ty); //拡大縮小 scale(random(0.5,3.0)); //回転 rotate(radians(random(359))); triangle(29,36,11,62,43,56); popMatrix(); } void mousePressed() { redraw();// ボタンが押されたときだけ実行 }
Processingでコロナみたいなのを描く
ロマサガ3の死食(日食)っぽい?
こちらfrilly ring - OpenProcessing
でProcessing.jsのモードになってたので、P5モードかつマウスクリックでランダムに形が切り替わるようにしました(ので変数名変えてないです)。
参考にさせて頂きました。ありがとうございます。
あまりコード変わってないですが、P5でやりたい方のお役に立てば。
float r1,r2,radian; float nScale = 0.003; PVector nOffset1,nOffset2,v1,v2; void setup() { size(600, 600); background(255); noLoop(); } void draw() { background(0); nOffset1 = new PVector(random(10000), random(10000)); nOffset2 = new PVector(random(10000), random(10000)); translate(width / 2, height / 2); beginShape(QUAD_STRIP); stroke(255); fill(255); for(float angle = 0; angle <= 360; angle += 2) { radian = radians(angle); v1 = new PVector(100 * sin(radian) * nScale, 100 * cos(radian) * nScale); v2 = new PVector(300 * sin(radian) * nScale, 300 * cos(radian) * nScale); //サイズを小さくしたいときは、r1とr2の50,125のあたりをいじるとOK(元は100, 250) r1 = map(noise(v1.x + nOffset1.x, v1.y + nOffset1.y, 30 * 0.01), 0, 1, 50, 125); r2 = map(noise(v2.x + nOffset2.x, v2.y + nOffset2.y, 30 * 0.01), 0, 1, 50, 125); vertex(r1 * sin(radian), r1 * cos(radian)); vertex(r2 * sin(radian), r2 * cos(radian)); } endShape(); } void mousePressed() { redraw();// ボタンが押されたときだけ再描画 }
Processingで折れ線グラフみたいなのを描く
折れ線グラフ的なものが欲しかったので、作ってみました。
こちらneralt.com
を参照させて頂きました。
イメージ背景に使えそうですね。
こんな感じです。
三角形やらと組み合わせると、こんなのもできます。
color[] colarray = { #fdf4ac,#3de3d6,#b564c5,#f1709c,#ffbe8e,#413d79,#ffffff }; int graphx,graphy; void setup(){ size( 600, 600 ); background(255); smooth(); noLoop(); } void draw(){ background(255); beginShape(); for (graphx = 0; graphx < width; graphx+=20) { graphy = int(random(100,300)); noFill(); stroke(colarray[(int)random(7)]); strokeWeight(3); vertex(graphx,graphy); ellipse(graphx,graphy,5,5); ellipse(graphx,graphy,10,10); } endShape(); } void mousePressed() { redraw();// ボタンが押されたときだけ再描画 }
Processingで3Dの立方体に簡単にテクスチャをつける
本家ではvertexを使ってテクスチャを生成してますが、それテクスチャの形ごと作ってるだけやんと思い、もっと簡単な方法がないか調べてみました。
下記のサイトを参照させて頂きました。
OpenGLまで探してたので、単にboxでできることが分かってよかったです。
テクスチャを使う場合はfillは設定しないのがベターです。透過してヘンな色になります。
PImage img; PShape box; void setup(){ size(600, 600, P3D); smooth(); //テクスチャ img = loadImage("testpattern.png"); } void draw(){ background(0); pushMatrix(); translate(400,300,100); box = createShape(BOX, 100); box.setTexture(omg); //テクスチャ rotateX(map(mouseY, 0, width, -PI, PI)); rotateY(map(mouseX, 0, width, -PI, PI)); shape(box); popMatrix(); }