30:[] 2e:{"title":"P5 Basics","cells":[{"id":0,"value":"# P5 Basics","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"md`## Shapes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"{\n if (window.p_shape !== undefined) {\n window.p_shape.remove();\n }\n\n window.p_shape = new P5(\n (p) => {\n p.setup = () => {\n p.createCanvas(640, 640);\n p.pixelDensity(1);\n };\n\n p.draw = () => {\n // 绘制背景色\n p.background(p.color(120, 120, 120));\n\n // 设置轮廓线条宽度\n p.strokeWeight(2);\n\n // 设置轮廓线条颜色\n p.stroke(0, 0, 255);\n\n // 绘制直线\n p.line(0, 0, p.width, p.height);\n\n // 绘制圆\n p.circle(200, 200, 60);\n\n // 绘制矩形（长方形）\n p.rect(220, 240, 60, 120);\n\n // 绘制三角形\n p.triangle(150, 60, 120, 120, 180, 120);\n };\n },\n document.querySelector(\"#shape\"),\n true\n );\n\n return \"Shapes\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"md`## Animation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"{\n {\n if (window.p_animation !== undefined) {\n window.p_animation.remove();\n }\n\n window.p_animation = new P5(\n (p) => {\n p.setup = () => {\n p.createCanvas(640, 640);\n p.pixelDensity(1);\n };\n\n p.draw = () => {\n p.background(p.color(120, 120, 120));\n\n p.strokeWeight(2);\n p.stroke(0, 0, 255);\n p.circle(100, p.frameCount, 20); // p.frameCount 执行动画效果\n };\n },\n document.querySelector(\"#animation\"),\n true\n );\n\n return \"Succeed\";\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`## Trajectory`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"{\n if (window.p_trajectory !== undefined) {\n window.p_trajectory.remove();\n }\n\n window.p_trajectory = new P5(\n (p) => {\n p.setup = () => {\n p.createCanvas(640, 320);\n p.pixelDensity(1);\n };\n\n p.draw = () => {\n p.background(p.color(120, 120, 120));\n\n const ratio = 0.0002;\n for (let x = 0; x < p.width; x = x + 1) {\n p.point(x, 60 + ratio * x * x);\n }\n };\n },\n document.querySelector(\"#trajectory\"),\n true\n );\n\n return \"Bullet\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"md`## Noise`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"{\n if (window.p_noise !== undefined) {\n window.p_noise.remove();\n }\n\n window.p_noise = new P5(\n (p) => {\n p.setup = () => {\n p.createCanvas(640, 480);\n p.pixelDensity(1);\n };\n\n p.draw = () => {\n p.background(0);\n\n const noiseScale = 0.02;\n\n for (let x = 0; x < p.width; x++) {\n let noiseVal = p.noise(\n (p.mouseX + x) * noiseScale,\n p.mouseY * noiseScale\n );\n p.stroke(noiseVal * 255);\n p.line(x, p.mouseY + noiseVal * 80, x, p.height);\n }\n };\n },\n document.querySelector(\"#noise\"),\n true\n );\n\n return \"Noise\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"P5 = require(\"p5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}