2b:null 2c:["$","title",null,{"children":"Generative Hut Tutorial | DV DEVELOP 2025 SPRING Observable Tutorials | Observable"}] 31:[] 2f:{"id":"dea0247bc0836192","slug":null,"title":"Generative Hut Tutorial","thumbnail":"0092321aab6342c9db8551f1001d9a6c03816a949c9f4aeb14f4183bbd8811d9","access_level":"public","create_time":"$D2025-02-11T18:15:58.756Z","update_time":"$D2025-02-11T19:40:44.926Z","view_time":null,"first_public_time":"$D2025-02-11T19:43:18.829Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1dbd369284af18df","login":"dv-develop-2025-spring-observable-tutor","name":"DV DEVELOP 2025 SPRING Observable Tutorials","avatar_url":"https://avatars-next.observableusercontent.com/abefc102535ca1020f91cb4c0dbfd56f396559d321163a0de37a287837f65e07","tier":"starter_2024"},"version":146,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ec64fb3abdc1053a","login":"grace-chen","name":"Grace Chen","avatar_url":"https://avatars-next.observableusercontent.com/b6f469b045c91ba4f01137bd3b1bef884e09eb592f6ebe13febb8a319c830798","tier":null}],"members":[{"type":"team","id":"1dbd369284af18df","login":"dv-develop-2025-spring-observable-tutor","name":"DV DEVELOP 2025 SPRING Observable Tutorials","avatar_url":"https://avatars-next.observableusercontent.com/abefc102535ca1020f91cb4c0dbfd56f396559d321163a0de37a287837f65e07","tier":"starter_2024","role":"editor"},{"type":"individual","id":"ec64fb3abdc1053a","login":"grace-chen","name":"Grace Chen","avatar_url":"https://avatars-next.observableusercontent.com/b6f469b045c91ba4f01137bd3b1bef884e09eb592f6ebe13febb8a319c830798","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Generative Hut Tutorial","cells":[{"id":0,"value":"# Generative Hut Tutorial","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"// creating SVG element in notebook\nsvg_oneCircle = {\n let height = width/2 // height of element\n const svg = DOM.svg(width,height);\n // return svg;\n\n // drawing circle in middle of sketch\n let centerX = width/2; // x-position of circle\n let centerY = height/2; // y-position of circle\n d3.select(svg).append(\"circle\")\n .attr(\"fill\",\"blue\")\n .attr(\"stroke\",\"red\")\n .attr(\"stroke-width\",4)\n .attr(\"r\",height/3)\n .attr(\"cx\",centerX)\n .attr(\"cy\",centerY);\n \n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"// drawing 100 circles\nsvg_100vert= {\n let height = 600;\n const svg = DOM.svg(width,height);\n \n let centerX = width/2;\n let centerY = height/2;\n let circleCount = 100;\n let radius = 100;\n \n let circleArray = [];\n // for loop to create array of values\n for (let i = 0; i < circleCount; i++) {\n circleArray[i] = i;\n }\n \n d3.select(svg).selectAll(\"circle\")\n .data(circleArray)\n .enter()\n .append(\"circle\")\n .attr(\"fill\",\"none\")\n .attr(\"stroke\",\"black\")\n .attr(\"stroke-width\",1)\n .attr(\"r\",radius)\n .attr(\"cx\",centerX)\n .attr(\"cy\",d => radius+d*4);\n\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"// drawing 100 wavy circles\nsvg_100wavy= {\n let height = 600;\n const svg = DOM.svg(width,height);\n \n let centerX = width/2;\n let centerY = height/2;\n let circleCount = 100;\n let radius = 100;\n \n let circleArray = [];\n for (let i = 0; i <= circleCount; i++) {\n circleArray[i] = (360/circleCount)*i; // 0,3.6,7.2,10.8...\n }\n \n d3.select(svg).selectAll(\"circle\")\n .data(circleArray)\n .enter()\n .append(\"circle\")\n .attr(\"fill\",\"none\")\n .attr(\"stroke\",\"black\")\n .attr(\"stroke-width\",1)\n .attr(\"r\",radius)\n .attr(\"cx\",d => centerX+Math.sin(toRadians(d))*40) // changing horizontal positioning of circle based on sine function\n .attr(\"cy\",(d,i) => radius+i*4);\n\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"// function converting angles to radians\nfunction toRadians(angle) {\n return angle * (Math.PI / 180);\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":" // drawing unattributed-but-likely-Bauhaus-based circle drawing\nsvg_final= {\n let height = 600;\n const svg = DOM.svg(width,height);\n \n let centerX = width/2;\n let centerY = height/2;\n let circleCount = 100;\n let radius = 100;\n \n let circleArray = [];\n for (let i = 0; i <= circleCount; i++) {\n circleArray[i] = (360/circleCount)*i; // 0,3.6,7.2,10.8...\n }\n \n d3.select(svg).selectAll(\"circle\")\n .data(circleArray)\n .enter()\n .append(\"circle\")\n .attr(\"fill\",\"none\")\n .attr(\"stroke\",\"black\")\n .attr(\"stroke-width\",1)\n .attr(\"r\",radius)\n // changes made below\n .attr(\"cx\",d => centerX + Math.sin(toRadians(d))*radius) // changing horizontal positioning of circle based on sine function\n .attr(\"cy\",function(d,i) { \n if (i < circleCount/2) {\n return (centerY-radius) + Math.cos(toRadians(d))*radius;\n } else {\n return (centerY+radius) - Math.cos(toRadians(d))*radius;\n }\n });\n\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"// defining slider\nviewof circleCountSlider = slider({\n title: \"Number of Circles\",\n value: 100,\n min: 4,\n max: 400,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"// mainpulating number of circles with slider\nsvg_slider= {\n let height = 600;\n const svg = DOM.svg(width,height);\n \n let centerX = width/2;\n let centerY = height/2;\n // change made below\n let circleCount = circleCountSlider;\n let radius = 100;\n \n let circleArray = [];\n for (let i = 0; i <= circleCount; i++) {\n circleArray[i] = (360/circleCount)*i; // 0,3.6,7.2,10.8...\n }\n \n d3.select(svg).selectAll(\"circle\")\n .data(circleArray)\n .enter()\n .append(\"circle\")\n .attr(\"fill\",\"none\")\n .attr(\"stroke\",\"black\")\n .attr(\"stroke-width\",1)\n .attr(\"r\",radius)\n // changes made below\n .attr(\"cx\",d => centerX + Math.sin(toRadians(d))*radius) // changing horizontal positioning of circle based on sine function\n .attr(\"cy\",function(d,i) { \n if (i < circleCount/2) {\n return (centerY-radius) + Math.cos(toRadians(d))*radius;\n } else {\n return (centerY+radius) - Math.cos(toRadians(d))*radius;\n }\n });\n\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"// adding variations\nsvg_variations= {\n let height = 600;\n const svg = DOM.svg(width,height);\n \n let centerX = width/2;\n let centerY = height/2;\n let circleCount = circles;\n let radius = circle_radius;\n \n let circleArray = [];\n for (let i = 0; i <= circleCount; i++) {\n circleArray[i] = (360/circleCount)*i; // 0,3.6,7.2,10.8...\n }\n \n d3.select(svg).selectAll(\"circle\")\n .data(circleArray)\n .enter()\n .append(\"circle\")\n .attr(\"fill\",fill_color)\n .attr(\"stroke\",stroke_color)\n .attr(\"stroke-width\",stroke_width)\n .attr(\"r\",radius)\n // changes made below\n .attr(\"cx\",d => centerX \n + amplitude * Math.sin(period * (toRadians(d) + phaseShift)) )\n .attr(\"cy\",(d,i) => (i < circles/2 ? height / 3 : height / 3 * 2) \n + amplitude * Math.cos(period * (toRadians(d) + phaseShift)) );\n\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"// period slider\nviewof period = slider({\n title: \"Period (in radians * 2pi)\",\n value: 1,\n min: -4,\n max: 4,\n step: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"// phase shift slider\nviewof phaseShift = slider({\n title: \"Phase Shift (radians)\",\n value: 0,\n min: 0,\n max: 2 * Math.PI,\n step: 0.01\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"// amplitude slider\nviewof amplitude = slider({\n title: \"Amplitude (px)\",\n value: 156,\n min: 10,\n max: 200,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"// circle count\nviewof circles = slider({\n title: \"Circle Count\",\n value: 100,\n min: 50,\n max: 200,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"// circle radius slider\nviewof circle_radius = slider({\n title: \"Circle Radius\",\n value: 100,\n min: 50,\n max: 200,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"// stroke width slider\nviewof stroke_width = slider({\n title: \"Stroke Width\",\n value: 1,\n min: 1,\n max: 10,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"// fill color selector - taken from public notebook\nviewof fill_color = Inputs.color({label: \"Fill Color\", value: \"#4682b4\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"// stroke color selector - take from public notebook\nviewof stroke_color = Inputs.color({label: \"Stroke Color\", value: \"#4682b4\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"

\n---\n# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"// making D3 available in notebook\nd3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"// import slider\nimport {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 30:"$2f:body"