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();
}
Processingで作った画像をPNGとPDFで書き出す
よく忘れてしまうのでメモです。
redraw(); を使っている場合はredraw();を書いた箇所によってはエラーになったり、何も描画されてないことになったりするので注意です。
こちらprince9.hatenablog.com
のコードでできた画像をPDF書き出ししてみました。
PDFで書き出すと、イラレで編集ができます。
SVGはredraw(); を使うとあまり上手くいかないみたいです。
スペースキーで書き出しができます。
//PDF書き出し用ライブラリ
import processing.pdf.*;
int count;//ファイル名用変数
//最大個数分、または色のパターンの数配列を用意する
int[] col2 = new int[25];//大さい三角パーツ
//大きい三角の位置
int triPx2;
//大きい三角形の数
int triPcount2;
//色のパターン
int pt2col;
//基本の三角形の大きさ
int mosaicSacle;
//色の種類ぶんだけ配列をつくる
color[] colarray =
{
#ed621c,#e81c44,#abcf2d,#5fb734,#874195,#01449d,#45bcca,#f6c620,#898989,#ffffff
};
void setup() {
size(600,600);
noLoop();
//基本の三角形の大きさ
mosaicSacle = 20;
}
void draw() {
background(255);
for(int c2 = 0; c2 < col2.length; c2++){
//色の乱数生成、大きい三角。ランダムの数値は色の種類の数
col2[c2] = int(random(10));
}
//三角パーツ大
triBig();
}
void mousePressed() {
beginRecord(PDF,"pattern"+count+".pdf");
redraw();// ボタンが押されたときだけ再描画
}
//スペースキーでPDFとPNG書き出し
void keyPressed() {
if ( key == ' ' ) {
save("pattern"+count+".png");
count++;
endRecord();
}
if (key == 'q'){
exit();
}
}
//図形の数や位置を設定
void triBig() {
//三角形の数
triPcount2 = int(random(1,6));
//ランダムに算出された数ぶんだけ三角を描写
for (int i2 = 0; i2 < triPcount2; i2++) {
//これで1色ずつ色を変える(重複あり)
for (pt2col = 0; pt2col < triPcount2; pt2col++) {
//三角形の位置をランダムに
triPx2 = int(random(1,15))*40;
//三角形描写
triBigpt();
}
}
}
//実際の図形の設定
void triBigpt() {
pushMatrix();
translate(triPx2,300);
noStroke();
fill(colarray[col2[pt2col]]);
triangle(mosaicSacle/2, mosaicSacle/2, 0, mosaicSacle, mosaicSacle, mosaicSacle);
fill(colarray[col2[pt2col+1]]);
triangle(mosaicSacle, 0, mosaicSacle/2,mosaicSacle/2 , mosaicSacle, mosaicSacle);
fill(colarray[col2[pt2col+2]]);
triangle(mosaicSacle, 0, mosaicSacle+10, mosaicSacle/2, mosaicSacle, mosaicSacle);
fill(colarray[col2[pt2col+3]]);
triangle(mosaicSacle+10,mosaicSacle/2,mosaicSacle,mosaicSacle,mosaicSacle*2,mosaicSacle);
popMatrix();
}
Processingでランダムな個数、かつ特定の色の中からランダムな色で描く
図形をランダムな個数生成して、色もランダムにしたい場合です。
色は特定の色からランダムに選ばれるので、多少の重複はあります。
まずはこんな感じで1つのパーツにつき1色の場合。
//最大個数分、または色のパターンの数配列を用意する
int[] col1 = new int[36];//小さい三角パーツ
//小さい三角の位置
int triPx;
//小さい三角形の数
int triPcount1;
//基本の三角形の大きさ
int mosaicSacle;
//色の種類ぶんだけ配列をつくる
color[] colarray =
{
#ed621c,#e81c44,#abcf2d,#5fb734,#874195,#01449d,#45bcca,#f6c620,#898989,#ffffff
};
void setup() {
size(600,600);
noLoop();
//基本の三角形の大きさ
mosaicSacle = 20;
}
void draw() {
background(255);
//色の種類ぶんランダムな数値をつくる
for(int c = 0; c < col1.length; c++){
//色の乱数生成、小さい三角。ランダムの数値は色の種類の数
col1[c] = int(random(10));
}
//三角パーツ
triMini();
}
void mousePressed() {
redraw();// ボタンが押されたときだけ実行
}
void triMini() {
//三角形の数
triPcount1 = int(random(1,6));
//ランダムに算出された数ぶんだけ三角を描写
for (int i = 0; i < triPcount1; i++) {
//これで1色ずつ色を変える(重複あり)
for (int pt1col = 0; pt1col < triPcount1; pt1col++) {
fill(colarray[col1[pt1col]]);
//三角形の位置をランダムに
triPx = int(random(1,30))*20;
//三角形描写
triP1();
}
}
}
void triP1() {
pushMatrix();
//ランダムに移動させる
translate(triPx,100);
noStroke();
//三角形
triangle(0, 0,mosaicSacle/2, mosaicSacle/2, mosaicSacle, 0);
popMatrix();
}
次に、下記のように1つの図形が複数のパーツで構成されている場合。
//最大個数分、または色のパターンの数配列を用意する
int[] col2 = new int[25];//大さい三角パーツ
//大きい三角の位置
int triPx2;
//大きい三角形の数
int triPcount2;
//色のパターン
int pt2col;
//基本の三角形の大きさ
int mosaicSacle;
//色の種類ぶんだけ配列をつくる
color[] colarray =
{
#ed621c,#e81c44,#abcf2d,#5fb734,#874195,#01449d,#45bcca,#f6c620,#898989,#ffffff
};
void setup() {
size(600,600);
noLoop();
//基本の三角形の大きさ
mosaicSacle = 20;
}
void draw() {
background(255);
for(int c2 = 0; c2 < col2.length; c2++){
//色の乱数生成、大きい三角。ランダムの数値は色の種類の数
col2[c2] = int(random(10));
}
//三角パーツ大
triBig();
}
void mousePressed() {
redraw();// ボタンが押されたときだけ再描画
}
//図形の数や位置を設定
void triBig() {
//三角形の数
triPcount2 = int(random(1,6));
//ランダムに算出された数ぶんだけ三角を描写
for (int i2 = 0; i2 < triPcount2; i2++) {
//これで1色ずつ色を変える(重複あり)
for (pt2col = 0; pt2col < triPcount2; pt2col++) {
//三角形の位置をランダムに
triPx2 = int(random(1,15))*40;
//三角形描写
triBigpt();
}
}
}
//実際の図形の設定
void triBigpt() {
pushMatrix();
translate(triPx2,300);
noStroke();
fill(colarray[col2[pt2col]]);
triangle(mosaicSacle/2, mosaicSacle/2, 0, mosaicSacle, mosaicSacle, mosaicSacle);
fill(colarray[col2[pt2col+1]]);
triangle(mosaicSacle, 0, mosaicSacle/2,mosaicSacle/2 , mosaicSacle, mosaicSacle);
fill(colarray[col2[pt2col+2]]);
triangle(mosaicSacle, 0, mosaicSacle+10, mosaicSacle/2, mosaicSacle, mosaicSacle);
fill(colarray[col2[pt2col+3]]);
triangle(mosaicSacle+10,mosaicSacle/2,mosaicSacle,mosaicSacle,mosaicSacle*2,mosaicSacle);
popMatrix();
}
上記のものとこちらの「ランダムに図形を描く」
prince9.hatenablog.com
を組み合わせると、こんな感じのものもできます。コードは複雑すぎるのでまたの機会に。
