25:null 26:["$","title",null,{"children":"星战阅读 | GnimOay | Observable"}] 2b:T527,canva = p5(sketch => { const MAX_DIST = Math.sqrt(Math.pow(300 / 2, 2) + Math.pow(200, 2)); function drawText(txt, angle, z) { angle /= 360 / sketch.TWO_PI; let x = sketch.cos(angle), y = sketch.sin(angle); let dir = sketch.createVector(x, y); dir.mult(sketch.map(z, 0, 800, 0, MAX_DIST * 2)); sketch.push(); let progress = z / 420.0; progress = progress * (2 - progress); sketch .textSize(sketch.map(z, 0, 1000, 10, 300)) .fill(sketch.map(z, 0, 420, 255, 33)); sketch.text(txt, dir.x, dir.y); sketch.pop(); } sketch.setup = function() { sketch.createCanvas(300, 300); sketch.textAlign(sketch.CENTER); sketch.noStroke(); // sketch.textFont('sans-serif'); // sketch.textStyle(sketch.BOLD); }; sketch.draw = function() { // if (speech.length < 10) // speech.push(new Text('KLD83&#*@', 360 * Math.random())); sketch.background(33); // sketch.push(); sketch.translate(300 / 2, 200); for (const [i, w] of speech.entries()) { w.z += 1; if (w.z > 0) w.visible = true; if (w.z >= 420) { w.visible = false; // speech.splice(speech.indexOf(w), 1); } if (w.visible) drawText(w.text, w.angle, w.z); } // if (isRecording) { // } // sketch.pop(); }; })2c:T44c,viewof btn = { const elm = html``; // const gen = html``; const clr = html``; const story1 = html``; const story2 = html``; elm.onclick = a => (mutable article = viewof txt.value); // gen.onclick = () => { // mutable isRecording = true; // // mutable speech = initSpeech(); // // setInterval(() => GIF.addFrame(canva_), 1000 / 60); // setTimeout(() => { // mutable isRecording = false; // sequences.forEach(f => { // console.log('f', f); // GIF.addFrame(f, 1000 / 60); // }); // GIF.render(); // }, 1000); // }; clr.onclick = a => (viewof txt.value = ''); story1.onclick = a => { viewof txt.value = STORY[0]; mutable article = STORY[0]; }; story2.onclick = a => { viewof txt.value = STORY[1]; mutable article = STORY[1]; }; return html`${elm}${clr}${story1}${story2}`; }2d:T596,STORY = [ `Ten Little Soldier Boys went out to Dine, one choked his little self and then there were nine. Nine Little Soldier Boys stayed up very late; One overslept himself and then there were eight. Eight Little Soldier Boys travelling in Devon; One said he’d stay there and then there were seven. Seven Little Soldier Boys chopping up sticks; One chopped himself in halves and then there were six. Six Little Soldier Boys playing with a hive; A bumblebee stung one and then there were five. Five Little Soldier Boys going through a door; One stubbed his toe and then there were four. Four Little Soldier Boys going out to sea; A red herring swallowed one and then there were three. Three Little Soldier Boys walking in the zoo; A big bear hugged one and then there were two. Two Little Soldier Boys sitting in the sun; One got frizzled up and then there was One. One Little Soldier Boy left all alone; He went and hanged himself and then there were none. `, `月亮粑粑，肚里坐个爹爹，爹爹出来买菜，肚里坐个奶奶，奶奶出来绣花，绣杂糍粑，糍粑跌得井里，变杂蛤蟆，蛤蟆伸脚，变杂喜鹊，喜鹊上树，变杂斑鸠，斑鸠咕咕咕，和尚呷豆腐，豆腐一蒲渣，和尚呷粑粑，粑粑一蒲壳，和尚呷菱角，菱角溜溜尖，和尚望哒天，天上四杂字，和尚犯哒事，事又犯得恶，抓哒和尚剁脑壳！` ]2e:T412,function* p5(sketch) { const element = DOM.element('div'); // p5.js really likes its target element to already be in the DOM, not just // floating around detached. So, before we call P5, we yield it, which puts // in the DOM. yield element; // This is ‘instance mode’ in p5 jargon: instead of relying on lots of // globals, we create a sketch that has its own copy of everything under p5. const instance = new p5_lib(sketch, element, true); // This is the tricky part: when you run P5(sketch, element), it starts a // loop that updates the drawing a bunch of times a second. If we were just // to call P5 repeatedly with different arguments, the loops would all keep // running, one on top of the other. So what we do is we use this cell // as a generator, and then when that generator is interrupted, like // when you update the code in the sketch() method, then we call instance.remove() // to clean it up. try { while (true) { yield element; } } finally { instance.remove(); } }2f:[] 29:{"id":"5c6f78c1879ef084","slug":"untitled/4","title":"星战阅读","thumbnail":"847600a32878e861c830ef384e69a1456a7ac30d0d2c1f76d7dc855f3c959f79","access_level":"public","create_time":"$D2020-07-16T20:52:28.822Z","update_time":"$D2020-07-20T16:56:51.429Z","view_time":null,"first_public_time":"$D2020-07-17T00:08:12.994Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"26d48fae205ffe62","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":"starter_2024"},"version":435,"publish_version":435,"role":null,"authored":false,"authors":[{"type":"individual","id":"3ffbfa94b6a22199","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":null}],"members":[{"type":"individual","id":"3ffbfa94b6a22199","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"星战阅读","cells":[{"id":0,"value":"md`# 星战阅读`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":238,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":236,"value":"viewof txt = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":265,"value":"html`<style>\ntextarea{\nwidth:100%;\nheight:10vh;\n}\n.btn-gen{\nmargin-right:30px;\n}\n</style>`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":297,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"mutable speech = initSpeech()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":343,"value":"mutable isRecording=false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":337,"value":"function initSpeech(){\n  let lastAngle = 0;\n  return (\n    article\n      .split(/[' '|,|，|。|.|\\n|;]|\\s]/)\n      .map((t, i) => {\n        let angle = Math.random() * 360;\n        while (Math.abs(angle - lastAngle) < 30) angle = Math.random() * 360;\n        lastAngle = angle;\n        return new Text(t, angle, -i * 40);\n      })\n  );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":256,"value":"mutable article = `星战阅读 是 一个 将 「阅读」 变成 「观看」 的 尝试。它 受到 Bionic Reading 还有 Blink 的 启发。但是，这个项目 与 它的 前辈们 之 理念 背道而驰， 它 旨在 降低 而非 提高 阅读速度。\n\n而，星战阅读 这个 名字 的由来 当然是 因为 这些字幕 像 星战电影 的 开头 一样，会 飞。 输入 你想「看」的 文字 然后 点击 「生成」按钮， 或者 点击 「Story1」 「故事二」 查看 我为你 准备的 两个 童谣`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":160,"value":"class Text {\n  constructor(text, angle,z=1,visible=false) {\n    this.text = text;\n    this.angle = angle;\n    this.z = z;\n    this.visible=visible\n  }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"p5_lib=require('p5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}}
2a:"$29:body"
</article></body></html>