210105a

let rectangles;

let cells, offset, margin, d;

let ns = 400;

let img;

​

function preload() {

  img = loadImage("https://loremflickr.com/800/800");

}

​

function setup() {

  createCanvas(800, 800, WEBGL);

  colorMode(HSB, 360, 100, 100, 100);

  angleMode(DEGREES);

​

  ortho(-width / 2, width / 2, -height / 2, height / 2, -1000, 1000);

​

  init();

}

​

function init() {

  rectangles = [];

  cells = 10; //int(random(5,12));

  offset = width / 15;

  margin = 0;

  d = (width - offset * 2 - margin * (cells - 1)) / cells;

  for (let j = 0; j < cells; j++) {

    for (let i = 0; i < cells; i++) {

      let x = offset + i * (d + margin);

      let y = offset + j * (d + margin);

      let img_trim = img.get(x, y, d, d);

      let rectangle = new Rect(x, y, d, img_trim);

      rectangles.push(rectangle);

    }

  }

}

​

function draw() {

  background(0, 0, 0);

​

  orbitControl();

  push();

  translate(-width / 2, -height / 2, 0);

  for (let rectangle of rectangles) {

    rectangle.update();

    rectangle.display();

  }

  pop();

​

  // noLoop();

}

​

class Rect {

  constructor(x, y, d, img) {

    this.pos = createVector(x, y);

    this.d = d;

    this.img = img.get();

    this.ns = 800;

    this.points = [];

  }

  update() {

    let p1 = this.createNoiseVector(this.pos.x, this.pos.y, this.d, this.ns);

    let p2 = this.createNoiseVector(this.pos.x + this.d, this.pos.y, this.d, this.ns);

    let p3 = this.createNoiseVector(this.pos.x + this.d, this.pos.y + this.d, this.d, this.ns);

    let p4 = this.createNoiseVector(this.pos.x, this.pos.y + this.d, this.d, this.ns);

    this.points = [p1, p2, p3, p4];

  }

  createNoiseVector(x, y, dMax, ns) {

    let p = createVector(x, y);

    let angle = noise(x / ns, y / ns, frameCount / ns / 5) * 360;

    let mag = dMax * noise(x + frameCount / 100, y + frameCount / 100, frameCount / 100);

    let vel = p5.Vector.fromAngle(angle).mult(mag);

    p.add(vel);

    let z = sin(angle * 5 + frameCount) * 100;

    p.z = z;

    return p;

  }

  display() {

    push();

    noFill();

    // strokeWeight(10);

    // beginShape();

    // vertex(this.points[0].x, this.points[0].y, this.points[0].z);

    // vertex(this.points[1].x, this.points[1].y, this.points[1].z);

    // vertex(this.points[2].x, this.points[2].y, this.points[2].z);

    // vertex(this.points[3].x, this.points[3].y, this.points[3].z);

    // endShape();

​

    texture(this.img);

    // rect(0, 0, this.d, this.d);

    beginShape();

    vertex(this.points[0].x, this.points[0].y, this.points[0].z, 0, 0);

    vertex(this.points[1].x, this.points[1].y, this.points[1].z, this.img.width, 0);

    vertex(this.points[2].x, this.points[2].y, this.points[2].z, this.img.width, this.img.height);

    vertex(this.points[3].x, this.points[3].y, this.points[3].z, 0, this.img.height);

    endShape();

    pop();

​

  }

}