Small, typed, dependency free tool to round corners of 2d-polygon provided by an array of { x, y } points.

Overview

round-polygon

Small, typed, dependency-free tool to round corners of 2d-polygon provided by an array of { x, y } points.

The algorithm prevents rounding overlaps, so if you pass an oversized radius, it won't break the shape, but instead calculate the maximum radius of each point, just like you expect.

demo

Demo page


Installation

by npm:

npm i round-polygon

and then

import roundPolygon from "round-polygon"

or if you don't use npm you can import module from unpkg:

import roundPolygon from "https://unpkg.com/round-polygon@latest/lib/round-polygon.es.js"

or by script tag (with a link to IIFE module) in your html page:

<script src="https://unpkg.com/round-polygon@latest/lib/round-polygon.iife.js"></script>

Usage

if you use TypeScript you can also import input type "Point" and output type "RoundedPoint"

import roundPolygon, { Point, RoundedPoint } from "round-polygon"

let polygonToRound: Point[],
    roundedPolygon: RoundedPoint[],
    radius: number

roundPolygon function takes two arguments: an array of initial points and a radius

polygonToRound = [
  { x: 100, y:   0 },
  { x:   0, y: 150 },
  { x: 200, y: 150 },
  { x: 200, y:   0 },
  { x: 150, y: 200 },
]

radius = 20

roundedPolygon = roundPolygon(polygonToRound, radius)

a rounded point is an object with provided properties:

{
  id: number, // index of the current point
  x: number, // x-coordinate of the initial point
  y: number, // y-coordinate of the initial point
  offset: number, // length between the initial point and the start or the end of a rounding arc
  angle: { // in radians
    main: number, // the angle between the previous point, the current one, and the next one
    prev: number, // the angle between prev-to-curr-line to x-Axis
    next: number, // the angle between next-to-curr-line to x-Axis
    bis: number, // the bisector angle to x-Axis
    dir: 1 | -1 // whether clockwise (1) or counter-clockwise (-1) is the main angle direction (from the "prev" to the "next" angle)
  },
  arc: {
    radius: number, // the rounding radius of the current point (might be less then provided as an argument (caused by rounding overlapping))
    x: number, // x-coordinate of rounding center
    y: number // y-coordinate of rounding center
  },
  in: {
    length: number, // the length of prev-to-curr-line
    x: number, // x-coordinate where the arc begins laying on prev-to-curr-line
    y: number // y-coordinate where the arc begins laying on prev-to-curr-line
  },
  out: {
    length: number, // the length of next-to-curr-line
    x: number, // x-coordinate where arc ends laying on next-to-curr-line
    y: number // y-coordinate where arc ends laying on next-to-curr-line
  },
  prev: {...}, // a getter, returns prev-indexed rounded point
  next: {...} // a getter, returns next-indexed rounded point
}

so the whole approach to draw a rounded shape using, for example, Canvas API looks like this:

// init
const
  canvas = document.querySelector("canvas"),
  ctx = canvas.getContext("2d"),
  polygonToRound = [
    { x: 120, y:  20 },
    { x:  20, y: 170 },
    { x: 220, y: 170 },
    { x: 220, y:  20 },
    { x: 170, y: 220 },
  ],
  radius = 100,
  roundedPolygon = roundPolygon(polygonToRound, radius)

// draw
ctx.beginPath()
roundedPolygon.forEach((p) => {
  ctx.moveTo(p.in.x, p.in.y)
  ctx.arcTo(p.x, p.y, p.out.x, p.out.y, p.arc.radius)
  ctx.lineTo(p.next.in.x, p.next.in.y)
})
ctx.stroke()

Changelog

Upcoming v0.6.0

  • performance improvment (clean calculations)
  • handle a case when a point has 0 radians main-angle
  • add "from" and "to" angles to an arc propperty of a rounded point object, as well as "length" prop
  • add ability to provide a certain radius to round by to each Point

Later

  • input and output might be SVG path
  • provide bezier curve estimations as an alernative to an arc propperty
    {
      in: { ...,
        handle: { x: number, y: number }
      },
      out: { ...,
        handle: { x: number, y: number }
      },
      // if main_angle < PI / 2 (so, arc > PI / 2)
      mid: {
        x: number,
        y: number,
        in: { x: number, y: number },
        out: { x: number, y: number }
      }
    }
You might also like...

A simple project to learn more about developing smart contracts on polygon.

polygon-books-hardhat A simple project to learn more about developing smart contracts using Solidity. Local Development Environment Setup Install all

Jan 25, 2022

SW DAOs open-source Polygon dApp frontend.

SW DAOs open-source Polygon dApp frontend.

SW DAOs open-source Polygon dApp frontend. At SW DAO, we're committed to being the industry-leading provider of automated investing solutions and cryp

Jul 27, 2022

