Matter.js - Alternating Gravities with SVGs and Mouse Control Live Preview

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; vr *; web-share *; serial *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"featureFlags":[],"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails"},"__user":{"anon":true,"base_url":"/anon/","cohorts":[],"current_team_hashid":null,"current_team_id":0,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNzM2NzQzNjU1LCJpYXQiOjE3MzY3NDAwNTUsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.98l7VYikae6C7M_2EuYlY2ij97GLRV7KXoDKyqL-iIncZ4LNf7HhrWy-ZBD8B76olM6L0nqTw9UPQ6hjEwn14rvLRZiYn1SK_amvdzG9GCIsfqeVTHLWVe0D0sQt2iQ4wkeY1f0iYRl_KuTBHaK7QM-1gG_vNm31z7J0HnkkRxGHOM1uROShs9Ji0bxO2xkSQRp9vFD4b5tTTEwpO06AeZvRWtS8ivdfjXp7sPtbck8rmiyDSlsQcLPfUCEY_ZNmEPzFAphQLTFl7U3WfWY01_ZAOtr36Ib-FCiRgcQYP-FZ1uxAnWstoZAo3OWtk9Oyv1K-O5zhZ7gllzQ7TRFCvg"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":61588168,\"user_id\":219932,\"html\":\"\\n\\n<svg class=\\\"semi\\\">\\n  <path d=\\\"M 98,93 L 169,93 C 169,54 137,22 98,22 C 59,22 27,54 27,93 L 98,93 z \\\" \\/>\\n<\\/svg>\\n\\n\\n\\n<svg class=\\\"svg-letter\\\" id=\\\"svg-1\\\">\\n  <path d=\\\"M72.6,146c-9.7,0-19-1.7-27.7-5.2-8.7-3.5-16.4-8.4-23.1-14.8-6.7-6.4-12-14.1-15.9-23C2,94.1,0,84.2,0,73.4v-.4c0-10.4,1.9-20.1,5.7-29,3.8-8.9,9.1-16.7,15.8-23.2,6.7-6.5,14.6-11.6,23.7-15.3C54.3,1.8,64,0,74.4,0s14.8,.9,21.3,2.7c6.5,1.8,12.3,4.3,17.6,7.5,5.3,3.2,9.9,7,14,11.5,4.1,4.5,7.6,9.4,10.5,14.7l-38.6,22.6c-2.7-5.1-6-9.2-9.9-12.3-3.9-3.1-9.1-4.7-15.5-4.7s-7.6,.8-10.8,2.4c-3.2,1.6-5.9,3.8-8.2,6.6-2.3,2.8-4,6.1-5.3,9.8-1.3,3.7-1.9,7.7-1.9,11.8v.4c0,4.5,.6,8.7,1.9,12.5,1.3,3.8,3.1,7.1,5.4,9.8,2.3,2.7,5.1,4.9,8.3,6.4,3.2,1.5,6.7,2.3,10.6,2.3,6.7,0,12-1.6,16-4.9,4-3.3,7.5-7.5,10.4-12.7l38.6,21.8c-2.9,5.2-6.4,10.1-10.4,14.7s-8.7,8.6-14.1,12-11.5,6.1-18.4,8.1c-6.9,2-14.6,3-23.3,3Z\\\"\\/>\\n<\\/svg>\\n\\n\\n\\n<svg class=\\\"svg-letter\\\" id=\\\"svg-2\\\">\\n  <path d=\\\"M0,0H46.8V140H0V0Z\\\"\\/>\\n<\\/svg>\\n\\n\\n\\n<svg class=\\\"svg-letter\\\" id=\\\"svg-3\\\">\\n  <path d=\\\"M57.2,122.2H7.9L59,0h46.4l51.1,122.2h-50.3H57.2z\\\"\\/>\\n<\\/svg>\\n\\n<svg class=\\\"svg-letter\\\" id=\\\"svg-3-leg-1\\\">\\n  <path d=\\\"M0,141l7.9-18.8h49.3L50,141H0z\\\"\\/>\\n<\\/svg>\\n\\n<svg class=\\\"svg-letter\\\" id=\\\"svg-3-leg-2\\\">\\n  <path d=\\\"M106.2,122.2h50.3l7.9,18.8h-50.8L106.2,122.2z\\\"\\/>\\n<\\/svg>\\n\\n<svg class=\\\"svg-letter\\\" id=\\\"svg-3-counter\\\">\\n  <path d=\\\"M94.6,89L81.8,55L69,89H94.6z\\\"\\/>\\n<\\/svg>\\n\\n\\n\\n<svg class=\\\"svg-letter\\\" id=\\\"svg-4\\\">\\n  <path d=\\\"M76.2,146c-53,1.4-92-52.4-70.3-101.5C30.5-14.1,122.3-14.7,147,44.1C168.7,92.9,128.9,147.6,76.2,146z\\\"\\/>\\n<\\/svg>\\n\\n<svg class=\\\"svg-letter\\\" id=\\\"svg-4-counter\\\">\\n  <path d=\\\"M76.6,104.6c38.7,0,38-63.4-0.4-63.2C37.5,41.4,38.2,104.8,76.6,104.6z\\\"\\/>\\n<\\/svg>\",\"css\":\"html {\\n  box-sizing: border-box;\\n}\\n\\n*,\\n*::before,\\n*::after {\\n  box-sizing: inherit;\\n  &:focus {\\n    outline: none;\\n  }\\n}\\n\\n* {\\n  font-family: monaco, courier;\\n}\\n\\nbody {\\n  margin: 0;\\n  padding: 0;\\n  background: #0a0618;\\n}\\n\\nsvg {\\n  display: none;\\n}\\n\",\"js\":\"function percentX(percent) {\\n  return Math.round((percent \\/ 100) * window.innerWidth);\\n}\\nfunction percentY(percent) {\\n  return Math.round((percent \\/ 100) * window.innerHeight);\\n}\\n\\n\\/\\/ return a random integer between two values, inclusive\\nfunction getRandomInt(min, max) {\\n  min = Math.ceil(min);\\n  max = Math.floor(max);\\n  return Math.floor(Math.random() * (max - min + 1) + min);\\n}\\n\\nconst Engine = Matter.Engine,\\n      Bodies = Matter.Bodies,\\n      Body = Matter.Body,\\n      Svg = Matter.Svg,\\n      Vertices = Matter.Vertices,\\n      Constraint = Matter.Constraint,\\n      Composite = Matter.Composite,\\n      Mouse = Matter.Mouse,\\n      MouseConstraint = Matter.MouseConstraint,\\n      Render = Matter.Render,\\n      Runner = Matter.Runner;\\n\\n\\/\\/ create an engine\\nconst engine = Engine.create(),\\n      world = engine.world;\\n\\n\\/\\/ create a renderer\\nconst render = Render.create({\\n  element: document.body,\\n  engine: engine,\\n  options: {\\n    wireframes: false,\\n    showInternalEdges: false,\\n    width: percentX(100),\\n    height: percentY(100),\\n    background: \\\"transparent\\\"\\n  }\\n});\\n\\nlet bodies = [],\\n    bgColor = \\\"#0A0618\\\";\\n\\n\\/\\/ boundaries\\n\\nvar ceiling = Bodies.rectangle(percentX(100) \\/ 2, percentY(0) - 10, percentX(100), 20, { isStatic: true });\\nvar floor = Bodies.rectangle(percentX(100) \\/ 2, percentY(100) + 10, percentX(100), 20, { isStatic: true });\\nvar rightWall = Bodies.rectangle(percentX(100) + 10, percentY(100) \\/ 2, 20, percentY(100), { isStatic: true });\\nvar leftWall = Bodies.rectangle(percentX(0) - 10, percentY(100) \\/ 2, 20, percentY(100), { isStatic: true });\\nceiling.render.visible = false;\\nfloor.render.visible = false;\\nrightWall.render.visible = false;\\nleftWall.render.visible = false;\\nbodies.push(ceiling);\\nbodies.push(floor);\\nbodies.push(rightWall);\\nbodies.push(leftWall);\\n\\n\\/\\/ circles\\n\\nfor (var i = 0; i < 20; i++) {\\n  let circleX = getRandomInt(percentX(00), percentX(100));\\n  let circleY = getRandomInt(percentY(00), percentY(100));\\n  let circleR = getRandomInt(10, 40);\\n  let randomColor = Math.floor(Math.random()*16777215).toString(16);\\n  let newCircle = Bodies.circle(circleX, circleY, circleR);\\n  newCircle.render.fillStyle = \\\"#\\\" + randomColor;\\n  bodies.push(newCircle);\\n}\\n\\n\\/\\/ add all bodies (boundaries and circles) to the world\\nComposite.add(world, bodies);\\n\\n\\/\\/ semicircles\\n\\nconst semiCircles = [\\n  ...Array(30).fill().map(() => {\\n    const path = document.querySelector(\\\".semi > path\\\");\\n    let randomColor = Math.floor(Math.random()*16777215).toString(16);\\n    let randomScale = Math.random() \\/ 2 + 0.1;\\n    const semi = Bodies.fromVertices(\\n      Math.random() * window.innerWidth, \\/\\/ x\\n      Math.random() * window.innerHeight, \\/\\/ y\\n      Svg.pathToVertices(path), \\/\\/ vertexSets\\n      {\\n        render: {\\n          fillStyle: \\\"#\\\" + randomColor,\\n          strokeStyle: \\\"#\\\" + randomColor,\\n          lineWidth: 1\\n        }\\n      }, \\/\\/ options\\n      true, \\/\\/ flag internal\\n    );\\n    const scale = randomScale;\\n    Matter.Body.scale(semi, scale, scale);\\n    return semi;\\n  }),\\n];\\n\\n\\/\\/ add all semicircles to the world\\nComposite.add(world, semiCircles);\\n\\n\\/\\/ SVGs\\n\\nlet vertexSets = [],\\n    svgOne,\\n    svgTwo,\\n    svgThree,\\n    svgThreeLegOne,\\n    svgThreeLegTwo,\\n    svgThreeCounter,\\n    svgFour,\\n    svgFourCounter;\\n\\nlet cX = percentX(20);\\nlet cY = percentY(20);\\n\\nlet iX = percentX(40);\\nlet iY = percentY(30);\\n\\nlet aX = percentX(60);\\nlet aY = percentY(20);\\n\\nlet aXLegOne = aX - 43;\\nlet aYLegOne = aY + 49;\\n\\nlet aXLegTwo = aX + 43;\\nlet aYLegTwo = aY + 49;\\n\\nlet oX = percentX(80);\\nlet oY = percentY(30);\\n\\n\\/\\/ let letterSize = (window.innerWidth \\/ 1000);\\n\\nlet letterSizeHorizontal = 0.8,\\n    letterSizeVertical = 0.8;\\n\\n\\/\\/ C\\n\\n$('#svg-1').find('path').each(function(i, path) {\\n  \\n  let randomColor = Math.floor(Math.random()*16777215).toString(16);\\n  \\n  svgOne = Bodies.fromVertices(\\n    cX,\\n    cY,\\n    Vertices.scale(Svg.pathToVertices(path, 10), \\n    letterSizeHorizontal,\\n    letterSizeVertical), {\\n     render: {\\n       fillStyle: \\\"#\\\" + randomColor,\\n       strokeStyle: \\\"#\\\" + randomColor,\\n       lineWidth: 2\\n     }\\n    }, true);\\n\\n  vertexSets.push(svgOne);\\n\\n});\\n\\n\\/\\/ I\\n\\n$('#svg-2').find('path').each(function(i, path) {\\n  \\n  let randomColor = Math.floor(Math.random()*16777215).toString(16);\\n\\n  svgTwo = Bodies.fromVertices(\\n    iX,\\n    iY,\\n    Vertices.scale(Svg.pathToVertices(path, 10), \\n    letterSizeHorizontal,\\n    letterSizeVertical), {\\n      render: {\\n        fillStyle: \\\"#\\\" + randomColor,\\n        strokeStyle: \\\"#\\\" + randomColor,\\n        lineWidth: 2\\n      }\\n    }, true);\\n\\n  vertexSets.push(svgTwo);\\n\\n});\\n\\n\\/\\/ A\\n\\nlet randomColorLetterA = Math.floor(Math.random()*16777215).toString(16);\\n\\n$('#svg-3').find('path').each(function(i, path) {\\n\\n  svgThree = Bodies.fromVertices(\\n    aX,\\n    aY,\\n    Vertices.scale(Svg.pathToVertices(path, 10), \\n    letterSizeHorizontal,\\n    letterSizeVertical), {\\n      render: {\\n        fillStyle: \\\"#\\\" + randomColorLetterA,\\n        strokeStyle: \\\"#\\\" + randomColorLetterA,\\n        lineWidth: 2\\n      }\\n    }, true);\\n\\n  vertexSets.push(svgThree);\\n\\n});\\n\\n$('#svg-3-leg-1').find('path').each(function(i, path) {\\n\\n  svgThreeLegOne = Bodies.fromVertices(\\n    aXLegOne,\\n    aYLegOne,\\n    Vertices.scale(Svg.pathToVertices(path, 10), \\n    letterSizeHorizontal,\\n    letterSizeVertical), {\\n      render: {\\n        fillStyle: \\\"#\\\" + randomColorLetterA,\\n        strokeStyle: \\\"#\\\" + randomColorLetterA,\\n        lineWidth: 2,\\n        isStatic: true\\n      }\\n    }, true);\\n\\n  vertexSets.push(svgThreeLegOne);\\n\\n});\\n\\n$('#svg-3-leg-2').find('path').each(function(i, path) {\\n  \\n  svgThreeLegTwo = Bodies.fromVertices(\\n    aXLegTwo,\\n    aYLegTwo,\\n    Vertices.scale(Svg.pathToVertices(path, 10), \\n    letterSizeHorizontal,\\n    letterSizeVertical), {\\n      render: {\\n        fillStyle: \\\"#\\\" + randomColorLetterA,\\n        strokeStyle: \\\"#\\\" + randomColorLetterA,\\n        lineWidth: 2,\\n        isStatic: true\\n      }\\n    }, true);\\n\\n  vertexSets.push(svgThreeLegTwo);\\n\\n});\\n\\n$('#svg-3-counter').find('path').each(function(i, path) {\\n\\n  svgThreeCounter = Bodies.fromVertices(\\n    aX,\\n    aY,\\n    Vertices.scale(Svg.pathToVertices(path, 10), \\n    letterSizeHorizontal,\\n    letterSizeVertical), {\\n      render: {\\n        fillStyle: bgColor,\\n        strokeStyle: bgColor,\\n        lineWidth: 2\\n      }\\n    }, true);\\n\\n  vertexSets.push(svgThreeCounter);\\n\\n});\\n\\n\\/\\/ create compound body for letter \\\"A\\\"\\nvar compoundBodyA = Body.create({\\n  parts: [svgThree, svgThreeLegOne, svgThreeLegTwo, svgThreeCounter]\\n});\\n\\n\\/\\/ O\\n\\n$('#svg-4').find('path').each(function(i, path) {\\n  \\n  let randomColor = Math.floor(Math.random()*16777215).toString(16);\\n\\n  svgFour = Bodies.fromVertices(\\n    oX,\\n    oY,\\n    Vertices.scale(Svg.pathToVertices(path, 10), \\n    letterSizeHorizontal,\\n    letterSizeVertical), {\\n      render: {\\n        fillStyle: \\\"#\\\" + randomColor,\\n        strokeStyle: \\\"#\\\" + randomColor,\\n        lineWidth: 1\\n      }\\n    }, true);\\n\\n  vertexSets.push(svgFour);\\n\\n});\\n\\n$('#svg-4-counter').find('path').each(function(i, path) {\\n\\n  svgFourCounter = Bodies.fromVertices(\\n    oX,\\n    oY,\\n    Vertices.scale(Svg.pathToVertices(path, 10), \\n    letterSizeHorizontal,\\n    letterSizeVertical), {\\n      render: {\\n        fillStyle: bgColor,\\n        strokeStyle: bgColor,\\n        lineWidth: 1\\n      }\\n    }, true);\\n\\n  vertexSets.push(svgFourCounter);\\n\\n});\\n\\n\\/\\/ create compound body for letter \\\"O\\\"\\nvar compoundBodyO = Body.create({\\n  parts: [svgFour, svgFourCounter]\\n});\\n\\n\\/\\/ add A and O compound bodies to the world\\nComposite.add(world, [\\n  compoundBodyA,\\n  compoundBodyO \\n]);\\n\\n\\/\\/ add all SVGs to the world\\nComposite.add(world, vertexSets);\\n\\n\\/\\/ run the renderer\\nRender.run(render);\\n\\n\\/\\/ create runner\\nconst runner = Runner.create();\\n\\n\\/\\/ run the engine\\nRunner.run(runner, engine);\\n\\n\\/\\/ gravity\\n\\nlet intervalID;\\n\\nfunction changeGravity() {\\n  if (!intervalID) {\\n    intervalID = setInterval(setGravity, 3000);\\n  }\\n}\\n\\nlet intervalNumber = 1;\\nfunction setGravity() {\\n  if (intervalNumber === 1) {\\n    \\/\\/ console.log(\\\"interval \\\" + intervalNumber + \\\", down\\\");\\n    world.gravity.y = 0.5;\\n    world.gravity.x = 0;\\n    intervalNumber += 1;\\n  } else if (intervalNumber === 2) {\\n    \\/\\/ console.log(\\\"interval \\\" + intervalNumber + \\\", up\\\");\\n    world.gravity.y = -0.5;\\n    world.gravity.x = 0;\\n    intervalNumber += 1;\\n  } else if (intervalNumber === 3) {\\n    \\/\\/ console.log(\\\"interval \\\" + intervalNumber + \\\", right\\\");\\n    world.gravity.x = 0.5;\\n    world.gravity.y = 0;\\n    intervalNumber += 1;\\n  } else {\\n    \\/\\/ console.log(\\\"interval \\\" + intervalNumber + \\\", left\\\");\\n    world.gravity.x = -0.5;\\n    world.gravity.y = 0;\\n    intervalNumber = 1;\\n  }\\n}\\n\\n\\/\\/ hold in place for testing\\n\\/\\/ world.gravity.y = 0;\\n\\/\\/ world.gravity.x = 0;\\n\\nchangeGravity();\\n\\n\\/\\/ mouse control\\n\\nlet mouse = Mouse.create(render.canvas),\\n    mouseConstraint = MouseConstraint.create(engine, {\\n      mouse: mouse,\\n      constraint: {\\n          stiffness: 0.2,\\n          render: {\\n              visible: false\\n          }\\n      }\\n    });\\n\\nComposite.add(world, mouseConstraint);\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2022-06-21T14:06:22.394Z\",\"updated_at\":\"2022-06-22T15:19:12.209Z\",\"title\":\"Matter.js - Alternating Gravities with SVGs and Mouse Control\",\"description\":\"\",\"slug_hash\":\"eYVaQbp\",\"head\":\"\",\"private\":false,\"slug_hash_private\":\"52633807a4120e4ceb03ae30f674d0a6\",\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"01818695-f0ba-78a1-a75c-090b750b8383\",\"is_new_editor_pen\":false,\"protected\":false,\"access\":\"Public\",\"pen_hash\":null,\"hashid\":\"eYVaQbp\"}"}