2a:null 2b:["$","title",null,{"children":"Return to a square | Zihou Ng | Observable"}] 30:T73a,{ const form = html``; const formEl = d3.select(form).on("submit", e => e.preventDefault()); let cur = model.map(v.copy); const emit = val => render(ctx, val); emit(cur); let cancel = () => {}; const reconcile = diff => { if (diff > 0) { for (let i = 0; i < diff; i++) { cur.push(v.copy(params.centroid)); } } else { for (let i = 0; i < Math.abs(diff); i++) { if (i % 2 == 0) cur.pop(); else cur.shift(); } } }; const btnRand = d3.select(form.elements["random"]).on("click", e => { cancel(); const target = randBlob(); reconcile(target.length - cur.length); const old = cur.map(v.copy); cancel = tween(t => { cur.forEach((p, i) => v.mixN2(p, old[i], target[i], t)); emit(rectify(d3.polygonHull(cur))); }, 0.12, 1e-3); }); const btnAntonia = d3.select(form.elements["reset"]).on("click", e => { cancel(); const target = model; reconcile(target.length - cur.length); const old = cur.map(v.copy); cancel = tween(t => { cur.forEach((p, i) => v.mixN2(p, old[i], target[i], t)); emit(cur); }, 0.1, 1e-3); }); const canvas = d3.select(ctx.canvas); canvas.call( d3.drag() .on("start", e => { cancel(); cur = params.square.map(v.copy); }) .on("drag", e => { cur.push([e.x,e.y]); cur = rectify(d3.polygonHull(cur)); emit(cur); }) ); invalidation.then(() => { formEl.on("submit", null); btnRand.on("click", null); btnAntonia.on("click", null); canvas.on(".drag", null); }); return form; }31:T547,md`--- ## About The original _"Return to Square"_ is one of the best works of the early Japanese computer art collective CTG (Computer Technique Group), by members Masao Komura and Kunio Yamanaka in 1968. ${html`

Return to Square. Idea by Masao Komura, programme by Kunio Yamanaka (CTG).
Source: V&A

`} The drawing rule is simple, a smooth geometrical transition from an inner 45° rotated square to the silhouette of a woman, and finally to the outer square. The resulting moire effect, combined with the overlapping lines, captured the subtle elegance of a woman. According to the [book](https://books.google.co.jp/books?id=sDcvt6Z-z_IC) by Kazufumi Oizumi, the woman profile was traced from a photo in the _Vogue 1964.01.15, p71_, took by photographer William Klein. ${html`

Vogue, 1964.01.15, p71. By William Klein.
Source: Vogue Archive

