3e:null 3f:["$","title",null,{"children":"2D SDF （Part II） (p5.js) | xiaoyang he's Workspace | Observable"}] 45:[] 43:{"id":"ef2e120f2f4dd558","slug":null,"title":"2D SDF （Part II） (p5.js)","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-12-08T06:21:55.853Z","update_time":"$D2023-12-08T13:52:25.927Z","view_time":null,"first_public_time":"$D2023-12-08T06:21:55.853Z","has_unpublished_edits":null,"fork":{"id":"df38094bc9089946","slug":"processing-p5-js","title":"Processing (p5.js)","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1dec3dcd05efa313","login":"shaun8149","name":"xiaoyang he's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/5ef00b3ca87b6447a7331d004b7eb71109c8a4d483f71c6bddc0513a2f4d82ec","tier":"starter_2024","bio":"Generative Artist.","following":false},"version":234,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cd2606b129088b51","login":"xiaoyang-he","name":"xiaoyang he","avatar_url":"https://avatars-next.observableusercontent.com/e6be05b5751c0cbf61d6f6f50fcac32fcfc43a405e4de7fae282f9c32f7f4289","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"1dec3dcd05efa313","login":"shaun8149","name":"xiaoyang he's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/5ef00b3ca87b6447a7331d004b7eb71109c8a4d483f71c6bddc0513a2f4d82ec","tier":"starter_2024","role":"editor"},{"type":"individual","id":"cd2606b129088b51","login":"xiaoyang-he","name":"xiaoyang he","avatar_url":"https://avatars-next.observableusercontent.com/e6be05b5751c0cbf61d6f6f50fcac32fcfc43a405e4de7fae282f9c32f7f4289","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"2D SDF （Part II） (p5.js)","cells":[{"id":0,"value":"# 2D SDF （Part II） (p5.js) \n\nGet started with creative coding. Learn more in the [tutorial](https://observablehq.com/@tmcw/p5).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"import {p5} from \"@tmcw/p5\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"R = (a = 1) => Math.random() * a;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"L = (x, y) => (x * x + y * y) ** 0.5;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"clamp1=(value, min, max) =>{\n return Math.max(Math.min(value, max), min);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"len2=(a)=> {\n return lenSq2(a) ** 0.5;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"scale2=(a, s)=> {\n return [a[0] * s, a[1] * s];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"norm2=(a) =>{ return scale2(a, 1 / len2(a)); }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"add2=(a, b) =>{ return [a[0] + b[0], a[1] + b[1]]; }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"dot2=(a, b)=> {\n return a[0] * b[0] + a[1] * b[1];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"sub2=(a, b)=> {\n return [a[0] - b[0], a[1] - b[1]];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"lenSq2=(a)=> {\n return a[0] ** 2 + a[1] ** 2;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"abs2=(a)=> {\n return [Math.abs(a[0]), Math.abs(a[1])];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"mul2=(a, b)=> { return [a[0] * b[0], a[1] * b[1]]; }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"rot2=(a)=> {\n return [Math.cos(a), -Math.sin(a), Math.sin(a), Math.cos(a)];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"trans2=(m, a)=> {\n return [m[0] * a[0] + m[2] * a[1], m[1] * a[0] + m[3] * a[1]];\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"max2=(a, b)=> {\n return [Math.max(a[0], b[0]), Math.max(a[1], b[1])];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"min2=(a, b)=> {\n return [Math.min(a[0], b[0]), Math.min(a[1], b[1])];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"draw_circle=([x, y], r, c,sketch)=> {\n sketch.noStroke();\n sketch.fill(c);\n sketch.circle(((x + 1) * sketch.width) / 2, ((y + 1) * sketch.width) / 2, r / 2);\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"sdfp1 = (p) => {\n let m = rot2(Math.PI / 4);\n let n = [1, 0, 2, 0.33];\n p = sub2(p, [0.8, 0.2]);\n let diff = trans2(m, p);\n return sdSegment(diff, [-0.5, 0], [0.5, 0]) - 0.1;\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"**[1]线段形状**\n\n在这个第二部分，我们会比较多的使用向量辅助函数以及矩阵来对图形进行变换。\n\n在线段部分，我们使用了旋转和切变\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":89,"value":" sdSegment = (p, a, b) => {\n let pa = sub2(p, a);\n let ba = sub2(b, a);\n let hbar = dot2(pa, ba) / dot2(ba, ba);\n let h = clamp1(hbar, 0, 1);\n let d = len2(sub2(pa, scale2(ba, h)));\n return d;\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"p5(sketch => {\nsketch.setup = () => {\n sketch.createCanvas(600, 600);\n sketch.background(\"#432\");\n };\n\n sketch.draw = () => {\n for (let k = 0; k < 1000; k++) {\n let p = [R(2) - 1, R(2) - 1];\n let d = sdfp1(p);\n let col = \"#000\";\n if (d < -0.01) col = \"#06c\";\n else if (d > 0.01) col = \"#f80\";\n else col = \"#f5f5f5\";\n draw_circle(p, 2, col,sketch);\n }\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"下面是切变","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":123,"value":"sdfp2 = (p) => {\n let m = rot2(Math.PI / 4);\n let n = [1, 0, 2, 0.33];\n p = sub2(p, [0.8, 0.2]);\n let diff = trans2(n, p);\n return sdSegment(diff, [-0.5, 0], [0.5, 0]) - 0.1;\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"p5(sketch => {\nsketch.setup = () => {\n sketch.createCanvas(600, 600);\n sketch.background(\"#432\");\n };\n\n sketch.draw = () => {\n for (let k = 0; k < 1000; k++) {\n let p = [R(2) - 1, R(2) - 1];\n let d = sdfp2(p);\n let col = \"#000\";\n if (d < -0.01) col = \"#06c\";\n else if (d > 0.01) col = \"#f80\";\n else col = \"#f5f5f5\";\n draw_circle(p, 2, col,sketch);\n }\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":" sdRhobus = (p, b) => {\n let q = abs2(p);\n let a = [0, b[1]];\n let c = [b[0], 0];\n let qa = sub2(q, a);\n let ca = sub2(c, a);\n let hbar = dot2(qa, ca) / dot2(ca, ca);\n let h = clamp1(hbar, 0, 1);\n let d = len2(sub2(qa, scale2(ca, h)));\n let sign = Math.sign(q[0] * b[1] + q[1] * b[0] - b[0] * b[1]);\n return d * sign;\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"**[2]菱形**\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":133,"value":"sdfp3 = (p) => {\n // let m = rot2(Math.PI / 4);\n // let n = [1, 0, 2, 0.33];\n // let p = sub2(p, [0.8, 0.2]);\n // let diff = trans2(m, p);\n return sdRhobus(p, [0.75, .5]) - 0.1;\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"p5(sketch => {\nsketch.setup = () => {\n sketch.createCanvas(600, 600);\n sketch.background(\"#432\");\n };\n\n sketch.draw = () => {\n for (let k = 0; k < 1000; k++) {\n let p = [R(2) - 1, R(2) - 1];\n let d = sdfp3(p);\n let col = \"#000\";\n if (d < -0.01) col = \"#06c\";\n else if (d > 0.01) col = \"#f80\";\n else col = \"#f5f5f5\";\n draw_circle(p, 2, col,sketch);\n }\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"菱形的旋转","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":145,"value":"sdfp4 = (p) => {\n let m = rot2(Math.PI / 6);\n // let n = [1, 0, 2, 0.33];\n // let p = sub2(p, [0.8, 0.2]);\n let diff = trans2(m, p);\n return sdRhobus(diff, [0.75, .5]) - 0.1;\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"p5(sketch => {\nsketch.setup = () => {\n sketch.createCanvas(600, 600);\n sketch.background(\"#432\");\n };\n\n sketch.draw = () => {\n for (let k = 0; k < 1000; k++) {\n let p = [R(2) - 1, R(2) - 1];\n let d = sdfp4(p);\n let col = \"#000\";\n if (d < -0.01) col = \"#06c\";\n else if (d > 0.01) col = \"#f80\";\n else col = \"#f5f5f5\";\n draw_circle(p, 2, col,sketch);\n }\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"位移和切变","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":154,"value":"sdfp5 = (p) => {\n //let m = rot2(Math.PI / 6);\n let n = [1, 0, 2, .5];\n p = sub2(p, [0.8, 0.2]);\n let diff = trans2(n, p);\n return sdRhobus(diff, [0.75, .5]) - 0.1;\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"p5(sketch => {\nsketch.setup = () => {\n sketch.createCanvas(600, 600);\n sketch.background(\"#432\");\n };\n\n sketch.draw = () => {\n for (let k = 0; k < 1000; k++) {\n let p = [R(2) - 1, R(2) - 1];\n let d = sdfp5(p);\n let col = \"#000\";\n if (d < -0.01) col = \"#06c\";\n else if (d > 0.01) col = \"#f80\";\n else col = \"#f5f5f5\";\n draw_circle(p, 2, col,sketch);\n }\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":" sdEtriangle = (p,r)=> {\n p[1]=-p[1];\n let k = Math.sqrt(3);\n p[0] = Math.abs(p[0])-r/2;\n p[1]=p[1]+ r/k/2;\n ;\n if (k * p[1] + p[0] > 0) {\n p = [(p[0] - k * p[1]) / 2, (-k * p[0] - p[1]) / 2];\n }\n p[0]=p[0]-clamp1(p[0],-r,0);\n return -len2(p) * Math.sign(p[1]);\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"**[3]等边三角形**\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"值得注意的是，从等边三角形开始，很多的对称图形实现都需要对传递的坐标进行变换，因此，为了安全考虑，我们需要传递原始坐标的副本","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":171,"value":"sdfp6 = (p) => {\n return sdEtriangle(p.slice(),0.5);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"p5(sketch => {\nsketch.setup = () => {\n sketch.createCanvas(600, 600);\n sketch.background(\"#432\");\n };\n\n sketch.draw = () => {\n for (let k = 0; k < 1000; k++) {\n let p = [R(2) - 1, R(2) - 1];\n let d = sdfp6(p);\n let col = \"#000\";\n if (d < -0.01) col = \"#06c\";\n else if (d > 0.01) col = \"#f80\";\n else col = \"#f5f5f5\";\n draw_circle(p, 2, col,sketch);\n }\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"等腰三角形","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":188,"value":"sdTriangleI = (p, q) => {\n p[0] = Math.abs(p[0]);\n let hbar = dot2(p, q) / dot2(q, q);\n let h = clamp1(hbar, 0, 1);\n let a = sub2(p, mul2(q, [h, h]));\n\n let h2 = clamp1(p[0] / q[0], 0, 1);\n let b = sub2(p, mul2(q, [h2, 1]));\n let k = Math.sign(q[1]);\n\n let da = dot2(a, a);\n let db = dot2(b, b);\n let s1 = k * (p[0] * q[1] - p[1] * q[0]);\n let s2 = k * (p[1] - q[1]);\n let d = Math.min(da, db);\n let s = Math.max(s1, s2);\n\n return Math.sqrt(d) * Math.sign(s);\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"等腰三角形参数的q，其中q[0]是底边长度的一半，q[1]是高，顶点位于[0,0]点","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":192,"value":"sdfp7 = (p) => {\n return sdTriangleI(p.slice(),[.2,.75]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"p5(sketch => {\nsketch.setup = () => {\n sketch.createCanvas(600, 600);\n sketch.background(\"#432\");\n };\n\n sketch.draw = () => {\n for (let k = 0; k < 1000; k++) {\n let p = [R(2) - 1, R(2) - 1];\n let d = sdfp7(p);\n let col = \"#000\";\n if (d < -0.01) col = \"#06c\";\n else if (d > 0.01) col = \"#f80\";\n else col = \"#f5f5f5\";\n draw_circle(p, 2, col,sketch);\n }\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"function sdOrientedBox(p, a, b, th) {\n let ba = sub2(b, a);\n let l = len2(ba);\n let d = norm2(ba);\n let q = sub2(p, scale2(add2(a, b), 0.5));\n let r = rot2(Math.atan2(d[1], d[0])); // Calculate the rotation needed for 'd' to align with the x-axis\n q = trans2(r, q);\n q = sub2(abs2(q), [l * 0.5, th * .5]);\n return len2(max2(q, [0, 0])) + Math.min(Math.max(q[0], q[1]), 0);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"sdfp8 = ([x,y]) => {\n return sdOrientedBox([x, y],[.5,.3],[-.5,0],1);\n //return sdTrapezoid([x,y],.5,.75,.3);\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"p5(sketch => {\nsketch.setup = () => {\n sketch.createCanvas(600, 600);\n sketch.background(\"#432\");\n };\n\n sketch.draw = () => {\n for (let k = 0; k < 1000; k++) {\n let p = [R(2) - 1, R(2) - 1];\n let d = sdfp8(p);\n let col = \"#000\";\n if (d < -0.01) col = \"#06c\";\n else if (d > 0.01) col = \"#f80\";\n else col = \"#f5f5f5\";\n draw_circle(p, 2, col,sketch);\n }\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"sdTriangle=(p, p0, p1, p2)=> {\n let e0 = sub2(p1, p0);\n let e1 = sub2(p2, p1);\n let e2 = sub2(p0, p2);\n\n let v0 = sub2(p, p0);\n let v1 = sub2(p, p1);\n let v2 = sub2(p, p2);\n\n let pq0 = sub2(v0, mul2(e0, [clamp1(dot2(v0, e0) / dot2(e0, e0), 0.0, 1.0), clamp1(dot2(v0, e0) / dot2(e0, e0), 0.0, 1.0)]));\n let pq1 = sub2(v1, mul2(e1, [clamp1(dot2(v1, e1) / dot2(e1, e1), 0.0, 1.0), clamp1(dot2(v1, e1) / dot2(e1, e1), 0.0, 1.0)]));\n let pq2 = sub2(v2, mul2(e2, [clamp1(dot2(v2, e2) / dot2(e2, e2), 0.0, 1.0), clamp1(dot2(v2, e2) / dot2(e2, e2), 0.0, 1.0)]));\n\n let s0 = Math.sign(e0[0] * v0[1] - e0[1] * v0[0]);\n let s1 = Math.sign(e1[0] * v1[1] - e1[1] * v1[0]);\n let s2 = Math.sign(e2[0] * v2[1] - e2[1] * v2[0]);\n\n if (s0 === s1 && s1 === s2) {\n let d = Math.min(dot2(pq0, pq0), Math.min(dot2(pq1, pq1), dot2(pq2, pq2)));\n return -Math.sqrt(d);\n } else {\n let d = Math.min(dot2(pq0, pq0), Math.min(dot2(pq1, pq1), dot2(pq2, pq2)));\n return Math.sqrt(d);\n }\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"sdfp9 = (p) => {\n return sdTriangle(p.slice(),[.5,.3],[-1,0],[1,1]);\n //return sdTrapezoid([x,y],.5,.75,.3);\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"p5(sketch => {\nsketch.setup = () => {\n sketch.createCanvas(600, 600);\n sketch.background(\"#432\");\n };\n\n sketch.draw = () => {\n for (let k = 0; k < 1000; k++) {\n let p = [R(2) - 1, R(2) - 1];\n let d = sdfp9(p);\n let col = \"#000\";\n if (d < -0.01) col = \"#06c\";\n else if (d > 0.01) col = \"#f80\";\n else col = \"#f5f5f5\";\n draw_circle(p, 2, col,sketch);\n }\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":" sdTrapezoid=(p, a, b, ra, rb)=> {\n //p[1]=-p[1];\n let rba = rb - ra;\n let baba = dot2(sub2(b, a), sub2(b, a));\n let papa = dot2(sub2(p, a), sub2(p, a));\n let paba = dot2(sub2(p, a), sub2(b, a)) / baba;\n let x = Math.sqrt(papa - paba * paba * baba);\n let cax = Math.max(0.0, x - ((paba < 0.5) ? ra : rb));\n let cay = Math.abs(paba - 0.5) - 0.5;\n let k = rba * rba + baba;\n let f = clamp1((rba * (x - ra) + paba * baba) / k, 0.0, 1.0);\n let cbx = x - ra - f * rba;\n let cby = paba - f;\n let s = (cbx < 0.0 && cay < 0.0) ? -1.0 : 1.0;\n return s * Math.sqrt(Math.min(cax * cax + cay * cay * baba, cbx * cbx + cby * cby * baba));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"sdfp10 = (p) => {\n return sdTrapezoid(p.slice(),[1,0],[-1,0],.3,.8);\n //return sdTrapezoid([x,y],.5,.75,.3);\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"p5(sketch => {\nsketch.setup = () => {\n sketch.createCanvas(600, 600);\n sketch.background(\"#432\");\n };\n\n sketch.draw = () => {\n for (let k = 0; k < 1000; k++) {\n let p = [R(2) - 1, R(2) - 1];\n let d = sdfp10(p);\n let col = \"#000\";\n if (d < -0.01) col = \"#06c\";\n else if (d > 0.01) col = \"#f80\";\n else col = \"#f5f5f5\";\n draw_circle(p, 2, col,sketch);\n }\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":" sdRoundBox=(p, b, r)=> {\n // 选择r的前两个元素，根据p的x坐标\n r = [p[0] > 0.0 ? r[0] : r[2], p[0] > 0.0 ? r[1] : r[3]];\n // 再根据p的y坐标选择最终的半径\n r = p[1] > 0.0 ? r[0] : r[1];\n\n let q = [Math.abs(p[0]) - b[0] + r, Math.abs(p[1]) - b[1] + r];\n return Math.min(Math.max(q[0], q[1]), 0.0) + len2(max2(q, [0, 0])) - r;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"sdfp11 = (p) => {\n return sdRoundBox(p.slice(),[.5,.5],[0,0.2,0,0.2]);\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"p5(sketch => {\nsketch.setup = () => {\n sketch.createCanvas(600, 600);\n sketch.background(\"#432\");\n };\n\n sketch.draw = () => {\n for (let k = 0; k < 1000; k++) {\n let p = [R(2) - 1, R(2) - 1];\n let d = sdfp11(p);\n let col = \"#000\";\n if (d < -0.01) col = \"#06c\";\n else if (d > 0.01) col = \"#f80\";\n else col = \"#f5f5f5\";\n draw_circle(p, 2, col,sketch);\n }\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 44:"$43:body"