// I'd like to change the background color depends on the position and plus gradient

​

​

var Engine = Matter.Engine;

var Render = Matter.Render;

var World = Matter.World;

var Body = Matter.Body;

var Bodies = Matter.Bodies;

var Composite = Matter.Composite;

var MouseConstraint = Matter.MouseConstraint;

var Mouse = Matter.Mouse;

​

var engine;

var world;

var bodies;

var fr = 30;

​

var mConstraint;

​

var circles;

let img;

​

let font

​

function preload() {

  //img = loadImage("Tile.png");

  font = loadFont("Raleway-Black.ttf")

}

​

​

function createOurImage() {

  let txt = "M"

  img = createGraphics(width, height)

  img.background('red')

  img.textFont(font)

  img.fill("white")

  img.noStroke()

  img.pixelDensity(1)

  img.scale(2)

  img.textSize(400)

  img.textAlign(CENTER, CENTER)

  img.text(txt, width/4, height/5)

  img.loadPixels()

}

​

function setup() {

  var canvas = createCanvas(800, 800);

  frameRate(fr);

    // Define colors

  // b1 = color(255);

  // b2 = color(0);

  // c1 = color(204, 102, 0);

  // c2 = color(0, 102, 153);

  createOurImage()

  circles = [];

​

  ground = Bodies.rectangle(0, 538, 1080, 2, {

    isStatic: true

  });

  //  console.log(img.width);

  // console.log(img.height);

  // console.log("pixels", img.pixels.length);

  // console.log(density)

  // adding engine

  engine = Engine.create();

  world = engine.world;

  // World.add(engine.world, [ground]);

​

​

  // var canvasmouse = Mouse.create(canvas.elt);

  // canvasmouse.pixelRatio = pixelDensity();

  // options2 = {

  // mouse: canvasmouse

  // }

  // mConstraint = MouseConstraint.create(engine, options2);

  // World.add(world, mConstraint);

    var canvasmouse = Mouse.create(canvas.elt);

  canvasmouse.pixelRatio = pixelDensity();

  var options = {

    mouse: canvasmouse

  }

  mConstraint = MouseConstraint.create(engine, options);

  World.add(engine.world, mConstraint);

}

​

let finished = false

​

function keyPressed() {

  txt = key

}

​

function draw() {

    let y1 = map(mouseY, 0, 540, -2, 1)

  world.gravity.y = y1

  let colorA = color('#FFECCF')

  let colorB = color('#5A31A1')

  let clrValue = map(mouseY, 0, 540, 0, 1)

  let clr = lerpColor(colorA, colorB, clrValue)

  background(clr);

  Engine.update(engine)

​

  var total = 500;

  var count = 0;

  var attempts = 0;

​

  while (!finished && count < total) {

    var newC = newCircle();

    if (newC !== null) {

      circles.push(newC);

      count++;

    }

    attempts++;

    if (attempts > 1000) {

      //noLoop();

      // console.log("finished");

      finished = true

      for (var i = 0; i < circles.length; i++) {

        circles[i].createBody()

      }

      //break;

    }

  }

​

  if (!finished) {

  for (var i = 0; i < circles.length; i++) {

    var circle = circles[i];

​

    if (circle.growing) {

      if (circle.edges()) {

        circle.growing = false;

      } else {

        for (var j = 0; j < circles.length; j++) {

          var other = circles[j];

          if (circle !== other) {

            var d = dist(circle.x, circle.y, other.x, other.y);

            var distance = circle.r + other.r;

​

            if (d - 1 < distance) {

              circle.growing = false;

              break;

            }

          }

        }

      }

    }

​

    circle.show();

    circle.grow();

  }

  } else {

    for (var i = 0; i < circles.length; i++) {

      var circle = circles[i];

      circle.show()

    }

  }

  //image(img, 0, 0)

}

​

function newCircle() {

  var x = random(0, img.width);

  var y = random(0, img.height);

​

  var valid = true;

  for (var i = 0; i < circles.length; i++) {

    var circle = circles[i];

    var d = dist(x, y, circle.x, circle.y);

    if (d - 4 < circle.r - 0.01) {

      valid = false;

      break;

    }

  }

  if (valid) {

    var index = (int(x) + int(y) * img.width) * 4;

    var r = img.pixels[index];

    var g = img.pixels[index+1];

    var b = img.pixels[index+2];

    var c = color(r,g,b);

    // console.log(c)

    return new Circle(x, y, color(c));

  } else {

    return null;

  }

}