{"componentChunkName":"component---src-templates-case-study-js","path":"/case-studies/verly-range-slider","result":{"data":{"markdownRemark":{"id":"304bf971-9851-57fd-8983-ac61e4a95ee1","html":"

While I was building my physics engine Verly.js I was thinking of making something that would showcase the engine's potential to do some exciting stuff, so I created this just as an experiment.

\n\n

How It Works?

\n

It works by using Verly.js's verly.createRope(x, y, segments, gap, pin) function which takes arguments - x and y for location of the rope, segments which determines the dots count in the rope (more dots, more fluid rope), gap which specifies the distance between each dot (more gap, longer rope), and lastly pin which just pins the defined point.

\n
\n

I created a verly instance for every input slider present on the screen.

\n
\n
let DOMSlider = document.getElementById(id);\nlet canvas = document.createElement('canvas');\nlet ctx = canvas.getContext('2d');\n\n// canvas width is equal to the slider's width \nlet width = DOMSlider.scrollWidth;\nlet height = width / 2;\ncanvas.width = width;\ncanvas.height = height;\ncanvas.style.pointerEvents = 'none';\n\n// offsetting the position so its lines up\ncanvas.style.transform = 'translate(0, -15px)';\nDOMSlider.parentElement.appendChild(canvas);\n\n// -- then initialized verly\n// new Verly(iteration, canvas, ctx)\nlet verly = new Verly(50, canvas, ctx);// added some gravity\nconst gravity = new Vector(0, 0.3);
\n

after that, I created the rope with

\n
// width / 20 to adjust the segments depending on the screen size\nlet rope = verly.createRope(0, 0, width / 20, 17, 0);let lastIndex = rope.points.length - 1;\n\nrope.setGravity(gravity);\n// i pinned the last dot of the rope\nrope.pin(lastIndex);
\n

Getting the slider's position and applying it to the rope

\n

now the actual part where I fix the last dot's position with the slider's thumb.\nTo do this,\nWe will take the slider's value and normalize it, so it's between 0 and 1 then multiply the value with the width to get the slider's thumb position.

\n

(yeah i did not bother to use shadowDOM because of browser compatibility and vendor issues)

\n
function setRopePosition() {\n  // get the normalized value of the slider\n  let ratio = (DOMSlider.value - DOMSlider.min) / (DOMSlider.max - DOMSlider.min);  // then just apply it to the last dot of the rope\n  rope.points[rope.points.length - 1].pos.x = (ratio * width);\n}\n// and use event listener\nDOMSlider.addEventListener('input', setRopePosition);
\n

Okay, this works!\nBut I noticed something weird behavior with this.

\n

The problem was, for some reason (probably floating point precision) the slider's position was offsetting a bit while moving towards the edge, so I had to think some ways to prevent this. then I ended up with this solution (yeah crazy but works)

\n
function setRopePosition() {\n  let ratio = (DOMSlider.value - DOMSlider.min) / (DOMSlider.max - DOMSlider.min);\n\n  // floating point correction  if (ratio < 0.5) ratio += 0.01;  if (ratio < 0.3) ratio += 0.01;  if (ratio > 0.6) ratio -= 0.01;  if (ratio > 0.8) ratio -= 0.02;\n  rope.points[rope.points.length - 1].pos.x = (ratio * width);\n}
\n

nice!

\n

now we can render the scene and update the physics.

\n
function animate() {\n  ctx.clearRect(0, 0, width, height);\n  \n  verly.update();\n  // rendering the rope\n  rope.renderSticks();\n\n  requestAnimationFrame(animate);\n}\nanimate();
\n

and we are done!

\n
\n

hopefully, you enjoyed playing with this project, I know because I did.\nyou can give the project a star on GitHub if you liked it, have a beautiful day (or night)

\n
","fields":{"slug":"/case-studies/verly-range-slider"},"frontmatter":{"demo":"//anuraghazra.github.io/VerlyRangeSlider","iframe":"//codepen.io/anuraghazra/embed/agKJEd/?default-tab=result&theme-id=light","src":"//github.com/anuraghazra/VerlyRangeSlider","title":"Verly Range Slider","info":{"idea":"The main idea was to make some verlet simulated ropes and connect them to the rang slider's thumb and let them sway","links":[["On Codepen","https://codepen.io/anuraghazra/pen/agKJEd"],["Verly.js - Physics engine that it uses","https://github.com/anuraghazra/Verly.js"],["Article at DataGenetic | Verlet Simulation","https://datagenetics.com/blog/july22018/index.html"]],"tech":["Javascript","Canvas"]}}}},"pageContext":{"slug":"/case-studies/verly-range-slider"}},"staticQueryHashes":["1033876704"]}