// module aliases
var Engine = Matter.Engine,
    World = Matter.World,
    Bodies = Matter.Bodies,
    // Constraint = Matter.Constraint,
    Body = Matter.Body,
    Mouse = Matter.Mouse,
    MouseConstraint = Matter.MouseConstraint,
    Events = Matter.Events;

var engine;
var world;
var p = [];
var plinkos = [];
var cols = 11;
var rows = 10;
var bounds = [];
var mConstraint;
var bottomB;
var canvas;
var btn;


function setup(){
  colorMode(HSB);
  canvas = createCanvas(600,800);
  engine = Engine.create();
  world = engine.world;
  world.gravity.y = 2;
  newParticle(300,0);
  btn = select('#btn');
  btn.mousePressed(Movebottom);

  function collision(event){
    var pairs = event.pairs;
    for(let i = 0; i < pairs.length;i++){
      var bodyA = pairs[i].bodyA;
      var bodyB = pairs[i].bodyB;
      var idA = bodyA.id;
      var idB = bodyB.id;
      // console.log(idA)

      for(let i =0;i<plinkos.length;i++){
        if(plinkos[i].body.id == idA || plinkos[i].body.id ==idB){
          plinkos[i].changeColor();
          plinkos[i].shake();
          // console.log('change')
        }
      }
    }
  }

  Events.on(engine, 'collisionStart', collision);

// plinko 障礙物
  let spacewidth = width / cols;
  for(let i = 0; i < rows; i++){
    for(let j = 0; j < cols+1; j++){
      let x = j * spacewidth;
      if( i % 2 ==0){
        x += spacewidth / 2
      }

      let y = spacewidth+ i*spacewidth
      let plinkoR = random(4,16);
      let plinko = new Plinko(x,y,plinkoR)
      plinkos.push(plinko)
    }
  }

  // 底下的bucket
  bottomB = new Boundry(width/2,height+50,width,100)
  bounds.push(bottomB)

  for(let i = 0; i< cols + 1 ; i++){
    let w = 4
    let h = 100
    let x = i * spacewidth
    let y = height -  h / 2
    let bucket = new Boundry(x,y,w,h)
    bounds.push(bucket);
  }

  var canvasmouse = Mouse.create(canvas.elt);
  canvasmouse.pixelRatio = pixelDensity();
  // pixelDensity 是p5內建偵測pixelRatio的函式
  // console.log(canvasmouse);
  var options = {
    mouse: canvasmouse
  }

  mConstraint = MouseConstraint.create(engine,options);
  World.add(world, mConstraint);
  console.log(mConstraint)

}

function Movebottom(){
  if(p.length!=0){
    Body.setPosition(bottomB.body,{x:300,y:1000})
    btn.html('Plinko')
    // alert('clean the balls')
  }else{
    btn.html('Clean Balls')
    Body.setPosition(bottomB.body,{x:300,y:850})
  }
}

function mousePressed(){
  newParticle(mouseX,mouseY);
}


function newParticle(_x,_y){
  let pA = new Particle(_x,_y,12)
  // console.log(pA.body)
  p.push(pA)

}

function draw(){
  background(0,0,0);
  // console.log(frameRate())
  Engine.update(engine, 1000/60);


  // if(frameCount % 60 ==0){
  //   newParticle();
  // }
  for(let i=0;i<p.length;i++){
    p[i].show();
    if(p[i].isOffScreen()){
      World.remove(world, p[i].body)
      p.splice(i,1);
      i--;
    }
  }


  for(let i=0;i<plinkos.length;i++){
    plinkos[i].show();
  }

  for(let i=0;i<bounds.length;i++){
    bounds[i].show();
  }

  if(mConstraint.body){
    let pos = mConstraint.body.position;
    let offset = mConstraint.constraint.pointB;
    let m = mConstraint.mouse.position;
    // console.log(mConstraint.body)
    stroke(180,255,255);
    line(pos.x+ offset.x ,pos.y+ offset.y,m.x,m.y);
  }

}

function Plinko(x,y,r){

  options = {
    isStatic: true,
    restitution: 1,
    friction: 0
  }
  this.body = Bodies.circle(x,y,r,options);
  this.r = r;
  this.hue = 0;
  this.sat = 0;
  this.bright = 0;
  this.offset = 0;
  this.body.label = 'plinko';
  World.add(world, this.body);
}

Plinko.prototype.show = function(){

  let pos = this.body.position;
  fill(this.hue,this.sat,this.bright);
  stroke(255);
  push();
  translate(pos.x,pos.y);
  ellipse(0+this.offset,0+this.offset,this.r*2);
  pop();

}

Plinko.prototype.shake = function(){
  this.offset = random(-3,3)
}

Plinko.prototype.changeColor = function(){
  this.hue = random(360);
  this.sat = 255;
  this.bright = 100;

}


function Particle(x,y,r){
  this.hue = random(360);
  options = {
    restitution: 0.6,
    friction: 0
  }
  x += random(1,-1)
  this.body = Bodies.circle(x,y,r,options);
  this.r = r;
  this.body.label = 'particle';
  World.add(world, this.body);
}

Particle.prototype.isOffScreen = function(){
  let x = this.body.position.x;
  let y = this.body.position.y;
  return(x > width + 50 || x < -50 || y > height)
}

Particle.prototype.show = function(){

  let pos = this.body.position;
  fill(this.hue,255,255);
  noStroke();
  push();
  translate(pos.x,pos.y);
  ellipse(0,0,this.r*2);
  pop();

}


function Boundry(x,y,w,h){
  options = {
    isStatic: true,
    friction: 0
  }
  this.w = w
  this.h = h
  this.body = Bodies.rectangle(x,y,w,h,options);
  World.add(world, this.body);
}

Boundry.prototype.show = function(){

  let pos = this.body.position;
  fill(255);
  stroke(255);
  push();
  rectMode(CENTER);
  translate(pos.x,pos.y);
  rect(0,0,this.w,this.h);
  pop();

}