【p5js/プログラミング】サンショウウオ。

こんにちは、たやち（tayati369）です。

p5.jsでコーディングしています。
PCD@Tokyoさんの「デイリーコーディングチャレンジ」！！に素人極まりない私も参加しております。
毎日できるかわからないけれど、リモートワークのこのご時世、通勤分の時間があるでチャレンジしていきます。（デイリーとはｗ）

１１日目のテーマは「サンショウウオ」。

サンショウウオは自分の中ではなんとなく、イメージがあったのですが、明瞭にあったわけではないのでどんな顔してたかなーと思いネットで検索してみました。
するととても愛らしい、可愛い顔をしていたので、これをデフォルメして表現したいなと感じました。

前回のテーマ「黒」の際に、作成した模様をサンショウウオ本体のパターンに見立てて、のっぺりした顔を書いてみました。かわいい。。。😂

では、ごらんあれ〜。何枚か撮りましたが、↓がお気に入りの顔。

const noiseMax =1.4;
var xoff;
var yoff;
var zoff = 0;
var x1 = 0;
var y1 = 0;
var r;
var patterns = [];
var num = 30;

function setup(){
  createCanvas(500,500);
  for (var i = 0; i < num; i++) {
    patterns[i] = new Pattern;
  }
  noLoop();
}

function draw(){
  background('#CC9966');

  for (var i = 0; i < patterns.length; i++) {
    push();
    translate(random(0,width),random(0,height));
    patterns[i].show();
    pop();
  }

  p = new createVector(width/4,height/3);
  stroke(255);
  strokeWeight(3);
  fill(0);
  circle(p.x, p.y, 30);
  circle(3*p.x,p.y, 30);

  stroke('#CC3333');
  strokeWeight(10);
  noFill();
  beginShape();
  vertex(p.x,2*p.y);
  vertex(3*p.x-p.x,2.1*p.y);
  vertex(3*p.x,2*p.y);
  endShape()

  save('test.jpg');
}


class Pattern{
  show(){
    noStroke();
    fill(0);
    beginShape();
    for (var i = 0; i <= 360; i += 0.01) {
      xoff = map(cos(i),-1,1,0,noiseMax)
      yoff = map(sin(i),-1,1,0,noiseMax)
      r = map(noise(xoff,yoff,zoff),0,1,0,100)
      x1 = r  * cos(i);
      y1 = r  * sin(i);
      vertex(x1,y1);
    }
    endShape(CLOSE);
    zoff += 0.03;
  }
}