31:[{"id":"947f7368e2799ed102749f6c023ca28d939584386b3edf2e7f4702f2a3b542da06d530646a28357626522dac6e649d4e4f761fdb1731b51fc46dee7c47f54bd1","href":"https://static.observableusercontent.com/files/947f7368e2799ed102749f6c023ca28d939584386b3edf2e7f4702f2a3b542da06d530646a28357626522dac6e649d4e4f761fdb1731b51fc46dee7c47f54bd1","name":"220E834F53323BC425.jpeg","type":"image/jpeg","lastModified":1651160640201.861,"size":94660},{"id":"7b2f9e47093850933b090aa6c126649200fd41c8603e487be936b26ab042f34bef47b010b1b84d0259fe2e17ff62c1f1aebcc4c5c88ef3df0e48b39142949242","href":"https://static.observableusercontent.com/files/7b2f9e47093850933b090aa6c126649200fd41c8603e487be936b26ab042f34bef47b010b1b84d0259fe2e17ff62c1f1aebcc4c5c88ef3df0e48b39142949242","name":"신라바둑돌.png","type":"image/png","lastModified":1651129215547.929,"size":922556},{"id":"147d44b95c1bbd088a9522fcf95e031965987360b2d4aae3d9869d86d4b7069a78a953af7623471503e3ee2fd75875d7b29ab974ef5a9e61077753074a84c6eb","href":"https://static.observableusercontent.com/files/147d44b95c1bbd088a9522fcf95e031965987360b2d4aae3d9869d86d4b7069a78a953af7623471503e3ee2fd75875d7b29ab974ef5a9e61077753074a84c6eb","name":"SCR-20220428-w6i.jpeg","type":"image/jpeg","lastModified":1651160588103.073,"size":327575}] 2f:{"title":"신라 바둑돌 명암 스펙트럼","cells":[{"id":0,"value":"md`# 신라 바둑돌 명암 스펙트럼\n\n경주 고분에서 자갈돌로 된 바둑돌이 발굴되어 1,500년 전 바둑돌로 실제 바둑을 둘 수 있는지 확인해보는 흥미로운 대국 이벤트가 열렸습니다. https://youtu.be/Pqrc24P7A5Y?t=1030
\n그런데 돌이 명확하게 흑백으로 나뉘지는 않아 흑백돌을 구분할 수 있는지 궁금합니다. 그래서 바둑돌을 명암별로 정렬해봤습니다.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"## 바둑돌 원본\n영상 캡쳐하여 대비를 높였습니다.","pinned":false,"hidden":false,"mode":"md"},{"id":374,"value":"image","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"## 바둑돌 추출\n격자에 따라 이미지를 나누고 가운데 돌이 놓이는 부분 평균 색상을 추출. 나무색으로 돌보다 채도가 높은 빈 집을 제거했습니다.","pinned":false,"hidden":false,"mode":"md"},{"id":472,"value":"html`

${realStones.map(\n (s) => s.stone\n)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"## 명암에 따라 정렬\n명암이 연속적이라 돌의 흑백을 명확히 구분하기 어렵습니다. 정말 흑백돌로 사용된건지 의아합니다.\n정말 흑백돌로 사용하려고 했다면 중간 계조의 1/3 정도를 골라냈을 것 같습니다. 주변 개천에서 이런 자갈돌을 구하는 게 어려운 일도 아니었을테니까요.\n돌의 명암은 단순하게 중심에서 10픽셀 원 안의 픽셀 평균을 구했습니다. 돌이 정확히 가운데 놓여있진 않아 부정확하지만 목적에는 부합하니 이정도만 하려고요. :) ","pinned":false,"hidden":false,"mode":"md"},{"id":431,"value":"html`

${[...realStones]\n .sort((a, b) => d3.descending(a.hsl.l, b.hsl.l))\n .map((s) => stone(s.x, s.y))}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"## 용강동 고분 출토 바둑돌\n용강동 고분에서 출토된 바둑돌은 백돌이 색깔 뿐 아니라 재질, 두께에서 확연히 차이가 납니다. 혹시 백돌을 찾지 못하고 납작한 흑돌만을 흑백 구분한 건 아닐까 싶기도 하네요.\nhttps://m.khan.co.kr/culture/culture-general/article/202112070500001","pinned":false,"hidden":false,"mode":"md"},{"id":532,"value":"FileAttachment(\"SCR-20220428-w6i.jpeg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"경주 박물관 전시물 https://toptrip.tistory.com/65?category=544017","pinned":false,"hidden":false,"mode":"md"},{"id":533,"value":"FileAttachment(\"220E834F53323BC425.jpeg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"## Functions","pinned":false,"hidden":false,"mode":"md"},{"id":591,"value":"### 빈집","pinned":false,"hidden":false,"mode":"md"},{"id":438,"value":"stone(10, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":586,"value":"d3.hsl(stoneColor(stone(10, 1)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":596,"value":"### 흑돌","pinned":false,"hidden":false,"mode":"md"},{"id":278,"value":"stone(10, 3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":251,"value":"d3.hsl(stoneColor(stone(10, 3)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":601,"value":"### 백돌","pinned":false,"hidden":false,"mode":"md"},{"id":401,"value":"stone(12, 14)","pinned":true,"hidden":false,"mode":"ojs"},{"id":407,"value":"d3.hsl(stoneColor(stone(12, 14)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"viewof image = imageInput({\n crossOrigin: \"anonymous\",\n initialUrl: await FileAttachment(\"신라바둑돌.png\").url()\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"function stone(x, y) {\n // 원본 바둑판 이미지에서 격자에 따라 돌이 놓이는 부분 잘라냄\n const grid = { width: 913, height: 953 };\n const offx = 19;\n const offy = 20;\n const width = image.naturalWidth;\n const height = image.naturalHeight;\n const w = grid.width / 18;\n const h = grid.height / 18;\n\n const div = d3.create(\"div\");\n const canvas = div.append(\"canvas\").attr(\"width\", w).attr(\"height\", h);\n const ctx = canvas.node().getContext(\"2d\");\n\n ctx.drawImage(\n image,\n Math.round(offx / 2 + x * w),\n Math.round(offy / 2 + y * h),\n Math.round(w),\n Math.round(h),\n 0,\n 0,\n Math.round(w),\n Math.round(h)\n );\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"stoneColor = (canvasObj) => {\n // 돌이 놓이는 중심 부분 평균 색상을 추출\n const canvas = d3.select(canvasObj).select(\"canvas\").node();\n const context = canvas.getContext(\"2d\");\n const w = canvas.width;\n const h = canvas.height;\n const { data } = context.getImageData(0, 0, w, h);\n let centerData = getCenterData(data, w, h, 10);\n // let centerData = filterStoneData(data, w, h);\n return getColor(centerData);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"function getCenterData(data, w, h, r = 10) {\n const centerData = [];\n let index = 0;\n for (let y = 0; y < h; y++) {\n for (let x = 0; x < w; x++) {\n const dataBlock = data.slice(index, index + 4);\n if ((x - w / 2) ** 2 + (y - h / 2) ** 2 <= r ** 2)\n centerData.push(dataBlock);\n index += 4;\n }\n }\n return centerData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"function filterStoneData(data, w, h, r = 10) {\n const centerData = [];\n let index = 0;\n for (let y = 0; y < h; y++) {\n for (let x = 0; x < w; x++) {\n const dataBlock = data.slice(index, index + 4);\n if ((x - w / 2) ** 2 + (y - h / 2) ** 2 <= r ** 2) {\n // 채도 높은 나무 영역 제외\n const color = `rgb(${dataBlock[0]},${dataBlock[1]},${dataBlock[2]})`;\n if (d3.hsl(color).s < 0.2) centerData.push(dataBlock);\n }\n index += 4;\n }\n }\n return centerData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"function getColor(data) {\n let r = 0,\n g = 0,\n b = 0,\n a = 0;\n\n data.forEach((d) => {\n r += rgb_lrgb1(d[0] / 255);\n g += rgb_lrgb1(d[1] / 255);\n b += rgb_lrgb1(d[2] / 255);\n a += d[3] / 255;\n });\n return `#${Math.round(lrgb_rgb1(r / a) * 255)\n .toString(16)\n .padStart(2, \"0\")}${Math.round(lrgb_rgb1(g / a) * 255)\n .toString(16)\n .padStart(2, \"0\")}${Math.round(lrgb_rgb1(b / a) * 255)\n .toString(16)\n .padStart(2, \"0\")}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"stones = {\n // 19x19 바둑판에 놓인 돌 (빈집 포함)\n const stones = [];\n let index = 0;\n for (let y = 0; y < 19; y++) {\n for (let x = 0; x < 19; x++) {\n stones.push({ index, x, y, stone: stone(x, y) });\n index++;\n }\n }\n const newStones = stones.map((s) => {\n const color = stoneColor(s.stone);\n const hsl = d3.hsl(color);\n return { ...s, color, hsl };\n });\n return newStones;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"realStones = stones.filter((d) => d.hsl.s < 0.2).slice(0, -3)\n// 채도로 빈집 걸러냄. 나무색이라 돌보다 채도가 높음","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"function rgb_lrgb1(v) {\n return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"function lrgb_rgb1(v) {\n return v <= 0.0031308 ? 12.92 * v : 1.055 * (v ** (1 / 2.4)) - 0.055;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import {imageInput} from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}