【p5js/プログラミング】研究所。

Art

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

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

９日目のテーマは「研究所」。

研究といえば、マウス。たくさんのマウスが逃げだしたようなイメージを表現しています。
実際にマウスをp5.js で表現するのは、かなり手こずりました。。。しかも、現状ロジカルに形作れているわけではなく。。感覚的な図形の配置から１匹のマウスを作り出しています。

これをもう少しロジカルに作れる案があれば教えて下さい。。Twitterとかにご連絡いただけると嬉しいです！！

では、ごらんあれ〜。

var x = 0;
var y = 0;
var r = 50;
var num = 6.3;
var vnum =2;
var x2;
var y2;
var px;
var py;
let mouses = [];

function setup(){
  createCanvas(500,500);
  background(255);
  frameRate(3);
  for (var i = 0; i < vnum; i++) {
    mouses[i] = new Mouse;
  }
 // noLoop();
 }

 function draw(){
   // push();
   translate(random(-width/2,width/2),random(-height/2,height/2));
   for (var i = 0; i < vnum; i++) {
     mouses[i].show();
   }
   // pop();
 }


class  Mouse {
  show() {
    var w = width/2;
    var h = height/2;
    push();
    fill(190);
    noStroke();
    beginShape();
    for (var i = 0; i < num; i+= 0.1) {
      if (i < num/2) {
        x = w +  2  * r * cos(-i);
        y = h + 1.5 * r * sin(-i);
        vertex(x,y);
      } else {
        x = w +  2 * r * cos(-i);
        y = h +      r  *sin(-i);
        vertex(x,y);
      }
    }
    endShape(CLOSE);

    pop();
    fill(0);
    circle(x ,y, r/2);
    line(x - 2*width/5, y, 120, 230);
    for (var i = 0; i < 3; i++) {
      strokeWeight(1);
      line(x,y,x -30 ,y + i*8);
      line(x,y,x +30 ,y - i*8);
    }

    noFill();
    push();
    translate(-50,-20);
    fill(0);
    beginShape();
    for (var i = 0; i < num; i+= 0.1) {
      x = x  + cos(-i)/2;
      y = y  + 1.2*sin(-i);
      vertex(x,y);
    }
    endShape(CLOSE);
    pop();

    push();
    translate(-25,-20);
    fill(0);
    beginShape();
    for (var i = 0; i < 6.3; i+= 0.1) {
      x = x  + cos(-i)/2;
      y = y  + 1.2*sin(-i);
      vertex(x,y);
    }
    endShape(CLOSE);
    pop();

    push();
    translate(-90,-40);
    noStroke();
    fill(200);
    beginShape();
    for (var i = 0; i < 6.3; i+= 0.1) {
      x = x  + 2*cos(-i);
      y = y  + 2.3*sin(-i);
      vertex(x,y);
    }
    endShape(CLOSE);
    pop();

    push();
    translate(-50,-50);
    noStroke();
    fill(180);
    beginShape();
    for (var i = 0; i < 6.3; i+= 0.1) {
      x = x  + 1.5*cos(-i);
      y = y  + 2*sin(-i);
      vertex(x,y);
    }
    endShape(CLOSE);
    pop();
  }
}

ではでは、さようなら〜〜〜。

なにかあればTwitterまで。

コメント