`} `32:T9a8,render = { const { margin, centroid, diags, square, large, bg, fg } = params; const outerBounds = [[0,1],[0,0],[1,0],[1,1]].map(p => v.mulN(null, p, large)); const buf = [0,0]; const outer = new Float32Array(model.length * 2); const inner = new Float32Array(model.length * 2); return (ctx, pts) => { ctx.fillStyle = bg; ctx.fillRect(0, 0, large + margin, large + margin); ctx.save(); ctx.translate(margin / 2, margin / 2); ctx.beginPath(); ctx.moveTo(...outerBounds[0]); for (let i = 1; i < 4; i++) { ctx.lineTo(...outerBounds[i]); } ctx.closePath(); ctx.strokeStyle = fg; ctx.stroke(); ctx.beginPath(); ctx.moveTo(...square[0]); for (let i = 1; i < 4; i++) { ctx.lineTo(...square[i]); } ctx.closePath(); ctx.strokeStyle = fg; ctx.stroke(); const n = pts.length; // for (let i = 0; i < n; i++) { // ctx.beginPath(); // ctx.arc(...pts[i], 5, 0, Math.PI * 2); // ctx.fillStyle = `hsl(${i/n*360},50%,50%)`; // ctx.fill(); // } for (let k = 0; k < n; k++) { const p = pts[k]; const i = quadrantOf(p, centroid); const side = sideOfLine(p, centroid, diags[i]); const j = side == 1 ? i : math.mod(i - 1, 4); const t = intersect(centroid, p, square[i], square[math.mod(i-1,4)]); v.mixNS2(inner, centroid, p, t, k * 2); const u = intersect(centroid, p, outerBounds[j], outerBounds[math.mod(j-1,4)]); v.mixNS2(outer, centroid, p, u, k * 2); } for (let k = 0; k < params.outer; k++) { const t = k / params.outer; ctx.beginPath(); ctx.moveTo(math.mix(pts[0][0], outer[0], t), math.mix(pts[0][1], outer[1], t)); for (let i = 1; i < n; i++) { ctx.lineTo(math.mix(pts[i][0], outer[i * 2], t), math.mix(pts[i][1], outer[i * 2 + 1], t)); } ctx.closePath(); ctx.strokeStyle = fg; ctx.stroke(); } for (let k = 0; k < params.inner; k++) { const t = k / params.inner; ctx.beginPath(); ctx.moveTo(math.mix(pts[0][0], inner[0], t), math.mix(pts[0][1], inner[1], t)); for (let i = 1; i < n; i++) { ctx.lineTo(math.mix(pts[i][0], inner[i * 2], t), math.mix(pts[i][1], inner[i * 2 + 1], t)); } ctx.closePath(); ctx.strokeStyle = fg; ctx.stroke(); } ctx.restore(); }; }33:T999,model = [[-0.01597,-0.28258],[-0.03170,-0.29202],[-0.02960,-0.29621],[-0.01073,-0.31088],[-0.00549,-0.31508],[0.02281,-0.32661],[0.03749,-0.32346],[0.04168,-0.31822],[0.05006,-0.30460],[0.05531,-0.30460],[0.06788,-0.30564],[0.09095,-0.31088],[0.12554,-0.30460],[0.14755,-0.29097],[0.17166,-0.27629],[0.19472,-0.26371],[0.21673,-0.24485],[0.22600,-0.22600],[0.23665,-0.21864],[0.24608,-0.19034],[0.25656,-0.17566],[0.25971,-0.15575],[0.26180,-0.14422],[0.26285,-0.13793],[0.26914,-0.13478],[0.27124,-0.12745],[0.27124,-0.11487],[0.25761,-0.08866],[0.24818,-0.07294],[0.25132,-0.06455],[0.24608,-0.05617],[0.24503,-0.04673],[0.23245,-0.01738],[0.22826,-0.00480],[0.22407,0.00358],[0.21988,0.01511],[0.20939,0.02979],[0.20625,0.04027],[0.18843,0.07591],[0.17795,0.08639],[0.16222,0.09897],[0.14545,0.08744],[0.13602,0.08534],[0.12658,0.07591],[0.12239,0.07591],[0.12239,0.08325],[0.11820,0.09058],[0.12868,0.10631],[0.13916,0.11993],[0.13400,0.13400],[0.13497,0.14299],[0.12973,0.14823],[0.11715,0.15348],[0.10877,0.15243],[0.10248,0.16081],[0.09514,0.16605],[0.09095,0.15977],[0.08466,0.16710],[0.09723,0.20065],[0.10562,0.22580],[0.11086,0.25201],[0.11296,0.27507],[0.11715,0.29918],[0.11505,0.32643],[0.09095,0.33587],[0.06684,0.34216],[0.04168,0.34740],[0.01757,0.35054],[-0.00968,0.35159],[-0.03589,0.35054],[-0.06105,0.34740],[-0.08620,0.34425],[-0.11241,0.33691],[-0.13233,0.32958],[-0.12394,0.32329],[-0.11346,0.29499],[-0.10193,0.28031],[-0.08725,0.26564],[-0.08411,0.25096],[-0.09773,0.20065],[-0.10193,0.17444],[-0.10926,0.15243],[-0.11451,0.13880],[-0.12000,0.12000],[-0.12184,0.10316],[-0.13023,0.10316],[-0.16272,0.10735],[-0.18998,0.10526],[-0.20360,0.10211],[-0.20989,0.09582],[-0.21723,0.08429],[-0.21723,0.06543],[-0.21409,0.05285],[-0.21618,0.04761],[-0.22562,0.04446],[-0.22562,0.04236],[-0.22457,0.03293],[-0.22142,0.02769],[-0.20570,0.01406],[-0.22876,0.01092],[-0.21828,-0.00795],[-0.22247,-0.01738],[-0.24868,-0.03311],[-0.25077,-0.03835],[-0.24973,-0.04988],[-0.24448,-0.05302],[-0.22876,-0.07189],[-0.21618,-0.08761],[-0.21409,-0.09705],[-0.20780,-0.10019],[-0.20256,-0.10963],[-0.20256,-0.11801],[-0.20360,-0.12430],[-0.20256,-0.13374],[-0.20046,-0.14841],[-0.19836,-0.15889],[-0.19522,-0.16833],[-0.18400,-0.18400],[-0.18264,-0.19873],[-0.17530,-0.21340],[-0.15643,-0.22388],[-0.15539,-0.23646],[-0.14700,-0.25009],[-0.12708,-0.26476],[-0.10297,-0.27525],[-0.05790,-0.28258]].map(p => v.mulN(null, v.addN2([], p, .5), params.large))34:[{"id":"cf739ab727d2afce5cf16ccba9311b1520e5d5315fa2cec5889ac73b3ef3bdf10da1c1cd5876edd13392a30e838ffbfdf8ddc7bde4dd3d438e4c5922c366b9de","href":"https://static.observableusercontent.com/files/cf739ab727d2afce5cf16ccba9311b1520e5d5315fa2cec5889ac73b3ef3bdf10da1c1cd5876edd13392a30e838ffbfdf8ddc7bde4dd3d438e4c5922c366b9de","name":"The New Savvy Seve of Hair.jpg","type":"image/jpeg","lastModified":1602754086845.116,"size":95684}] 2e:{"id":"7440286d230fc74b","slug":"return-to-a-square","title":"Return to a square","thumbnail":"aa02f727420aedfc696555f6aa77f0cde8e2534b6dcf08ec4e8337003c046607","access_level":"public","create_time":"$D2020-10-12T04:23:47.140Z","update_time":"$D2020-10-17T04:56:29.347Z","view_time":null,"first_public_time":"$D2020-10-15T09:54:45.323Z","fork":false,"stars":34,"starred":false,"owner":{"type":"team","id":"7fad80bf128915e9","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":"starter_2024"},"version":1989,"publish_version":1989,"role":null,"authored":false,"authors":[{"type":"individual","id":"dbb85afd665c9e5e","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":null}],"members":[{"type":"individual","id":"dbb85afd665c9e5e","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":5,"collection":{"id":"6ad523ac4dcb4b45","slug":"instagram-shares","title":"Observable's Instagram Shares","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Return to a square","cells":[{"id":0,"value":"md`# Return to a square`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1340,"value":"md`Recreating (with some randomness) the art work [Return to Square](https://collections.vam.ac.uk/item/O1034087/return-to-square-lithograph/) by Masao Komura and Kunio Yamanaka from [CTG (Computer Technique Group)](http://www.systemken.com/company_eng.html) in 1968.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":376,"value":"viewof ctx = {\n const { large, margin } = params;\n const ctx = DOM.context2d(large + margin, large + margin);\n ctx.canvas.value = ctx;\n \n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1794,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":138,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1926,"value":"md`---\n## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1147,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1325,"value":"rectify = {\n const { centroid, diags, cross } = params;\n const buf = [0,0];\n \n return pts => {\n const d = v.sub2(buf, centroid, d3.polygonCentroid(pts));\n pts.forEach(p => v.add2(null, p, d));\n\n const n = pts.length;\n for (let i = 0; i < n; i++) {\n const p0 = pts[math.mod(i - 1, n)], p1 = pts[i];\n for (let j = 0; j < 4; j++) {\n const t = intersect(p0, p1, centroid, diags[j]);\n if (t < 0 || t > 1) continue;\n const u = intersect(centroid, diags[j], p0, p1);\n if (u < 0) continue;\n\n pts.push(v.mixN2([], p0, p1, t));\n }\n for (let j = 0; j < 4; j++) {\n const t = intersect(p0, p1, centroid, cross[j]);\n if (t < 0 || t > 1) continue;\n const u = intersect(centroid, cross[j], p0, p1);\n if (u < 0) continue;\n\n pts.push(v.mixN2([], p0, p1, t));\n }\n }\n\n return pts.sort(angleComparator(params.centroid));\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1433,"value":"randBlob = {\n const randN = d3.randomUniform(3, 80);\n return () => {\n const pts = Array.from({ length: randN() }, randPoint);\n return rectify(d3.polygonHull(pts));\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1552,"value":"randPoint = {\n const randA = d3.randomUniform(0, Math.PI * 2);\n // const randR = d3.randomUniform(0, 1);\n const randR = d3.randomExponential(3);\n const radius = params.large * .5;\n \n return () => {\n const r = randR() * radius, a = randA();\n const p = [r * Math.cos(a), r * Math.sin(a)];\n return v.add2(p, params.centroid, p);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1261,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":125,"value":"params = {\n const large = Math.min(500, width), small = 10 / Math.sqrt(2);\n const centroid = [large / 2, large / 2];\n \n return {\n large, small, centroid,\n \n diags: [[1,1],[-1,1],[-1,-1],[1,-1]].map(p => v.add2(p, centroid, p)),\n cross: [[0,1],[1,0],[0,-1],[-1,0]].map(p => v.add2(p, centroid, p)),\n square: [[0,-small],[small,0],[0,small],[-small,0]].map(o => v.sub2(o, centroid, o)),\n \n margin: 1,\n bg: 'hsl(0,0%,98%)',\n fg: 'hsl(0,0%,50%)',\n outer: 10,\n inner: 50\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":90,"value":"md`### Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":168,"value":"intersect = {\n // specilized function to compute intersect of two line segment, assuming an intersection always happens\n // return the coefficient on the first line\n // see https://stackoverflow.com/questions/563198/how-do-you-detect-where-two-line-segments-intersect\n const r = [], s = [], qp = [];\n \n return (p0, p1, q0, q1) => {\n v.sub(r, p1, p0);\n v.sub(s, q1, q0);\n v.sub(qp, q0, p0);\n return v.cross2(qp, s) / v.cross2(r, s);\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":601,"value":"quadrantOf = {\n const cp = [0,0];\n return (p, c) => {\n v.sub2(cp, p, c);\n if (cp[1] >= 0) \n return cp[0] >= 0 ? 0 : 1;\n else\n return cp[0] >= 0 ? 3 : 2;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":198,"value":"sideOfLine = {\n const ab = [], ap = [];\n return (p, a, b) => {\n v.sub(ab, b, a);\n v.sub(ap, p, a);\n return Math.sign(v.cross2(ab, ap));\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":543,"value":"distToLine = {\n const ab = [0,0], ap = [0,0], n = [0,0];\n return (p, a, b) => {\n v.sub(ab, b, a);\n v.sub(ap, p, a);\n v.normalize(null, v.perpendicularCCW(n, ab));\n return Math.abs(v.dot2(ap, n));\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1453,"value":"angleComparator = (c, u = v.Y2) => {\n const buf = v.empty(c);\n return (a, b) => {\n const a1 = v.angleBetween2(v.sub2(buf,a,c), u);\n const a2 = v.angleBetween2(v.sub2(buf,b,c), u);\n return a1 < a2 ? -1 : 1;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1371,"value":"tween = (f, speed = 0.08, eps = 1e-4) => {\n let t = 0;\n let handle = requestAnimationFrame(function frame() {\n f(t);\n t += (1 - t) * speed;\n \n if (Math.abs(1 - t) < eps) return;\n \n handle = requestAnimationFrame(frame);\n });\n\n return () => cancelAnimationFrame(handle);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":910,"value":"math = {\n const norm = (x, a, b) => (x - a) / (b - a);\n \n return {\n norm,\n mod: (x, m) => (x % m + m) % m,\n fit: (x, a, b, c, d) => c + (d - c) * norm(x, a, b),\n mix: (a, b, t) => a + (b - a) * t,\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"v = require('https://bundle.run/@thi.ng/vectors@4.7.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"md`---\n## References\n\n* [Return to Square B | Database of Digital Art](http://dada.compart-bremen.de/item/artwork/230)\n* [Return to Square | | V&A Search the Collections](https://collections.vam.ac.uk/item/O1034087/return-to-square-lithograph/)\n* [CTGの代表的４作品の再現によるアルゴリズムの解明 (pdf)](http://www.art-science.org/journal/v12n3/v12n3pp152/artsci-v12n3pp152.pdf)\n* [コンピュータ・アートの創生 CTGの軌跡と思想 1966-1969｜書籍出版｜NTT出版](https://www.nttpub.co.jp/search/books/detail/100002367)\n* [\"Goodbye Computer Art\"; Interview with Haruki Tsuchiya, by Jung-Yeon Ma, Tokyo University of the Arts, 2015](http://www.systemken.com/company_eng.html)\n * [CTG（コンピュータ・テクニック・グループ）槌屋治紀インタビュー「さようなら、コンピュータアート」](http://www.systemken.com/ctg.html)\n* [ICC ONLINE | ARCHIVE | 2005 | Possible Futures : Japanese postwar art and technology | Works](https://www.ntticc.or.jp/en/feature/2005/PossibleFutures/Works/index.html)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2f:"$2e:body"