30:T8a4,p5((sketch) => { let t = 0; let max_depth = 0; sketch.setup = function () { sketch.createCanvas(width, height); sketch.noStroke(); sketch.fill(colors.black); sketch.rect(0, 0, width, height); // sketch.noLoop(); sketch.frameRate(10); }; sketch.draw = function () { const size = randomIntFromInterval(input.value_min, input.value_max); const d = new Date(); const s = d.getMilliseconds(); const angle = sketch.map(s, 0, 1000, 0, 360); sketch.background("rgba(0, 0, 0, 0.01)"); sketch.translate(width / 2, height / 2); sketch.push(); sketch.rotate(angle, [size / 2, size]); const p0 = { x: size * 0.1, y: size * 0.75 }; const p1 = { x: size * 0.9, y: size * 0.75 }; koch(p0, p1, max_depth); sketch.pop(); if (max_depth < input.recursion) { max_depth += 1; // sketch.draw(); } else { max_depth = 0; } }; function koch(p0, p1, depth) { const dx = p1.x - p0.x; const dy = p1.y - p0.y; // length of main segment // hypothenuse = c = √(a² + b²) const dist = Math.sqrt(dx * dx + dy * dy); // length of each sub-segment const unit = dist / 3; // angle of main segment // opposite of a tangent const angle = Math.atan2(dy, dx); // three intermediate points const pa = { x: p0.x + Math.cos(angle) * unit, y: p0.y + Math.sin(angle) * unit }; const pb = { x: pa.x + Math.cos(angle - Math.PI / 3) * unit, y: pa.y + Math.sin(angle - Math.PI / 3) * unit }; const pc = { x: p0.x + Math.cos(angle) * unit * 2, y: p0.y + Math.sin(angle) * unit * 2 }; sketch.noFill(); sketch.stroke(colors.white); sketch.strokeWeight(input.stroke); // line(x1, y1, x2, y2) if (depth === 0) { sketch.beginShape(); sketch.vertex(p0.x, p0.y); sketch.vertex(pa.x, pa.y); sketch.vertex(pb.x, pb.y); sketch.vertex(pc.x, pc.y); sketch.vertex(p1.x, p1.y); sketch.endShape(); } else { koch(p0, pa, depth - 1); koch(pa, pb, depth - 1); koch(pb, pc, depth - 1); koch(pc, p1, depth - 1); } } })31:[] 2e:{"title":"Koch Curve","cells":[{"id":0,"value":"# Koch Curve","pinned":false,"hidden":false,"mode":"md"},{"id":161,"value":"Code based on the book [Playing with Chaos](http://www.playingwithchaos.net/)","pinned":false,"hidden":false,"mode":"md"},{"id":134,"value":"viewof input = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"colors = ({ white: \"#ffffff\", black: \"#000000\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"// from https://stackoverflow.com/questions/4959975/generate-random-number-between-two-numbers-in-javascript\n\nfunction randomIntFromInterval(min, max) {\n return Math.floor(Math.random() * (max - min + 1) + min);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"import { form } from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import { p5 } from \"@tmcw/p5\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}