{
  "path": "/posts/connecting-the-dots",
  "site": "at://did:plc:pans3xjam4khj7y54dx7gtfg/site.standard.publication/3mdqevmg6w32c",
  "$type": "site.standard.document",
  "title": "Connecting the Dots",
  "description": "Rebuilding Styles photo-editing feature from iOS 26 for the web.",
  "publishedAt": "2024-11-11T02:42:13.000Z",
  "textContent": "Interacting with the GPU\n\nAs the 2D slider has to interact with the GPU the expected output is an array with 2 elements, in the range [-1.0, 1.0], with no adjustment applied evaluating to 0.0.\nBut looking at the components the only value I have is the position of the cursor, and the client rect of the container.\nIn a 1D slider html output the desired value range. However reverse engineering it isn’t too difficult.\nLet’s consider the slider handle at the very start of a slider, it’ll output 0, and at the very end of the slider it’ll output 1.\nAssuming that the slider is at the very left-top of the page, and 100 pixels wide, the handle position goes from 0 to 100 px.\nIn two dimensions that’s (0, 0) -> (100, 0).\nSo to get the slider value I can normalize the handle position by dividing it by the width of the slider (100 in this case).\n\nTo get the output in the range [-1.0, 1.0], I can multiply the range by 2 and subtract 1.\nNow I gotta expand that slider to 2-dimensions.",
  "canonicalUrl": "https://afloat.boats/posts/connecting-the-dots"
}