ブラウゲームズ

p5.jsの練習。万華鏡を作った。

三角形にクリッピングする方法が見つからず、正方形の万華鏡になってしまったが。

 

 

次の７枚の画像を順番に表示。縦横300px。

　

　

　

 

サンプルコード

      
var photo;
var photos = [];
var cnt = 0;
var num = 0;


  function setup() {
    var mycanvas = createCanvas(500, 500);
    mycanvas.parent('app2');
    colorMode(RGB, 255);
    background(255);

    //初期化
    photos[1] = loadImage("./images/img00002.jpg");
    photos[0] = loadImage("./images/img00001.jpg");
    photos[2] = loadImage("./images/img00003.jpg");
    photos[3] = loadImage("./images/img00004.jpg");
    photos[4] = loadImage("./images/img00005.jpg");
    photos[5] = loadImage("./images/img00006.jpg");
    photos[6] = loadImage("./images/img00007.jpg");
    photo = photos[0];

    frameRate(20);
  }

  function draw() {

    if ( cnt < 294 ) {
      cnt++;
      
    } else {
      cnt = 0;
      if( num < 6 ) {
        num++;
      } else {
        num = 0;
      }
      photo = photos[num];
    }

    push();
    translate(250,100);
    rotate(radians(45));
    mirror();
    pop();

    push();
    translate(108,-42);
    rotate(radians(45));
    mirror();
    pop();

    push();
    translate(108, 242);
    rotate(radians(45));
    mirror();
    pop();

    push();
    translate(392,-42);
    rotate(radians(45));
    mirror();
    pop();

    push();
    translate(392,242);
    rotate(radians(45));
    mirror();
    pop();

  }


  function mirror() {
    
    image(photo, cnt, cnt, 100, 100, 0, 0, 100, 100);

    applyMatrix(-1,0,0,1,200,0);
    image(photo, cnt, cnt, 100, 100, 0, 0, 100, 100);

    applyMatrix(1,0,0,-1,0,200);
    image(photo, cnt, cnt, 100, 100, 0, 0, 100, 100);

    applyMatrix(-1,0,0,1,200,0);
    image(photo, cnt, cnt, 100, 100, 0, 0, 100, 100);
  }

      
    

 

プチゲームトップへもどる