DEV Community: Alessandro Cipolletti

I've made my first NPM package. Why haven't you yet ?

Alessandro Cipolletti — Fri, 20 May 2022 22:26:27 +0000

Until not so long ago, every new project of mine always started with a copy/paste of some utils.js file I made in the past.

I'm sure I'm not the only one, and I'm sure most of you are lazy enough (like I was) to keep doing that instead of what you should do: putting that code in a standalone library.

First of all, code evolves during time
Sometimes I needed to update that code I just copied to take care of a new edge case, and at the end I found myself having multiple versions of the same functions.
And this without even considering bug fixes...

Second, this made me a better developer
Knowing that those functions could eventually evolve in the future inside other projects, I never took the time to rewrite them in typescript or write for them a good documentation.

Third, I learned something new during the process
This was my first Npm Package. I learned something new doing it. Isn't this always a win?

So better code, new skills, and why not a new line to put on the cv.

I'm almost proud of the documentation I've put together for my code, so I'm sharing it with you guys:

Npm: https://www.npmjs.com/package/js-math-and-ui-utils
GitHub: https://github.com/AlessandroCipolletti/my-js-math-and-ui-utils

PS: I'm not putting here any tutorial link. I bet you all know how to use google.

Some complex JS Math Utils front-end devs will love

Alessandro Cipolletti — Fri, 22 Jan 2021 11:08:26 +0000

Hi everyone,

I know that today there is a js library for (almost) everything and you can be fine even if you don't know exactly what's going on on your page. But if the day comes when you have to customise the code for yours needs... math can be very tricky.

And IMO it's always cool to know how things work anyway.

Starting from the basics:

const M = Math

const DEFAULT_DECIMALS = 4

const round = (n, d = DEFAULT_DECIMALS) => {
  const m = d ? M.pow(10, d) : 1
  return M.round(n * m) / m
}

const getPercOf = (value, total, decimals = DEFAULT_DECIMALS) => 
  round(!total ? value : value * 100 / total, decimals)

const percValueOf = (perc, total, decimals = DEFAULT_DECIMALS) =>
  round(!total ? perc : perc * total / 100, decimals)

const getRandomNumber = (max, float = false, decimals = DEFAULT_DECIMALS) =>
  float ? round(M.random() * max, decimals) : M.random() * max | 0

// fastest way I found to put a value between a Min and a Max
const arrayOrderNumberUp = (a, b) => a - b
const getNumberInBetween = (a, b, c) => [a, b, c].sort(arrayOrderNumberUp)[1]

// USAGE
round(12.3456789)     // ==> 12.3457
round(12.3456789, 2)  // ==> 12.35
round(12.3456789, 0)  // ==> 12

getPercOf(10, 20)             // ==> 50
getPercOf(10.1234567, 20)     // ==> 50.6173
getPercOf(10.1234567, 20, 8)  // ==> 50.6172835 

percValueOf(50, 20)          // ==> 10
percValueOf(12.345678, 100)  // ==> 12.3457
percValueOf(13.566, 33, 5)   // ==> 4.47678

getRandomNumber(255)  // ==> between 0 and 255, integer
getRandomNumber(1)    // ==> always 0
getRandomNumber(255, true)  // ==> between 0 and 255, float, 4 decimals

const MIN = 10
const MAX = 100
getNumberInBetween(50, MIN, MAX)  // ==> 50
getNumberInBetween(150, MIN, MAX) // ==> 100
getNumberInBetween(1, MIN, MAX)   // ==> 10

I know there is nothing special here, but the point for now is to have your values with a default number of decimals. I found this very useful for multiple reasons while I was working on a React video editor.
I had different resolutions to consider (720p 1080p 4k) edited in a small 480p preview. There were drag and drop elements, and all positions were in % (to be able to export at any resolution). Just setting the number of decimals (to 4) fixed some alignment bugs, and allowed me to had a pixel-level precision.

On top of that, there is the rounding problem.
In js 10 / 3 = 3.3333333333333335. FFMPEG disagreed. Other bugs fixed just by setting the number of decimals.

(If your values are in pixels, just 1 decimal is enough. Anyway I suggest not to use just integer numbers, even for pixels)

Moving on, cartesian coordinate system. Probably you too, like me, studied that at school and then never heard of it again for years. Until it turns out you need it in order to edit an image on your webpage.

Crop, resize, drag and drop, scale, rotation, lines intersections, point projection on line, get a line between two points... Here is all I needed until now:

const translateCoords = (x, y, dx, dy) => ([x + dx, y + dy])

