body {
  
     background: 0% 0% / contain rgb(8 8 8);
  margin: 0;
}

var Engine = Matter.Engine,
    Render = Matter.Render,
    Events = Matter.Events,
    MouseConstraint = Matter.MouseConstraint,
    Mouse = Matter.Mouse,
    World = Matter.World,
    Bodies = Matter.Bodies;

// create an engine
var engine = Engine.create(),
    world = engine.world;

// create a renderer
var render = Render.create({
    element: document.body,
    engine: engine,
    options: {
      width: window.innerWidth,
      height: window.innerHeight,
      pixelRatio: 2,
      background: '#000000',
      wireframes: false,
    }
});


// create bounds
var ground = Bodies.rectangle(
  (window.innerWidth / 2) + 160, window.innerHeight + 80, window.innerWidth + 320, 160,{render: { fillStyle: '#080808'}, isStatic: true });
var wallLeft = Bodies.rectangle( -80, window.innerHeight / 2, 160,   window.innerHeight, { isStatic: true });
var wallRight = Bodies.rectangle(window.innerWidth + 80, window.innerHeight / 2, 160, 1200, { isStatic: true })
var roof = Bodies.rectangle(
  (window.innerWidth / 2) + 160, -80, window.innerWidth + 320, 160, { isStatic: true })

// object colors & variables
var arts = "#EDDC8C"
var videos = "#B3E8F3"
var abouts = '#4D4D4D'

var border = 2
var radius = 20

// create objects

// art & design
var illustration = Bodies.rectangle(70, 500, 133, 40, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://static.tildacdn.com/tild3235-3730-4362-b639-396139303362/Group_271.png', xScale: 0.5, yScale: 0.5 }}})
var art = Bodies.rectangle(35, 460, 56, 40, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://static.tildacdn.com/tild3538-6532-4263-b466-626239336437/Group_272.png', xScale: 0.5, yScale: 0.5 }}})
var threeD = Bodies.rectangle(90, 460, 52, 40, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://static.tildacdn.com/tild3831-6666-4633-b565-626533363062/Group_273.png', xScale: 0.5, yScale: 0.5 }}})
var graphic = Bodies.rectangle(60, 420, 105, 40, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://static.tildacdn.com/tild3365-6431-4162-a139-633338653865/Group_274.png', xScale: 0.5, yScale: 0.5 }}})
var photo = Bodies.rectangle(50, 380, 86, 40, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://static.tildacdn.com/tild3661-3835-4630-b462-323763393262/Group_277.png', xScale: 0.5, yScale: 0.5 }}})
// video
var documentary = Bodies.rectangle(220, 540, 165, 40, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://static.tildacdn.com/tild6331-6239-4166-b835-623861336665/Group_276.png', xScale: 0.5, yScale: 0.5 }}})
var animation = Bodies.rectangle(200, 490, 128, 40, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://static.tildacdn.com/tild3162-6631-4436-a463-623334626335/Group_275.png', xScale: 0.5, yScale: 0.5 }}})
var vintage = Bodies.rectangle(190, 440, 104, 40, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://static.tildacdn.com/tild3633-3161-4230-b936-393634663637/Group_274.png', xScale: 0.5, yScale: 0.5 }}})
var short = Bodies.rectangle(170, 390, 82, 40, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://static.tildacdn.com/tild6263-3865-4865-b335-303061323937/Group_273.png', xScale: 0.5, yScale: 0.5 }}})
//misc
var website = Bodies.rectangle(360, 420, 108, 40, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://static.tildacdn.com/tild3733-3539-4639-b133-663861363764/Group_272.png', xScale: 0.5, yScale: 0.5 }}})
var article = Bodies.rectangle(300, 380, 92, 40, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://static.tildacdn.com/tild3436-3061-4265-a563-353331643131/Group_271.png', xScale: 0.5, yScale: 0.5 }}})
var music = Bodies.rectangle(400, 360, 86, 40, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://static.tildacdn.com/tild6139-3039-4134-a161-393132616237/Group_284.png', xScale: 0.5, yScale: 0.5 }}})
var star = Bodies.rectangle(80, 260, 42, 40, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://static.tildacdn.com/tild3039-3230-4633-b763-663032376464/Group_283.png', xScale: 0.5, yScale: 0.5 }}})
//about
var about = Bodies.rectangle(230, 140, 87, 40, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://i.imgur.com/4gPcZVN.png', xScale: 0.5, yScale: 0.5 }}})
var instagram = Bodies.rectangle(320, 180, 40, 40, {id: 'instagramBody', chamfer: {radius: radius}, render: { sprite: { texture: 'https://static.tildacdn.com/tild6237-3036-4666-a334-343035393039/Group_282.png', xScale: 0.5, yScale: 0.5 }}, url: 'https://www.instagram.com/fuse.blog/'})
var random = Bodies.rectangle(230, 180, 112, 40, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://static.tildacdn.com/tild3466-3562-4137-b333-343131376136/Group_281.png', xScale: 0.5, yScale: 0.5 }}})


// Original Shape
// var illustration = Bodies.rectangle(70, 500, 133, 40, {render: { fillStyle: arts}, chamfer: {radius: 20}})


// add all of the bodies to the world
World.add(engine.world, [
  ground, wallLeft, wallRight, roof, illustration, art, threeD, graphic, photo, documentary, animation, vintage, short, website, article, music, star, about, instagram, random
]);

// add mouse control
var mouse = Mouse.create(render.canvas),
    mouseConstraint = MouseConstraint.create(engine, {
      mouse: mouse,
      constraint: {
        stiffness: 0.2,
        render: {
          visible: false
        }
      }
    });

World.add(world, mouseConstraint);

// keep the mouse in sync with rendering
render.mouse = mouse;

// Allow page scrolling in matter.js window
mouse.element.removeEventListener("mousewheel", mouse.mousewheel);
mouse.element.removeEventListener("DOMMouseScroll", mouse.mousewheel);

// Detect clicks vs. drags
let click = false;

document.addEventListener('mousedown', () => click = true);
document.addEventListener('mousemove', () => click = false);
document.addEventListener('mouseup', () => console.log(click ? 'click' : 'drag'));

// Create a On-Mouseup Event-Handler
Events.on(mouseConstraint, 'mouseup', function(event) {
  var mouseConstraint = event.source;
  var bodies = engine.world.bodies;
  if (!mouseConstraint.bodyB) {
    for (i = 0; i < bodies.length; i++) { 
      var body = bodies[i];
      // Check if clicked or dragged
      if (click === true) {
      if (Matter.Bounds.contains(body.bounds, mouseConstraint.mouse.position)) {
          var bodyUrl = body.url;
          console.log("Body.Url >> " + bodyUrl);
          // Hyperlinking feature
          if (bodyUrl != undefined) {
            //window.location.href = bodyUrl;
            window.open(bodyUrl, '_blank');
            console.log("Hyperlink was opened");
          }
          break;
        }
      }
    }
  }
});

// run the engine
Engine.run(engine);

// run the renderer
Render.run(render);



External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.14.2/matter.min.js