[{"_path":"/followcode","_draft":false,"_partial":false,"_empty":false,"title":"Followcode","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"code","props":{"code":"<script setup>\nimport p5 from \"p5\"\n\nconst sketch = (p5: p5) => {\n  let x = [],\n    y = [],\n    segNum = 20,\n    segLength = 18\n\n  for (let i = 0; i < segNum; i++) {\n    x[i] = 0\n    y[i] = 0\n  }\n\n  p5.setup = () => {\n    p5.createCanvas(710, 400)\n    p5.strokeWeight(9)\n    p5.stroke(255, 100)\n  }\n\n  p5.draw = () => {\n    p5.background(0)\n    dragSegment(0, p5.mouseX, p5.mouseY)\n    for (let i = 0; i < x.length - 1; i++) {\n      dragSegment(i + 1, x[i], y[i])\n    }\n  }\n\n  function dragSegment(i, xin, yin) {\n    const dx = xin - x[i]\n    const dy = yin - y[i]\n    const angle = p5.atan2(dy, dx)\n    x[i] = xin - p5.cos(angle) * segLength\n    y[i] = yin - p5.sin(angle) * segLength\n    segment(x[i], y[i], angle)\n  }\n\n  function segment(x, y, a) {\n    p5.push()\n    p5.translate(x, y)\n    p5.rotate(a)\n    p5.line(0, 0, segLength, 0)\n    p5.pop()\n  }\n}\n</script>\n\n<template>\n  <P5 :sketch=\"sketch\" />\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script setup>\nimport p5 from \"p5\"\n\nconst sketch = (p5: p5) => {\n  let x = [],\n    y = [],\n    segNum = 20,\n    segLength = 18\n\n  for (let i = 0; i < segNum; i++) {\n    x[i] = 0\n    y[i] = 0\n  }\n\n  p5.setup = () => {\n    p5.createCanvas(710, 400)\n    p5.strokeWeight(9)\n    p5.stroke(255, 100)\n  }\n\n  p5.draw = () => {\n    p5.background(0)\n    dragSegment(0, p5.mouseX, p5.mouseY)\n    for (let i = 0; i < x.length - 1; i++) {\n      dragSegment(i + 1, x[i], y[i])\n    }\n  }\n\n  function dragSegment(i, xin, yin) {\n    const dx = xin - x[i]\n    const dy = yin - y[i]\n    const angle = p5.atan2(dy, dx)\n    x[i] = xin - p5.cos(angle) * segLength\n    y[i] = yin - p5.sin(angle) * segLength\n    segment(x[i], y[i], angle)\n  }\n\n  function segment(x, y, a) {\n    p5.push()\n    p5.translate(x, y)\n    p5.rotate(a)\n    p5.line(0, 0, segLength, 0)\n    p5.pop()\n  }\n}\n</script>\n\n<template>\n  <P5 :sketch=\"sketch\" />\n</template>\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"code","props":{"code":"<script setup>\nimport p5 from \"p5\"\n\nconst sketch = (p5: p5) => {\n  let x = [],\n    y = [],\n    segNum = 20,\n    segLength = 18\n\n  for (let i = 0; i < segNum; i++) {\n    x[i] = 0\n    y[i] = 0\n  }\n\n  p5.setup = () => {\n    p5.createCanvas(710, 400)\n    p5.strokeWeight(9)\n    p5.stroke(255, 100)\n  }\n\n  p5.draw = () => {\n    p5.background(0)\n    dragSegment(0, p5.mouseX, p5.mouseY)\n    for (let i = 0; i < x.length - 1; i++) {\n      dragSegment(i + 1, x[i], y[i])\n    }\n  }\n\n  function dragSegment(i, xin, yin) {\n    const dx = xin - x[i]\n    const dy = yin - y[i]\n    const angle = p5.atan2(dy, dx)\n    x[i] = xin - p5.cos(angle) * segLength\n    y[i] = yin - p5.sin(angle) * segLength\n    segment(x[i], y[i], angle)\n  }\n\n  function segment(x, y, a) {\n    p5.push()\n    p5.translate(x, y)\n    p5.rotate(a)\n    p5.line(0, 0, segLength, 0)\n    p5.pop()\n  }\n}\n</script>\n\n<template>\n  <P5 :sketch=\"sketch\" />\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"<script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#A3BE8C"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"sketch"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"x"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" []"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"y"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" []"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"segNum"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"20"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"segLength"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"18"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"for"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"segNum"}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"++"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"x"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"] "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"y"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"] "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"createCanvas"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"710"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"400"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"strokeWeight"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"9"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"stroke"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"255"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"100"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"draw"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"background"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"dragSegment"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"mouseX"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"mouseY"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"for"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"x"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"length "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"++"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"dragSegment"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"x"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"y"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"])"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"dragSegment"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"xin"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"yin"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"dx"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"xin"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"x"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"dy"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"yin"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"y"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"angle"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"atan2"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"dy"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"dx"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"x"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"] "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"xin"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"cos"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"angle"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"segLength"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"y"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"] "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"yin"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"sin"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"angle"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"segLength"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"segment"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"x"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"y"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"angle"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"segment"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"x"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"y"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"a"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"push"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"translate"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"x"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"y"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"rotate"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"a"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"line"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"segLength"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"pop"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"</script>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"<template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"5 "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"sketch"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"sketch"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"</template>"}]}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:followcode.md","_source":"content","_file":"followcode.md","_extension":"md"},{"_path":"/get-started","_draft":false,"_partial":false,"_empty":false,"title":"Get Started","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"get-started"},"children":[{"type":"text","value":"Get Started"}]},{"type":"element","tag":"h3","props":{"id":"install"},"children":[{"type":"text","value":"Install:"}]},{"type":"element","tag":"code","props":{"code":"npm i p5vue\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm i p5vue\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Depending on your environment, you may be alerted upon installing "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"p5vue"}]},{"type":"text","value":" that "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"p5"}]},{"type":"text","value":" is a required peer dependency which you must install yourself.\nIf this is the case:"}]},{"type":"element","tag":"code","props":{"code":"npm i -D p5\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm i -D p5\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now add "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"p5vue"}]},{"type":"text","value":" to your project:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Import the Plugin to your main.js file"},{"type":"element","tag":"code","props":{"code":"// main.js || main.ts\nimport { createApp } from \"vue\"\nimport App from \"./App.vue\"\n\nimport p5vue from \"p5vue\"\n\ncreateApp(App).use(p5vue).mount(\"#app\")\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// main.js || main.ts\nimport { createApp } from \"vue\"\nimport App from \"./App.vue\"\n\nimport p5vue from \"p5vue\"\n\ncreateApp(App).use(p5vue).mount(\"#app\")\n"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"P5"}]},{"type":"text","value":" component inside the app"},{"type":"element","tag":"code","props":{"code":"<script setup>\nimport p5 from \"p5\"\n\nconst sketch = (p5) => {\n  p5.setup = () => {\n    p5.createCanvas(500, 500)\n  }\n\n  p5.draw = () => {\n    p5.background(\"#fff000\")\n  }\n}\n</script>\n\n<template>\n  <P5 :sketch=\"sketch\" />\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script setup>\nimport p5 from \"p5\"\n\nconst sketch = (p5) => {\n  p5.setup = () => {\n    p5.createCanvas(500, 500)\n  }\n\n  p5.draw = () => {\n    p5.background(\"#fff000\")\n  }\n}\n</script>\n\n<template>\n  <P5 :sketch=\"sketch\" />\n</template>\n"}]}]}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"get-started"},"children":[{"type":"text","value":"Get Started"}]},{"type":"element","tag":"h3","props":{"id":"install"},"children":[{"type":"text","value":"Install:"}]},{"type":"element","tag":"code","props":{"code":"npm i p5vue\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"npm i p5vue"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Depending on your environment, you may be alerted upon installing "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"p5vue"}]},{"type":"text","value":" that "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"p5"}]},{"type":"text","value":" is a required peer dependency which you must install yourself.\nIf this is the case:"}]},{"type":"element","tag":"code","props":{"code":"npm i -D p5\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"npm i -D p5"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now add "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"p5vue"}]},{"type":"text","value":" to your project:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Import the Plugin to your main.js file"},{"type":"element","tag":"code","props":{"code":"// main.js || main.ts\nimport { createApp } from \"vue\"\nimport App from \"./App.vue\"\n\nimport p5vue from \"p5vue\"\n\ncreateApp(App).use(p5vue).mount(\"#app\")\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#616E88"}},"children":[{"type":"text","value":"// main.js || main.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"createApp"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#A3BE8C"}},"children":[{"type":"text","value":"vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"App"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#A3BE8C"}},"children":[{"type":"text","value":"./App.vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"p5vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#A3BE8C"}},"children":[{"type":"text","value":"p5vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"createApp"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"App"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"use"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"mount"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#A3BE8C"}},"children":[{"type":"text","value":"#app"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"P5"}]},{"type":"text","value":" component inside the app"},{"type":"element","tag":"code","props":{"code":"<script setup>\nimport p5 from \"p5\"\n\nconst sketch = (p5) => {\n  p5.setup = () => {\n    p5.createCanvas(500, 500)\n  }\n\n  p5.draw = () => {\n    p5.background(\"#fff000\")\n  }\n}\n</script>\n\n<template>\n  <P5 :sketch=\"sketch\" />\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"<script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#A3BE8C"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"sketch"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"createCanvas"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"500"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"500"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"draw"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"background"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#A3BE8C"}},"children":[{"type":"text","value":"#fff000"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"</script>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"<template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"5 "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"sketch"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"sketch"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"</template>"}]}]}]}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"get-started","depth":2,"text":"Get Started","children":[{"id":"install","depth":3,"text":"Install:"}]}]}},"_type":"markdown","_id":"content:get-started.md","_source":"content","_file":"get-started.md","_extension":"md"},{"_path":"/mouse2dcode","_draft":false,"_partial":false,"_empty":false,"title":"Mouse2dcode","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"code","props":{"code":"<script setup>\nimport p5 from \"p5\"\nlet width = 850\nlet height = 400\n\nconst sketch = (p5: p5) => {\n  p5.setup = () => {\n    p5.createCanvas(width, height)\n    p5.noStroke()\n    p5.rectMode(p5.CENTER)\n  }\n\n  p5.draw = () => {\n    p5.background(230)\n    p5.fill(244, 122, 158)\n    p5.rect(p5.mouseX, height / 2, p5.mouseY / 2 + 10, p5.mouseY / 2 + 10)\n    p5.fill(237, 34, 93)\n    let inverseX = width - p5.mouseX\n    let inverseY = height - p5.mouseY\n    p5.rect(inverseX, height / 2, inverseY / 2 + 10, inverseY / 2 + 10)\n  }\n}\n</script>\n\n<template>\n  <P5 :sketch=\"sketch\" />\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script setup>\nimport p5 from \"p5\"\nlet width = 850\nlet height = 400\n\nconst sketch = (p5: p5) => {\n  p5.setup = () => {\n    p5.createCanvas(width, height)\n    p5.noStroke()\n    p5.rectMode(p5.CENTER)\n  }\n\n  p5.draw = () => {\n    p5.background(230)\n    p5.fill(244, 122, 158)\n    p5.rect(p5.mouseX, height / 2, p5.mouseY / 2 + 10, p5.mouseY / 2 + 10)\n    p5.fill(237, 34, 93)\n    let inverseX = width - p5.mouseX\n    let inverseY = height - p5.mouseY\n    p5.rect(inverseX, height / 2, inverseY / 2 + 10, inverseY / 2 + 10)\n  }\n}\n</script>\n\n<template>\n  <P5 :sketch=\"sketch\" />\n</template>\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"code","props":{"code":"<script setup>\nimport p5 from \"p5\"\nlet width = 850\nlet height = 400\n\nconst sketch = (p5: p5) => {\n  p5.setup = () => {\n    p5.createCanvas(width, height)\n    p5.noStroke()\n    p5.rectMode(p5.CENTER)\n  }\n\n  p5.draw = () => {\n    p5.background(230)\n    p5.fill(244, 122, 158)\n    p5.rect(p5.mouseX, height / 2, p5.mouseY / 2 + 10, p5.mouseY / 2 + 10)\n    p5.fill(237, 34, 93)\n    let inverseX = width - p5.mouseX\n    let inverseY = height - p5.mouseY\n    p5.rect(inverseX, height / 2, inverseY / 2 + 10, inverseY / 2 + 10)\n  }\n}\n</script>\n\n<template>\n  <P5 :sketch=\"sketch\" />\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"<script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#A3BE8C"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"850"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"400"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"sketch"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"createCanvas"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"noStroke"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"rectMode"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"CENTER"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"draw"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"background"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"230"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"fill"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"244"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"122"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"158"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"rect"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"mouseX"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"mouseY"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"10"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"mouseY"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"10"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"fill"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"237"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"34"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"93"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"inverseX"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"mouseX"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"inverseY"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"mouseY"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"rect"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"inverseX"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"inverseY"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"10"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"inverseY"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"10"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"</script>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"<template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"5 "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"sketch"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"sketch"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"</template>"}]}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:mouse2dcode.md","_source":"content","_file":"mouse2dcode.md","_extension":"md"},{"_path":"/nuxt3","_draft":false,"_partial":false,"_empty":false,"title":"Nuxt3","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"nuxt-3-setup"},"children":[{"type":"text","value":"Nuxt 3 Setup"}]},{"type":"element","tag":"h3","props":{"id":"setup-for-nuxt-3-with-ssr"},"children":[{"type":"text","value":"Setup for Nuxt 3 with SSR"}]},{"type":"element","tag":"h5","props":{"id":"to-set-the-plugin-up-for-nuxt-3-we-have-to-use-some-tricks-to-get-it-working"},"children":[{"type":"text","value":"To set the plugin up for Nuxt 3 we have to use some tricks to get it working."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Install p5vue"},{"type":"element","tag":"code","props":{"code":"npm i p5vue\n","language":"fish"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm i p5vue\n"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add Plugin to nuxt"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Create a plugins folder in your root directory "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/plugins"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"add a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"p5vue.client.ts"}]},{"type":"text","value":" file in the plugins folder"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add the plugin to Nuxt like this:"},{"type":"element","tag":"code","props":{"code":"// p5vue.client.ts\n\nimport { defineNuxtPlugin } from \"#app\"\n//@ts-ignore\nimport p5vue from \"p5vue\"\nexport default defineNuxtPlugin((nuxtApp) => {\n  nuxtApp.vueApp.use(p5vue)\n})\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// p5vue.client.ts\n\nimport { defineNuxtPlugin } from \"#app\"\n//@ts-ignore\nimport p5vue from \"p5vue\"\nexport default defineNuxtPlugin((nuxtApp) => {\n  nuxtApp.vueApp.use(p5vue)\n})\n"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Create a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"P5Wrapper.client.vue"}]},{"type":"text","value":" file in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/components"}]},{"type":"element","tag":"code","props":{"code":"// P5Wrapper.client.vue\n\n<script setup lang=\"ts\">\nconst props = defineProps([\"sketch\"])\nconst sketch = props.sketch\n</script>\n\n<template>\n  <P5 :sketch=\"sketch\" />\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// P5Wrapper.client.vue\n\n<script setup lang=\"ts\">\nconst props = defineProps([\"sketch\"])\nconst sketch = props.sketch\n</script>\n\n<template>\n  <P5 :sketch=\"sketch\" />\n</template>\n"}]}]}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"We need this wrapper component to ensure p5 only loads on client side."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Now we can use our custom Wrapper inside the complete Nuxt App like this:"},{"type":"element","tag":"code","props":{"code":"// App.vue\n\n<script setup lang=\"ts\">\nimport p5 from \"p5\"\n\nconst sketch = (p5: p5) => {\n  p5.setup = () => {\n    p5.createCanvas(500, 500)\n  }\n\n  p5.draw = () => {\n    p5.background(\"#fff000\")\n  }\n}\n</script>\n<template>\n  <P5Wrapper :sketch=\"sketch\" />\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// App.vue\n\n<script setup lang=\"ts\">\nimport p5 from \"p5\"\n\nconst sketch = (p5: p5) => {\n  p5.setup = () => {\n    p5.createCanvas(500, 500)\n  }\n\n  p5.draw = () => {\n    p5.background(\"#fff000\")\n  }\n}\n</script>\n<template>\n  <P5Wrapper :sketch=\"sketch\" />\n</template>\n"}]}]}]}]}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"nuxt-3-setup"},"children":[{"type":"text","value":"Nuxt 3 Setup"}]},{"type":"element","tag":"h3","props":{"id":"setup-for-nuxt-3-with-ssr"},"children":[{"type":"text","value":"Setup for Nuxt 3 with SSR"}]},{"type":"element","tag":"h5","props":{"id":"to-set-the-plugin-up-for-nuxt-3-we-have-to-use-some-tricks-to-get-it-working"},"children":[{"type":"text","value":"To set the plugin up for Nuxt 3 we have to use some tricks to get it working."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Install p5vue"},{"type":"element","tag":"code","props":{"code":"npm i p5vue\n","language":"fish"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"npm"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" i p5vue"}]}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add Plugin to nuxt"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Create a plugins folder in your root directory "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/plugins"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"add a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"p5vue.client.ts"}]},{"type":"text","value":" file in the plugins folder"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add the plugin to Nuxt like this:"},{"type":"element","tag":"code","props":{"code":"// p5vue.client.ts\n\nimport { defineNuxtPlugin } from \"#app\"\n//@ts-ignore\nimport p5vue from \"p5vue\"\nexport default defineNuxtPlugin((nuxtApp) => {\n  nuxtApp.vueApp.use(p5vue)\n})\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#616E88"}},"children":[{"type":"text","value":"// p5vue.client.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"defineNuxtPlugin"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#A3BE8C"}},"children":[{"type":"text","value":"#app"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#616E88"}},"children":[{"type":"text","value":"//@ts-ignore"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"p5vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#A3BE8C"}},"children":[{"type":"text","value":"p5vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"defineNuxtPlugin"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"nuxtApp"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"nuxtApp"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"vueApp"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"use"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Create a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"P5Wrapper.client.vue"}]},{"type":"text","value":" file in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/components"}]},{"type":"element","tag":"code","props":{"code":"// P5Wrapper.client.vue\n\n<script setup lang=\"ts\">\nconst props = defineProps([\"sketch\"])\nconst sketch = props.sketch\n</script>\n\n<template>\n  <P5 :sketch=\"sketch\" />\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"// P5Wrapper.client.vue"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"<script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#A3BE8C"}},"children":[{"type":"text","value":"ts"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"defineProps"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"(["}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#A3BE8C"}},"children":[{"type":"text","value":"sketch"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"])"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"sketch"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"sketch"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"</script>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"<template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"5 "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"sketch"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"sketch"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"</template>"}]}]}]}]}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"We need this wrapper component to ensure p5 only loads on client side."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Now we can use our custom Wrapper inside the complete Nuxt App like this:"},{"type":"element","tag":"code","props":{"code":"// App.vue\n\n<script setup lang=\"ts\">\nimport p5 from \"p5\"\n\nconst sketch = (p5: p5) => {\n  p5.setup = () => {\n    p5.createCanvas(500, 500)\n  }\n\n  p5.draw = () => {\n    p5.background(\"#fff000\")\n  }\n}\n</script>\n<template>\n  <P5Wrapper :sketch=\"sketch\" />\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"// App.vue"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"<script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#A3BE8C"}},"children":[{"type":"text","value":"ts"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#A3BE8C"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"sketch"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"createCanvas"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"500"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"500"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"draw"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"background"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#A3BE8C"}},"children":[{"type":"text","value":"#fff000"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"</script>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"<template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"5Wrapper "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"sketch"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"sketch"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"</template>"}]}]}]}]}]}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"nuxt-3-setup","depth":2,"text":"Nuxt 3 Setup","children":[{"id":"setup-for-nuxt-3-with-ssr","depth":3,"text":"Setup for Nuxt 3 with SSR"}]}]}},"_type":"markdown","_id":"content:nuxt3.md","_source":"content","_file":"nuxt3.md","_extension":"md"},{"_path":"/sincoscode","_draft":false,"_partial":false,"_empty":false,"title":"Sincoscode","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"code","props":{"code":"<script setup lang=\"ts\">\nimport p5 from \"p5\"\nlet darkMode\nlet width = 850\nlet height = 400\n\nconst sketch = (p5: p5) => {\n  p5.setup = () => {\n    p5.createCanvas(width, height, p5.WEBGL)\n  }\n  p5.draw = () => {\n    p5.background(250)\n    p5.rotateY(p5.frameCount * 0.01)\n\n    for (let j = 0; j < 5; j++) {\n      p5.push()\n      for (let i = 0; i < 80; i++) {\n        p5.translate(\n          p5.sin(p5.frameCount * 0.001 + j) * 100,\n          p5.sin(p5.frameCount * 0.001 + j) * 100,\n          i * 0.1\n        )\n        p5.rotateZ(p5.frameCount * 0.002)\n        p5.push()\n        p5.sphere(8, 6, 4)\n        p5.pop()\n      }\n      p5.pop()\n    }\n  }\n}\n</script>\n\n<template>\n  <P5 :sketch=\"sketch\" />\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script setup lang=\"ts\">\nimport p5 from \"p5\"\nlet darkMode\nlet width = 850\nlet height = 400\n\nconst sketch = (p5: p5) => {\n  p5.setup = () => {\n    p5.createCanvas(width, height, p5.WEBGL)\n  }\n  p5.draw = () => {\n    p5.background(250)\n    p5.rotateY(p5.frameCount * 0.01)\n\n    for (let j = 0; j < 5; j++) {\n      p5.push()\n      for (let i = 0; i < 80; i++) {\n        p5.translate(\n          p5.sin(p5.frameCount * 0.001 + j) * 100,\n          p5.sin(p5.frameCount * 0.001 + j) * 100,\n          i * 0.1\n        )\n        p5.rotateZ(p5.frameCount * 0.002)\n        p5.push()\n        p5.sphere(8, 6, 4)\n        p5.pop()\n      }\n      p5.pop()\n    }\n  }\n}\n</script>\n\n<template>\n  <P5 :sketch=\"sketch\" />\n</template>\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"code","props":{"code":"<script setup lang=\"ts\">\nimport p5 from \"p5\"\nlet darkMode\nlet width = 850\nlet height = 400\n\nconst sketch = (p5: p5) => {\n  p5.setup = () => {\n    p5.createCanvas(width, height, p5.WEBGL)\n  }\n  p5.draw = () => {\n    p5.background(250)\n    p5.rotateY(p5.frameCount * 0.01)\n\n    for (let j = 0; j < 5; j++) {\n      p5.push()\n      for (let i = 0; i < 80; i++) {\n        p5.translate(\n          p5.sin(p5.frameCount * 0.001 + j) * 100,\n          p5.sin(p5.frameCount * 0.001 + j) * 100,\n          i * 0.1\n        )\n        p5.rotateZ(p5.frameCount * 0.002)\n        p5.push()\n        p5.sphere(8, 6, 4)\n        p5.pop()\n      }\n      p5.pop()\n    }\n  }\n}\n</script>\n\n<template>\n  <P5 :sketch=\"sketch\" />\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"<script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#A3BE8C"}},"children":[{"type":"text","value":"ts"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#A3BE8C"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"darkMode"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"850"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"400"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"sketch"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"createCanvas"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"WEBGL"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"draw"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"background"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"250"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"rotateY"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"frameCount"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"0.01"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"for"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"j"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"j"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"j"}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"++"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"push"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"for"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"80"}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"++"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"translate"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"sin"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"frameCount"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"0.001"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"j"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"100"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"sin"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"frameCount"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"0.001"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"j"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"100"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"0.1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"        )"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"rotateZ"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"frameCount"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"0.002"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"push"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"sphere"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"8"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"pop"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"pop"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"</script>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"<template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"5 "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"sketch"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"sketch"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"</template>"}]}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:sincoscode.md","_source":"content","_file":"sincoscode.md","_extension":"md"},{"_path":"/typescript","_draft":false,"_partial":false,"_empty":false,"title":"Typescript","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"typescript"},"children":[{"type":"text","value":"Typescript:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Typescript inst fully supported yet.\nTo get the Plugin working without type errors do this:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{"code":"// main.ts\nimport { createApp } from \"vue\"\nimport App from \"./App.vue\"\n// @ts-ignore\nimport p5vue from \"p5vue\"\n\ncreateApp(App).use(p5vue).mount(\"#app\")\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// main.ts\nimport { createApp } from \"vue\"\nimport App from \"./App.vue\"\n// @ts-ignore\nimport p5vue from \"p5vue\"\n\ncreateApp(App).use(p5vue).mount(\"#app\")\n"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{"code":"// Add the p5 type in function argument\n<script setup>\nimport p5 from \"p5\"\n\nconst sketch = (p5: p5) => {\n  p5.setup = () => {\n    p5.createCanvas(500, 500)\n  }\n\n  p5.draw = () => {\n    p5.background(\"#fff000\")\n  }\n}\n</script>\n\n<template>\n  <P5 :sketch=\"sketch\" />\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// Add the p5 type in function argument\n<script setup>\nimport p5 from \"p5\"\n\nconst sketch = (p5: p5) => {\n  p5.setup = () => {\n    p5.createCanvas(500, 500)\n  }\n\n  p5.draw = () => {\n    p5.background(\"#fff000\")\n  }\n}\n</script>\n\n<template>\n  <P5 :sketch=\"sketch\" />\n</template>\n"}]}]}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"typescript"},"children":[{"type":"text","value":"Typescript:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Typescript inst fully supported yet.\nTo get the Plugin working without type errors do this:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{"code":"// main.ts\nimport { createApp } from \"vue\"\nimport App from \"./App.vue\"\n// @ts-ignore\nimport p5vue from \"p5vue\"\n\ncreateApp(App).use(p5vue).mount(\"#app\")\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#616E88"}},"children":[{"type":"text","value":"// main.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"createApp"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#A3BE8C"}},"children":[{"type":"text","value":"vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"App"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#A3BE8C"}},"children":[{"type":"text","value":"./App.vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#616E88"}},"children":[{"type":"text","value":"// @ts-ignore"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#A3BE8C"}},"children":[{"type":"text","value":"p5vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"createApp"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"App"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"use"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"mount"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#A3BE8C"}},"children":[{"type":"text","value":"#app"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{"code":"// Add the p5 type in function argument\n<script setup>\nimport p5 from \"p5\"\n\nconst sketch = (p5: p5) => {\n  p5.setup = () => {\n    p5.createCanvas(500, 500)\n  }\n\n  p5.draw = () => {\n    p5.background(\"#fff000\")\n  }\n}\n</script>\n\n<template>\n  <P5 :sketch=\"sketch\" />\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"// Add the p5 type in function argument"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"<script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#A3BE8C"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"sketch"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"createCanvas"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"500"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B48EAD"}},"children":[{"type":"text","value":"500"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"draw"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"p5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#88C0D0"}},"children":[{"type":"text","value":"background"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#A3BE8C"}},"children":[{"type":"text","value":"#fff000"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"</script>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"<template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":"5 "}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#8FBCBB"}},"children":[{"type":"text","value":"sketch"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9"}},"children":[{"type":"text","value":"sketch"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ECEFF4"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#D8DEE9FF"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#81A1C1"}},"children":[{"type":"text","value":"</template>"}]}]}]}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"typescript","depth":2,"text":"Typescript:"}]}},"_type":"markdown","_id":"content:typescript.md","_source":"content","_file":"typescript.md","_extension":"md"}]