const getDistanceBetweenTwoPoints = (x1, y1, x2, y2, decimals = 0) =>
  round(M.sqrt(M.pow(x2 - x1, 2) + M.pow(y2 - y1, 2)), decimals)

const getMiddlePointCoords = (x1, y1, x2, y2, decimals = DEFAULT_DECIMALS) =>
  ([
    round((x1 + x2) / 2, decimals),  // middle point x
    round((y1 + y2) / 2, decimals),  // middle point y
  ])

const rotatePointCoords = (x, y, angle, decimals = DEFAULT_DECIMALS) =>
  ([
    round(x * M.cos(angle) - y * M.sin(angle)),  // new point x
    round(x * M.sin(angle) + y * M.cos(angle)),  // new point y
  ])

const convertAngleRadToDeg = (rad) => rad * 180 / M.PI
const convertAngleDegToRad = (deg) => deg * M.PI / 180

const getAngleDegBetweenTwoPoints = (x1, y1, x2, y2) =>
  convertAngleRadToDeg(getAngleRadBetweenTwoPoints(x1, y1, x2, y2))

const getAngleRadBetweenTwoPoints = (x1, y1, x2, y2) => {
  const m1 = x2 - x1
  const m2 = y2 - y1
  if (m1 > 0 && m2 > 0) { // first quadrant
    return (M.atan(m2 / m1))
  } else if (m1 < 0 && m2 > 0) { // second quadrant
    return (M.atan(m2 / m1) + PI)
  } else if (m1 < 0 && m2 < 0) { // third quadrant
    return (M.atan(m2 / m1) + PI)
  } else if (m1 > 0 && m2 < 0) { // fourth quadrant
    return (M.atan(m2 / m1) + PI * 2)
  } else {
    // multiples of 90
    if (m1 === 0) {
      if (m2 > 0) {
        return PI / 2
      } else {
        return PI * 1.5
      }
    } else {
      if (m1 > 0) {
        return 0
      } else {
        return PI
      }
    }
  }
}

const getSlopeCoefficientBetweenTwoPoints = (x1, y1, x2, y2) => (y2 - y1) / (x2 - x1)

const getLineFunctionBetweenTwoPoints = (x1, y1, x2, y2) => (x) =>
  (((x - x1) * (y2 - y1)) / (x2 - x1)) + y1

const getPerpendicularLineFunctionPassingByPoint = (slope, x1, y1) =>
  (x) => (-1 / slope) * (x - x1) + y1

const getIntersectionBetween4Points = (x1, y1, x2, y2, x3, y3, x4, y4, decimals = DEFAULT_DECIMALS) => {
  // points {x1, y1} and {x2, y2} define the first line
  // points {x3, y3} and {x4, y4} define the second line
  let ua, denom = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1)
  if (denom === 0) {
    return [false, false]
  }
  ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denom
  return [
    round(x1 + ua * (x2 - x1), decimals),
    round(y1 + ua * (y2 - y1), decimals),
  ]
}

const getPointProjectionOnLine = (x1, y1, x2, y2, x3, y3) => {
  // points {x1, y1} and {x2, y2} define the line
  // point {x3, y3} is the point to project on the line
  let x4, y4
  const slopeLine1 = getSlopeCoefficientBetweenTwoPoints(x1, y1, x2, y2)
  if (slopeLine1 === 0) {
    x4 = x3
    y4 = y1
  } else if (isFinite(slopeLine1)) {
    const line2 = getPerpendicularLineFunctionPassingByPoint(slopeLine1, x3, y3)
    if (x3 === x1) {
      x4 = x2
    } else {
      x4 = x1
    }
    y4 = line2(x4)
  } else {
    x4 = x1
    y4 = y3
  }
  return getIntersectionBetween4Points(x1, y1, x2, y2, x3, y3, x4, y4)
}

I won't go into the complex details of what I wrote above. When you need this you'll know it.
But I can show a few examples of how I used some of it:

This free resize is quite simple:

This ratio + rotation resize is not:

For this one I projected mouse coords on the line defined by the two opposite image corners.

Same principle allowed me to do this too:

Last but not least, what about drawing a complex custom line on a canvas?
I already wrote the first of a series of articles about the complexity of drawing a really realistic line on a canvas. Simply put, there is no simple way to draw a realistic line.

The first obstacle is going from a series of lines drawn between mousemoves, to a nice curved line.

To fix that we need to stop using simple straight lines and use bezier curved lines instead.

