だらっと学習帳

Processingとか p5.jsとか 好きです

この前、こんな記事↓を書きました。
[Processing] vertexで作った図形の線はP2D指定で複数の色が使えるらしい : だらっと学習帳
読み返していて気がついたんですが、これってもしやstrokeWeightも変更できるのでは…？
というわけで試してみました。
pict
int vertexNum = 5*2;

int r;

int rOut = 150;

int rIn = rOut/2;



void setup() {

  size(400, 400, P2D);

  background(255);

  colorMode(HSB, 360, 100, 100);

  noStroke();

  noLoop();

  noFill();

}



void draw() {

  background(360);



  pushMatrix();

  translate(width/2, height/2);

  rotate(radians(-90));

  beginShape();

  for (int i = 0; i < vertexNum; i++) {

    if (i%2 == 0) {

      r = rOut;

      stroke(180, 50, 100);

      strokeWeight(30);

    } else {

      r = rIn;

      stroke(300, 50, 100);

      strokeWeight(1);

    }

    vertex(r*cos(radians(360*i/vertexNum)), r*sin(radians(360*i/vertexNum)));

  }

  endShape(CLOSE);

  popMatrix();

}

できてる、strokeWeightも変更できてるぞ！
P2D、器用ですね。

こんなこともできちゃいます。幅が広がりますねー。
コードは以下より引用、改造。
Processing で描ける図形まとめ - Qiita
pict
int petal_num = 5; //花びらの数

int oR = 200; //大きさ調整用



void setup() {

  size(400, 400, P2D);

  background(255);

  strokeJoin(ROUND);

}



void draw() {

  background(255);



  //中心線

  strokeWeight(1);

  stroke(200);

  line(width/2, 0, width/2, height);

  line(0, height/2, width, height/2);



  //桜

  noFill();

  strokeWeight(2);

  stroke(200, 0, 0);



  pushMatrix();

  translate(width/2, height/2);

  rotate(radians(90));

  beginShape();

  for (int theta = 0; theta < 360; theta++) {

    float A = petal_num / PI * radians(theta);

    int md = floor(A) % 2;

    float r = pow(-1, md) * (A - floor(A)) + md;

    float R = r + 2 * calcH(r);



    float x = oR * R * cos(radians(theta));

    float y = oR * R * sin(radians(theta));



    strokeWeight(20 * abs(sin(radians(theta*5))));

    vertex(x, y);

  }

  endShape(CLOSE);

  popMatrix();

}



float calcH(float x) {

  if (x < 0.8) {

    return 0;

  } else {

    return 0.8 - x;

  }

}
調整すればリボンみたいにもできちゃいます。
pict
int R = 20; //曲線の大きさ調整用

int vertex_num = 8; //とげの数



void setup() {

  size(400, 400, P2D);

  background(255);



  vertex_num -= 1; //とげの数を調整

}



void draw() {

  background(255);



  //中心線

  strokeWeight(1);

  stroke(200);

  line(width/2, 0, width/2, height);

  line(0, height/2, width, height/2);



  //アステロイド曲線

  noFill();

  strokeWeight(2);

  stroke(200, 0, 0);

  strokeJoin(ROUND);



  pushMatrix();

  translate(width / 2, height / 2);

  beginShape();

  for (int theta = 0; theta < 360; theta++) {

    strokeWeight(10 * abs(sin(radians(theta*11))));

    float x = R * (vertex_num * cos(radians(theta)) + cos(radians(-vertex_num * theta)));

    float y = R * (vertex_num * sin(radians(theta)) + sin(radians(-vertex_num * theta)));



    vertex(x, y);

  }

  endShape();

  popMatrix();

}

1つのwebページ内に複数のp5.js製スケッチを並べたいとします。そういうことたまにありますよね。ね？
instance modeでスケッチを生成するとして、生成する際にそれぞれのスケッチに別のデータを渡したいケースについて書きます。

