1225

Twitter:@dn0t_ GitHub:@ogrew

【週刊p5js】work06

var graphic = [];
var colorPalette = [["#9dab86","#e6a157","#eb8242","#c9753d"],
                    ["#f0cf85","#e7f0c3","#a4d4ae","#32afa9"],
                    ["#015668","#263f44","#ffd369","#fff1cf"],
                    ["#f67280","#c06c84","#6c5b7b","#35477d"],
                    ["#fbe3b9","#fab696","#0c9463","#2d334a"]
                  ];
var amount = 24;

var colorArray;

function setup() {
  createCanvas(800, 800, WEBGL);
  pixelDensity(2);
  angleMode(DEGREES); 
  textFont("Fredoka One");
  noLoop();
}

function draw() {
  clear();
  var l = colorPalette.length;
  var selectPalette = colorPalette[ (int)(random(0,l+1)) ];

  colorArray = shuffle(selectPalette);

  background(colorArray[0]);

  let rad = 360/amount;

  noStroke();
  for (let i = 0; i < amount; i++) {
    graphic[i] = createGraphics(width, height);
    graphic[i].textFont("Fredoka One");
    graphic[i].textAlign(CENTER);
    graphic[i].textSize(random(50,200));
    graphic[i].stroke(colorArray[1]);
    graphic[i].strokeWeight(5);
    graphic[i].smooth();
    let cd = color(colorArray[2]);
    cd.setAlpha(map(i, 0, amount, 155, 255));
    graphic[i].fill(cd);
    graphic[i].text(colorArray[2], width/2, height*4/5);

    push();
    translate(0, 0, i*10);
    rotateZ(-i*rad);
    texture(graphic[i]);
    plane(width-i*5, height-i*5);
    pop();
  }
}

f:id:taiga006:20200307154403j:plain

今週の作品メモ

  • 今週のモチベ「なんだがWEBGL×テキストで作りたいな。」
  • ただp5.jsでwebglいじる方法、全然知らんな。ー>いい感じのドキュメントが見当たらず。(自分で書け?)
  • 円柱を作ってその周りをテキストが螺旋状に巻き付いているようなイメージのものを作りたかったのだけれど、createGraphicsしたものからalphatext以外の部分を透過させる(通じるか?)的なのがどうもできず断念。(誰か助けて…)
  • それから今週の作品、とにかく重いです。
  • chromeredraw()3回とかフリーズします。NEORTもframeRate(1)とかでもすぐに処理止まります。やはりコードが悪いのか…。
  • 唯一の収穫は「あ、こういう作品でテキスト使いたいとき、カラーコードが一番それっぽく納まるし、著作権とか考えなくてよくて気分が楽だなあ」という点です。

今週の雑談

  • p5.js ver.1.0リリースノートの翻訳のお手伝いをしました。
  • 翻訳しながら「やっぱワールドワイド!規模感すごいなぁ」と感じる一方で、「いやいや、日本国内の活発さも負けたものではないなぁ」とも感じました。
  • 特に、#つぶやきProcessing 界隈の盛り上がりは今後どんどん盛り上がっていくことが目に見えている。(今週、ついにあの麦さんも#つぶやきProcessingされてて驚いた。)
  • あとP5LIVEとか初めて知った。p5.jsのやたらかっこいいオンラインエディタ?ちょっと使ってみたい。 f:id:taiga006:20200307160149p:plain (P5LIVE - Ted Davis のスクリーンショット

  • 今週は会社に新しいビルドマシンが設置されてまたJenkinsと格闘する日々でした。過去自分がなんとなくで書いたJenkinsの記事がこんなにも早く役立つとは!という感じです。ありがとう、自分。
  • 足のしびれがひどくて病院に行ったら「ヘルニアか坐骨神経痛か」となって明日MRIを受けに行ってきます。