Since ctx.quadraticCurveTo only allows simple flat line (and no custom tools), we need to calculate the bezier curve by hand:

const getQuadraticBezierCurvePointAtTime = (t, x1, y1, x2, y2, x3, y3, decimals = DEFAULT_DECIMALS) => ([
  round((1 - t) * (1 - t) * x1 + 2 * (1 - t) * t * x2 + t * t * x3, decimals), // curve x at time t
  round((1 - t) * (1 - t) * y1 + 2 * (1 - t) * t * y2 + t * t * y3, decimals), // curve y at time t
])

export const getQuadraticBezierCurveLength = (() => {
  let a, b, A, B, C, Sabc, A_2, A_32, C_2, BA
  return (x1, y1, x2, y2, x3, y3, decimals = DEFAULT_DECIMALS) => {
    a = {
      x: x1 - 2 * x2 + x3,
      y: y1 - 2 * y2 + y3,
    }
    b = {
      x: 2 * x2 - 2 * x1,
      y: 2 * y2 - 2 * y1,
    }
    A = 4 * (a.x * a.x + a.y * a.y)
    B = 4 * (a.x * b.x + a.y * b.y)
    C = b.x * b.x + b.y * b.y
    Sabc = 2 * M.sqrt(A+B+C)
    A_2 = M.sqrt(A)
    A_32 = 2 * A * A_2
    C_2 = 2 * M.sqrt(C)
    BA = B / A_2
    if (BA === -C_2 && a.x !=0 && a.y != 0 && b.x != 0 && b.y != 0) {
      BA += 1
    }
    return round((A_32 * Sabc + A_2 * B * (Sabc - C_2) + (4 * C * A - B * B) * M.log((2 * A_2 + BA + Sabc) / (BA + C_2))) / (4 * A_32), decimals)
  }
})()

With that you'll be able to draw a perfectly homogeneous line, adapting its size and alpha continuously.

And that's it, I shared with you all I have used until now in my previous projects.
I know not everyone needs this level of math in his/her code, but I hope some of you can put it to good use.

Please leave a comment if you liked it or If you have some more math functions to share!
See you

"Why nobody in using {insert your favourite feature} yet ?" Drawing on a Canvas - part 1

Alessandro Cipolletti — Wed, 20 Jan 2021 05:05:01 +0000

"Why nobody has already used this to do that?"

Hi everybody,

I bet I'm not the only one who has this type of thought. I've been in the web dev community for almost 12 years now, and I found myself thinking about this several times.

Disclaimer: my written English sucks, I'm trying to improve, please be gentle😇

Every time a new major web feature appears, like Canvas or WebAssembly, it's inevitable for me to start immagine all sort of new applications that are now possible. Then (almost) none of them come to life. Perhaps they are just less cool than how they seem to me, but I had nothing to lose and I developed one of them.

If I had to pick one web feature as my favourite, Canvas would win hands down.

IMHO it's the most underrated feature we have right now, and with this series of articles I want to share what I came up with until now, hoping more people will see canvas' potential as I do.

Because to me the real potential in Canvas isn't what we as developers can show to the users through it, but what users can give us back by using it. A Canvas on the web in the mobile era could really be the ultimate input for everything that's not a simple text, number or boolean.

My goal is to reach the most realistic drawing experience possible.

Spoiler:

Let's start from scratch. Canvas, we all know the basics:

// canvas creation
const myCanvas = document.createElement('canvas')
const ctx = myCanvas.getContext('2d')
myCanvas.width = 400
myCanvas.height = 150
container.appendChild(myCanvas)

// rect
ctx.fillStyle = 'rgb(255, 0, 0)'
ctx.fillRect(10, 10, 100, 80)

// circle
ctx.beginPath()
ctx.fillStyle = 'rgb(0, 0, 255)'
ctx.lineJoin = 'round'
ctx.lineCap = 'round'
ctx.arc(200, 50, 40, 0, 2 * Math.PI, true)
ctx.fill()

// image
ctx.drawImage(myImg, 280, 10, 80, 80)

We'll need these basics a lot, so why not encapsulate them (with a few more options):

const drawSquare = (destinationContext, x, y, alpha, size, color, rotation = 0) => {
  const halfSize = size / 2
  destinationContext.globalAlpha = alpha
  destinationContext.fillStyle = color
  if (rotation % 90) {
    destinationContext.translate(x, y)
    destinationContext.rotate(rotation)
    destinationContext.fillRect(-halfSize, -halfSize, size, size)
    destinationContext.rotate(-rotation)
    destinationContext.translate(-x, -y)
  } else {
    destinationContext.fillRect(x - halfSize, y - halfSize, size, size)
  }
}