例えば、データビジュアライズのためのスケッチを複数並べて、
それぞれの参照データは異なるものにしたい、というケースです。
参照したいデータが単純ならば良いのですが、取得や成形に手がかかる場合、
p5.jsスケッチとして描画する前によしなに手を加えておいて、
あとは加工済データのみ渡してあげた方がスクリプト的に優しい感じがします。

というわけで、1ページ内に3つのスケッチを生成してそれぞれに5つのデータが入った配列を渡し、
棒グラフとして表示する例を書いてみました。
ついでに、グラフの色もスケッチごとに変えてみました。

See the Pen p5_graph by reona396 (@reona396) on CodePen.



今回はサンプルなのでデータについては最初から配列で持っちゃってますが、
例えばAPI叩いてjsonを…とか、特定の期間だけ抜き出して…とか一手間加わる時もあると思うので、
そういう時はp5スケッチ外で作業してから渡してあげるのが良さそうかなと思います。

参考URL :
p5.js - Passing in extra argument to new p5 instance - Stack Overflow

p5.jsでネオン看板っぽいものを描く : だらっと学習帳

この前、↑こういう記事を書きました。
これを読み返してて、テキストじゃなくてsvg画像を使えばイラストでネオン看板っぽいものが描けるのではないかなーと思い、
さっそく試してみました。

svg画像は以下のフリー素材サイトからお借りしました。
アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト
本記事で利用しているsvg画像・png画像は全て「icooon-mono」から用意しています。

上記素材サイトから、以下のような画像を用意しました。
なお、下に掲載している画像自体はpngですが、実際にはsvgをダウンロードして利用します。
ハンバーガーの無料アイコン7

svg画像を扱うのでp5.jsからProcessingにバトンタッチします。
シンプルにsvg画像を表示するだけならこんな感じです。
display
PShape shape;



void setup() {

  size(400, 400);

  

  shape = loadShape("./images/hamburger.svg");

  shape.disableStyle();

  shapeMode(CENTER);

}



void draw() {

  background(0);



  fill(150, 0, 0);

  shape(shape, width/2, height/2, 300, 300);

}

これを前回の記事をふまえてネオンっぽく描いてみます。
hamburger_neon
PShape shape;



void setup() {

  size(400, 400);

  colorMode(HSB, 360, 100, 100);



  shape = loadShape("./images/hamburger.svg");

  shape.disableStyle();

  shapeMode(CENTER);

  strokeJoin(ROUND);

}



void draw() {

  background(0);



  blendMode(SCREEN);

  for (int i = 1; i < 50; ++i) {

    strokeWeight(i);

    stroke(

      i, 

      80, 

      map(i, 1, 50, 15, 1), 

      100

      );



    noFill();

    shape(shape, width/2, height/2, 300, 300);

  }

}
良い感じにネオン感出てますね！
矢印と点滅をあわせてgifアニメにしたらこれはもうアメリカのハンバーガーレストランの看板ですね！
あれですよ、古いモーテルの居抜き物件で営業してる、幹線道路沿いの、駐車場収容台数が自慢の店ですよ……Webp.net-gifmaker

以下の画像のような、塗りつぶしではなく枠線で表現されているアイコンは、
fillも合わせて表現するとしっくりきて良い感じになりました。
ピザの無料イラスト6
↓
pizza
PShape shape;



void setup() {

  size(400, 400);

  colorMode(HSB, 360, 100, 100);

  

  shape = loadShape("./images/pizza.svg");

  shape.disableStyle();

  shapeMode(CENTER);

  strokeJoin(ROUND);

}



void draw() {

  background(0);



  blendMode(SCREEN);

  for (int i = 1; i < 50; ++i) {

    strokeWeight(i*0.7);

    stroke(

      map(i, 1, 50, 0, 80), 

      80, 

      map(i, 1, 50, 15, 1), 

      100

      );



    fill(map(i, 1, 50, 360, 1) , 10);

    shape(shape, width/2, height/2, 300, 300);

  }

}
これはもうホントに、アメリカンなピザ屋さんのネオン看板ですね！

アメリカンな要素を並べるととにかくしっくりきます。
Vaporwave感が出るのもお気に入りです。
面白いのでぜひやってみてください。
neon

↑このページのトップヘ