✨ An IRL tokenization platform to turn your hopes, dreams, and desires into fundable NFTs on the Polygon blockchain using Chainlink, IPFS, Moralis, and NFT.Storage.

✨ An IRL tokenization platform to turn your hopes, dreams, and desires into fundable NFTs on the Polygon blockchain using Chainlink, IPFS, Moralis, and NFT.Storage.

GoFundYourself Getting funding for your passion project, needs or dream doesn't have to be a nightmare! check out our live demo on Netlify Let's Fundi

Dec 6, 2022

This Next.js app is designed to be used with the Figment Learn Pathways, to help developers learn about various blockchain protocols such as Solana, NEAR, Secret, Polygon and Polkadot!

This Next.js app is designed to be used with the Figment Learn Pathways, to help developers learn about various blockchain protocols such as Solana, NEAR, Secret, Polygon and Polkadot!

👋🏼 What is learn-web3-dapp? We made this decentralized application (dApp) to help developers learn about Web 3 protocols. It's a Next.js app that us

Oct 1, 2022

a lightweight, dependency-free JavaScript plugin which makes a HTML table interactive

JSTable The JSTable is a lightweight, dependency-free JavaScript plugin which makes a HTML table interactive. The plugin is similar to the jQuery data

Oct 20, 2022

DOM ViewModel - A thin, fast, dependency-free vdom view layer

DOM ViewModel - A thin, fast, dependency-free vdom view layer

domvm (DOM ViewModel) A thin, fast, dependency-free vdom view layer (MIT Licensed) Introduction domvm is a flexible, pure-js view layer for building h

Dec 8, 2022

A low-feature, dependency-free and performant test runner inspired by Rust and Deno

minitest A low-feature, dependency-free and performant test runner inspired by Rust and Deno Simplicity: Use the mt test runner with the test function

Nov 12, 2022

A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more

Glide.js is a dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more What can co

Jan 3, 2023

Fast and lightweight dependency-free vanilla JavaScript polyfill for native lazy loading / the awesome loading='lazy'-attribute.

loading="lazy" attribute polyfill Fast and lightweight vanilla JavaScript polyfill for native lazy loading, meaning the behaviour to load elements rig

Dec 30, 2022
A zero-dependency, strongly-typed web framework for Bun, Node and Cloudflare workers

nbit A simple, declarative, type-safe way to build web services and REST APIs for Bun, Node and Cloudflare Workers. Examples See some quick examples b

Simon Sturmer 16 Sep 16, 2022
My first npm package: all-round-calculatpr

all-round-calculator An npm library package to calculate everything you want. Check out our npm package on npmjs.org. Check out the documentation here

Susmita Dey 12 Dec 5, 2022
This tool is studied to help ethical hackers to find vulnerable points in webpage's javascript

JavaScream This tool is studied to help ethical hackers to find vulnerable points in webpage's javascript. HOW TO INSTALL (FIREFOX) 1- clone the proje

Davide Cavallini 8 Aug 11, 2022
This tool is studied to help ethical hackers to find vulnerable points in webpage's javascript

JavaScream This tool is studied to help ethical hackers to find vulnerable points in webpage's javascript. HOW TO INSTALL (FIREFOX) 1- clone the proje

Davide Cavallini 7 Aug 3, 2022
True P2P concept for your p2p powered website/app/client. MSC/MEP (Multiple Strategy Concept/Multiple Entry Points)

TRUE P2P CONCEPT - Lets redecentralize the web This repo is just conceptual. Active development of the endproduct (TRUE P2P) happens here https://gith

Bo 6 Mar 29, 2022
A chrome extension that inserts dream signs into your browsing experience. Get points when you recognize the dream signs.

There are 3 parts to this repo: Backend Nodejs Frontend React Chrome Extension How to Start frontend and backend $ cd frontend $ npm run start In the

Dashiell Bark-Huss 2 Apr 3, 2022
Map of reception points for refugees near Polish-Ukrainian border

ua-2022-map Map of reception points for refugees near Polish-Ukrainian border work in progress... Development We provide a docker-based dev environmen

OpenStreetMap Polska 39 Dec 7, 2022
🚀 A small JS no-dependency library for a cool download experience

JS File Downloader ?? Please remember to star this github repo if you like it. Thank you! ❤️ Introduction JS File Downloader is a simple no dependency

AleeeKoi 160 Dec 23, 2022
This project aims for Road to web3 Hackathon powered by Polygon

BlogStream A blog site where users directly pay the writers for only what they are reading This is a project created for Road to Web3 hackathon by Web

WebX DAO 11 Sep 12, 2022
Decentralized Twitter prototype built with Polygon, GraphQL, Next.js, Ceramic, Arweave, and Bundlr

Titter - Web3 Social chat beta as fuck ?? Built with Next.js, Arweave, Bundlr, Ceramic, GraphQL, & Polygon How it works This is a working prototype of

Nader Dabit 154 Dec 14, 2022