const drawCircle = (destinationContext, x, y, alpha, size, color) => {
  destinationContext.beginPath()
  destinationContext.fillStyle = color
  destinationContext.globalAlpha = alpha
  destinationContext.lineJoin = 'round'
  destinationContext.lineCap = 'round'
  destinationContext.arc(x, y, size / 2, 0, 2 * Math.PI, true)
  destinationContext.fill()
}

const drawImage = (destinationContext, x, y, alpha, size, image, rotation = 0) => {
  const halfSize = size / 2
  destinationContext.globalAlpha = alpha
  if (rotation % 360) {
    destinationContext.translate(x, y)
    destinationContext.rotate(rotation)
    destinationContext.drawImage(image, -halfSize, -halfSize, size, size)
    destinationContext.rotate(-rotation)
    destinationContext.translate(-x, -y)
  } else {
    destinationContext.drawImage(image, Math.round(x - halfSize), Math.round(y - halfSize), size, size)
  }
}

And then use it:

drawSquare(ctx, 50, 150, 0.5, 80, 'rgb(255, 0, 0)', 30)
drawSquare(ctx, 110, 150, 0.7, 80, 'rgb(0, 255, 255)', -40)

drawCircle(ctx, 200, 150, 0.9, 50, 'rgb(255, 0, 0)')
drawCircle(ctx, 240, 150, 0.9, 60, 'rgb(255, 255, 0)')
drawCircle(ctx, 270, 150, 0.9, 70, 'rgb(0, 255, 255)')

drawImage(ctx, 350, 150, 0.6, 60, myImg, 45)

Note that I gave almost the same signature to all of them. This will be very useful later on.

So now we're ready to draw something on the screen on touch input (yeah I'm using touch input in this example, it would be almost the same with mouse down/move).

const defaultToolSize = 20
const currentToolColor = 'rgb(255, 0, 0)'

const handleTouch = (e) => {
  const x = e.touches[0].clientX - myCanvas.offsetLeft
  const y = e.touches[0].clientY - myCanvas.offsetTop
  const alpha = e.touches[0].force || 1
  drawCircle(ctx, x, y, alpha, defaultToolSize, currentToolColor)
}

myCanvas.addEventListener('touchstart', handleTouch)
myCanvas.addEventListener('touchmove', handleTouch)

Ok it's something. We can already see the skeleton of what will become ours line.

What if we would adapt the size based on the force pressure?

const defaultToolSize = 20
const sizeForceFactor = 2

const handleTouch = (e) => {
  const x = e.touches[0].clientX - myCanvas.offsetLeft
  const y = e.touches[0].clientY - myCanvas.offsetTop
  const force = e.touches[0].force || 1
  const size = defaultToolSize + (defaultToolSize * force)
  drawCircle(ctx, x, y, force size, currentToolColor)
}

And why not to adapt the size based on the touch move speed?

const sizeSpeedFactor = 5
const speedFactorLengthUnit = 200
let lastTouch = {
  x: -1,
  y: -1,
  force: 0,
}

// a bit of math
const round = (n, d = 0) => {
  const m = d ? Math.pow(10, d) : 1
  return Math.round(n * m) / m
}
const getDistanceBetweenTwoPoints = (x1, y1, x2, y2, decimals = 0) => 
  round(Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)), decimals)

const handleTouch = (e) => {
  const x = e.touches[0].clientX - myCanvas.offsetLeft
  const y = e.touches[0].clientY - myCanvas.offsetTop
  const force = e.touches[0].force || 1
  const distance = lastTouch.x >= 0 ? getDistanceBetweenTwoPoints(lastTouch.x, lastTouch.y, x, y) : 0
  const size = defaultToolSize +
    (defaultToolSize * force) +
    (defaultToolSize * sizeSpeedFactor * Math.min(distance / speedFactorLengthUnit, 1))

  drawCircle(ctx, x, y, force, size, currentToolColor)
  lastTouch = { x, y, force }
}

We could go further and use stylus inclination too to adapt size and alpha, but it's enough for now. I will treat those another time.

Starting from these simple point we will create a realistic line.

That's all for now, I really hope this topic could interest some of you. I spent a lot of time chasing the goal of reproducing a paper-like experience on the web, and I hope this could be useful somehow in the future.

Please leave a comment if you like the topic. I'd be happy to respond.

Thanks for your time! See you in the next post