// const IMAGE_URL_2 = "https://www.clipartmax.com/png/middle/413-4139313_forest-tree-silhouette-forest-trees-silhouette-png.png"

// const IMAGE_URL = "https://avatars.githubusercontent.com/u/5019072?v=3";

const IMAGE_URL_2 = "https://static.wikia.nocookie.net/locoroco/images/9/9c/LocoRoco_Priffy.png";

​

const FRACTION_SIZE = 50;

const ORIGIN_CIRCLE_RADIUS = 10;

const PADDING = 70;

​

let repulsionChangeDistance = 100;

let pointSystem = null;

let targetImage = null;

let curtime= Infinity;

let targetImage2 = null;

​

​

let boolean = true;

// ==================================================

// PopCircle クラス

// ==================================================

class PopCircle {

  constructor(originPosition, originRadius, originColor) {

    this.position = originPosition.copy();

    this.origin = originPosition.copy();

    this.velocity = createVector(random(0, 50), random(0, 50));

    this.repulsion = random(1.0, 5.0);

        this.originRepulsion = random(0.01, 0.02);

        this.mouseRepulsion = 1;

    this.gravity = 0.1;

    this.radius = this.originRadius = originRadius;

    this.color = originColor;

  }

​

  updateState() {

    this._updateStateByMouse();

    this._updateStateByOrigin();

    this.velocity.add(accelerationX, -accelerationY);

    this.velocity.mult(0.95);

    this.position.add(this.velocity);

  }

​

  _updateStateByMouse() {

    const distanceX = mouseX - this.position.x;

    const distanceY = mouseY - this.position.y;

    const distance = mag(distanceX, distanceY);

    const pointCos = distanceX / distance;

    const pointSin = distanceY / distance;

    if (distance < repulsionChangeDistance) {

      this.gravity *= 0.6;

      this.mouseRepulsion = max(0, this.mouseRepulsion * 0.5 - 0.01);

      this.velocity.sub(pointCos * this.repulsion, pointSin * this.repulsion);

      this.velocity.mult(1 - this.mouseRepulsion);

    } else {

      this.gravity += (this.originRepulsion - this.gravity) * 0.1;

      this.mouseRepulsion = min(1, this.mouseRepulsion + 0.03);

    }

  }

  _updateStateByOrigin() {

    const distanceX = this.origin.x - this.position.x;

    const distanceY = this.origin.y - this.position.y;

    const distance = mag(distanceX, distanceY);

    this.velocity.add(distanceX * this.gravity, distanceY * this.gravity);

    this.radius = this.originRadius + distance / 16;

  }

  draw() {

    fill(this.color);

    ellipse(this.position.x, this.position.y, this.radius, this.radius);

  }

  flyout(){

    const distanceX = this.origin.x - this.position.x;

    const distanceY = this.origin.y - this.position.y;

    const distance = mag(distanceX, distanceY);

     this.velocity.add(distanceX * this.gravity*100, distanceY * this.gravity*100);

    this.radius = this.originRadius + distance / 16;

  }

//   clear(){

//     this.remove();

//   }

}

​

// ==================================================

// PopCircleSystem クラス

// ==================================================

class PopCircleSystem {

  constructor(image) {

    this.points = [];

     this.image = image;

    this._createParticles();

​

    // this.image = image;

    // print(this.image);

  }

  _getPixel(x, y) {

    const pixels = this.image.pixels;

    const idx = (y * this.image.width + x) * 4;

    if (x > this.image.width || x < 0 || y > this.image.height || y < 0) {

      return [0,0,0,0];

    }

    return [

        pixels[idx + 0],

        pixels[idx + 1],

        pixels[idx + 2],

        pixels[idx + 3]

    ];

  }

  _createParticles() {

    const iw = this.image.width;

    const ih = this.image.height;

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

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

        const imagePosition = createVector(int(i * iw / FRACTION_SIZE), int(j * ih / FRACTION_SIZE));

        imagePosition.add(round(random(-3, 3)), round(random(-3, 3)));

        let originPosition = imagePosition.copy();

        let originRadius = random(ORIGIN_CIRCLE_RADIUS - 3, ORIGIN_CIRCLE_RADIUS + 3);

        let originColor = this._getPixel(imagePosition.x, imagePosition.y);

        if (originColor[3] === 0) {

          continue;

        }

        originPosition.add(PADDING, PADDING);

        let point = new PopCircle(originPosition, originRadius, originColor);

        this.points.push(point);

      }

    }

  }

​

  updateState() {

    for (let point of this.points) {

      point.updateState();

    }

  }

​

  draw() {

    for (let point of this.points) {

      point.draw();

    }

  }

  flyout(){

    for (let point of this.points){

      point.flyout();

    }

  }

  remove(){

    for (let point of this.points){

      point.remove();

    }

  }

}

​

// ==================================================

// p5の関数

// ==================================================

function preload() {

  targetImage = loadImage(IMAGE_URL);

  targetImage2 = loadImage(IMAGE_URL_2);

  // song = loadSound('sound/SingingBowl.wav');

}

​

function setup() {

  const canvasWidth = targetImage.width + PADDING * 2;

  const canvasHeight = targetImage.height + PADDING * 2;

    targetImage.loadPixels();

    targetImage2.loadPixels();

  createCanvas(canvasWidth, canvasHeight);

  noStroke();

  frameRate(60);

  // print(targetImage);

  // print(targetImage2);

  pointSystem = new PopCircleSystem(targetImage);

}

​

​

function draw() {

  background(0);

  repulsionChangeDistance = max(0, repulsionChangeDistance - 1.5);

  pointSystem.updateState();

  pointSystem.draw();

  if (millis() > curtime+1500) {

       // song.play();

        erase();

​

        //pointSystem = new PopCircleSystem(targetImage2);

        if (boolean){

          pointSystem = new PopCircleSystem(targetImage2);

          boolean = false;}

        else{

          pointSystem = new PopCircleSystem(targetImage);

          boolean = true;

        }

        curtime = Infinity;

    }

}

​

function mouseMoved() {

  repulsionChangeDistance = 150;

}

​

​

​

function mouseClicked() {

  pointSystem.flyout();

  curtime = millis();

//   if (millis() > cur_time+2500) {

//         let targetImage = null;

//         targetImage = loadImage(IMAGE_URL_2);

//         targetImage.loadPixels();

//         pointSystem = new PopCircleSystem();

//     }

​

}