2b:null 2c:["$","title",null,{"children":"juxtaposing widget | Jasmine Otto | Observable"}] 31:T8ee,viewof simplex = { invalidation.then(() => scene.dispose()); // renderer.dispose renderer.setSize(300, 300); renderer.setPixelRatio(devicePixelRatio); // controls.setRotationFromQuaternion(key.frames[0]) const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.addEventListener("change", () => renderer.render(scene, camera)); controls.enablePan = false; controls.rotateSpeed = .025 controls.enableDamping = true; controls.dampingFactor = 0.05 // controls.autoRotate = true; controls.autoRotateSpeed = -0.5 controls.minDistance = 7.5; controls.maxDistance = 7.5 // 15 controls.enableZoom = false try { while (true) { // TWEEN.update(Date.now()) // n.b. not 'Date.now() - start' where start := Date.now() before entering loop. controls.update() // scene.traverse( (child) => {}) renderer.render(scene, camera) let angles = key.frames.map(u => camera.quaternion.angleTo(u)), // closest angle k = angles.reduce((minIdx, _, i, arr) => arr[minIdx] < arr[i] ? minIdx : i, 0) let res = key.names[k] lines.forEach((u,i) => // TODO: tween this u.material.color.setHex(key.colors[k][i])) let prev = mutable input if ([...prev.tokens].sort().join('') != res) { // FIXME: update only on change (works for eye) let ret = { prev: prev.tokens, tokens: new Set([...res]), seen: mutable input.seen.add(res), rotation: camera.quaternion } mutable input = ret // eye_set(...key.glares[k].split('')) d3.select(eye).select('#iris') .style('fill', key.irises[k][0]) .style('stroke', key.irises[k][1]) d3.select(eye).select('#upper') .style('stroke', key.irises[k][2]) d3.select(eye).select('#lower') .style('stroke', key.irises[k][2]) // .dispatch('update', {}) // mutable input.dispatchEvent(new CustomEvent("input")) renderer.domElement.value = ret } yield renderer.domElement await Promises.delay(30) } } finally { controls.dispose() // don't leak eventlisteners } return renderer.domElement }32:Ta18,eye = { // since eye_set\3 depends on me, its calls will re-trigger let w = 110, h = 70 let svg = html`` let pupil = d3.select(svg).select('#pupil'), upper = d3.select(svg).select('#upper'), lower = d3.select(svg).select('#lower') // follow nearby mouse, blink on poke (requires statefulness) function update(i,j,t) { upper.transition(t).attr('d', eyes.upper[i]) lower.transition(t).attr('d', eyes.lower[j]) } let dirty = false // not sure how both callbacks have access to this on the stack d3.select(svg) .on("click", () => { if (mutable ow) { mutable input = {...mutable input, prev: mutable input.tokens, seen: new Set()} mutable ow = false } }) .on("mousemove", () => { let [x,y] = d3.mouse(svg), [dx,dy] = [x - .9*w/2, y - 1.1*h/2], th = Math.atan2(dy, dx), rsq = dx*dx + dy*dy, [tx,ty] = [5 * Math.cos(th), 3 * Math.sin(th)] // thresholds pupil.attr('transform', `translate(${tx},${ty})`) if (rsq < 4000) { dirty = true lower.transition().attr('d', eyes.lower[1]) if (rsq < 1000) { lower.transition().attr('d', eyes.lower[0]) mutable ow = true if (rsq < 200) { upper.transition().attr('d', eyes.upper[0]) }}} }) .on("mouseout", () => { pupil.transition().attr('transform', '') mutable ow = false if (dirty) { update(2,2); // disregard previous state dirty = false} }) .on("update", (d,i) => {update(...d3.event.detail)}) // my pain is felt https://fabiofranchino.com/blog/dispatch-custom-event-with-parameter/ // open up // if (loading) { update(0,0,0) upper.transition().duration(500) .attr('d', eyes.upper[1]) .transition() .attr('d', eyes.upper[2]) lower.transition().duration(500) .attr('d', eyes.lower[1]) .transition() .attr('d', eyes.lower[2]) // } return svg }33:T1ce9,eyes = ({ upper: ["m 8.2388826,35.113753 7.0610504,-3.12506 8.72169,-7.59394 6.84942,-2.69431 1.25393,0.56824 18.22915,-2.445329 35.0513,4.699659 6.73513,0.3966 6.763569,-0.23539 9.443558,-0.29701 -0.6859,3.4616 -8.399938,2.46343 -8.438879,0.79096 -8.35891,1.33557 -15.22916,2.92572 -19.4328,0.64451 -2.36655,-0.99308 -3.06401,-0.21205 -14.53609,3.97419 -5.0755,2.96081 -5.28191,2.50209 -5.3902,-0.3594 -3.6114604,-3.12138 -0.2375,-5.64624 z", "m 13.595615,22.390251 7.333177,-3.005942 8.75969,-6.502682 6.38271,-1.616984 1.06592,0.681943 15.43557,0.80962 29.66633,11.123019 6.65114,1.699608 7.1042,0.976669 10.521798,0.979052 -0.88827,3.341021 -9.427188,1.197935 -8.89842,-0.854752 -8.25451,-0.519278 -13.773,-0.544486 -16.02856,-3.093932 -1.86765,-1.337815 -2.48689,-0.690898 -12.55824,1.948989 -4.74422,2.537912 -5.10736,2.308146 -5.31206,-0.460591 -3.565197,-3.215612 -0.009,-5.760753 z", "m 9.4270078,23.131818 7.3003602,-3.143028 8.65074,-6.957615 6.25287,-2.159257 1.03534,0.554275 10.38277,2.701775 33.09064,2.430155 6.477967,0.976411 9.18842,-6.815611 9.481495,-2.1027873 -2.124714,13.4111263 -4.329451,7.191536 -13.76175,-5.869389 -8.030277,0.417126 -13.28884,1.477378 -15.41847,-0.5461 -1.79966,-1.053963 -2.39983,-0.32734 -12.19594,3.462018 -4.64634,2.946659 -5.03093,2.627342 -5.26888,-0.280321 -3.5565702,-3.179509 -0.009,-5.760693 z"], lower: ["m 24.142103,21.096223 -1.826527,4.191183 -0.0094,2.801609 1.260834,7.576145 7.7164,4.077148 3.268345,-4.984709 9.489445,3.537717 15.292628,2.820136 9.005465,1.188961 6.629989,-1.311831 6.938872,-1.26932 3.723178,-0.78758 1.067818,-4.274463 2.020524,-5.692164 -1.159658,-1.702481 -4.689072,2.755085 -1.259195,1.505191 -1.649745,1.27323 -15.86973,2.286751 -10.155699,-0.43924 -11.721721,-2.173753 -10.851314,-7.992859 -7.221492,-3.385547 z m 1.913302,16.61262 6.581618,4.195185 z", "m 26.223787,27.392402 -1.367076,4.547662 0.220664,2.821046 1.425687,7.584577 5.480813,3.983114 2.046263,-5.670604 5.35489,3.598551 8.958306,3.414997 6.890949,2.381457 7.431729,-0.166496 12.587727,-0.108101 6.908537,-1.644966 2.147689,-5.1785 3.490443,-7.493842 -1.151038,-1.883427 -7.136537,4.213464 -2.615875,1.932696 -3.469998,1.408598 -21.000744,-0.812252 -6.984803,-0.829632 -6.707827,-2.078322 -6.330612,-7.877924 -6.179352,-2.142868 z m 2.220793,16.938998 4.423454,4.29463 z", "m 19.18195,34.938474 -2.160375,5.037166 -0.285801,3.048389 0.285954,8.015663 4.29167,4.060231 -1.426401,-8.46088 8.116538,6.079093 8.532218,3.289939 7.593449,2.328166 9.637459,-0.30544 18.017388,-0.02301 9.456264,-1.817192 3.59668,-5.720068 5.355156,-8.691987 -0.865211,-2.135487 -9.081128,5.090407 -3.839231,2.193015 -5.103725,1.536097 -28.633505,-0.629893 -7.726991,-0.538226 -6.328575,-1.90863 -4.090518,-8.334344 -5.3413,-2.113861 z m 9.26263,11.871506 4.423454,4.294628 z m -8.865066,7.458761 z"], pupil: "m 58.543643,27.861178 c 1.857876,0.962506 3.757128,1.844749 5.687958,2.650824 1.070787,0.773388 1.145729,2.202124 1.712355,3.297253 0.442385,1.131338 0.879754,2.264589 1.323365,3.395429 -0.990524,0.213575 -1.34212,-1.394441 -0.409928,-1.692835 0.661434,-0.38723 1.24559,-1.55045 1.872345,-1.618695 0.124012,1.01234 -1.040358,1.428199 -1.335612,2.280358 -0.263333,1.015058 -1.551561,1.010082 -1.989352,0.146977 -2.382783,-2.102915 -4.679982,-4.318243 -7.19891,-6.256459 -0.464086,-0.275199 -1.033123,0.49283 -0.295101,0.542856 2.442797,1.844328 4.855013,3.731944 7.374975,5.471283 0.33797,-0.805616 -1.124065,-0.14047 -1.47658,-0.01914 -0.490726,0.302374 -1.998614,0.411918 -1.47635,-0.511586 0.750538,-0.673949 1.504673,0.367825 0.862876,1.01257 -0.598586,0.586567 -1.432449,-0.141619 -1.931519,-0.536886 -1.657774,-1.177727 -2.982976,-2.741382 -4.498519,-4.085185 -0.546071,-0.519663 -1.091379,-1.04009 -1.635842,-1.561436 1.068834,0.189462 1.743395,1.450323 2.912855,1.257377 1.234681,-0.186017 2.578254,0.634564 2.949676,1.827142 0.216637,0.884501 -0.03444,1.925012 0.607121,2.671225 0.553497,0.68501 -0.250703,1.675303 -0.978198,1.000818 -1.829019,-0.801826 -3.697077,-1.548001 -5.359674,-2.673941 -0.793903,-0.556101 -1.702977,-1.00878 -2.243155,-1.850949 -0.443264,-0.732012 -1.079282,-1.385828 -1.239846,-2.25192 -0.11062,-0.827165 0.304669,-1.610849 0.61202,-2.355798 0.399783,-0.757773 0.961854,-1.513171 1.751089,-1.880268 1.052069,-0.213192 2.14249,0.570797 3.153644,0.0268 1.117405,-0.378158 2.325293,-0.354427 3.486218,-0.328018 1.039477,0.284384 1.869628,1.025813 2.686266,1.690499 1.100794,1.095818 2.166872,2.230639 3.390453,3.193604 0.630967,0.537384 1.264956,1.071551 1.878201,1.62926 0.104873,0.649223 1.151126,1.447336 0.530724,2.004279 -0.704799,-0.160373 -1.223427,-0.734156 -1.842337,-1.079284 -1.904228,-1.339631 -3.692215,-2.834238 -5.563373,-4.218268 0.148124,1.047362 -0.880138,1.695016 -1.13838,2.625294 -0.06315,0.357108 -0.86655,1.221973 -0.672878,0.34486 0.275198,-0.843739 0.811166,-1.586506 0.998178,-2.461591 0.517175,-0.841442 1.535447,-0.04363 1.921414,0.522379 1.755299,2.378343 3.610688,4.705473 5.000881,7.326289 -1.019919,0.06047 -1.562507,-0.959597 -2.346154,-1.419167 -1.010388,-0.801329 -2.046803,-1.569436 -3.101475,-2.3114 0.655003,0.974448 -0.936593,1.46571 -1.581568,0.91271 -1.004801,-0.405832 -1.668492,-1.340932 -2.250389,-2.207558 -0.531107,-1.026503 -1.158896,-2.24526 -0.648381,-3.405152 0.146594,-0.376627 0.344094,-0.730596 0.50083,-1.102631 z", iris: "m 41.919592,25.584717 c -1.809956,1.081426 -3.813969,2.038688 -5.032458,3.83211 0.587141,1.138878 0.0268,0.364762 -0.501022,-0.166114 -0.871449,-0.978466 0.597514,0.0712 0.968055,0.308115 1.105541,0.617838 2.046421,1.552365 2.32227,2.826239 0.452374,1.646559 1.637718,2.951589 2.446396,4.432112 1.361525,1.609892 2.629581,3.310573 4.307909,4.612693 1.350501,1.367382 3.072769,2.246907 4.646798,3.320947 0.694617,-0.192906 1.385522,-0.05588 2.069117,0.218934 1.911769,0.623579 3.75001,1.501306 5.77381,1.697389 3.830158,0.812965 7.778357,0.494783 11.640973,0.155781 1.555579,-0.273286 3.135924,-0.463934 4.544488,-1.230088 1.436084,-0.381604 2.355339,-1.576823 3.45353,-2.490374 1.231504,-1.25294 1.70248,-3.045901 2.423393,-4.607031 0.579869,-2.993578 1.186338,-6.001585 1.112583,-9.067197 -0.0153,-3.194063 0.61045,-6.533304 -0.701048,-9.570286 -0.328401,-0.858282 -0.663232,-1.714229 -0.971501,-2.580128 0.850857,-0.529691 0.987767,0.766536 1.18565,1.32478 1.194377,3.655354 2.266388,7.360238 2.857931,11.165824 0.257591,1.794723 0.317301,3.629979 0.359786,5.440624 -0.125542,1.850873 -0.498878,3.692674 -0.900768,5.493023 -1.006254,2.258045 -1.789096,4.748342 -3.618229,6.492658 -0.901685,0.887639 -1.867139,1.681275 -3.06232,2.136289 -1.570544,0.96266 -3.430602,1.148448 -5.183989,1.591444 -3.539535,0.434461 -7.145783,0.599657 -10.669473,-0.06431 -2.022918,-0.253764 -3.998722,-0.834131 -5.927522,-1.480713 -2.072409,-0.887181 -4.05158,-2.000261 -6.037258,-3.063966 -2.107545,-1.45239 -4.446197,-2.60187 -6.266642,-4.430659 -1.300551,-1.262123 -2.898042,-2.266771 -3.767654,-3.902574 -0.789387,-1.332129 -1.882335,-2.51158 -2.457074,-3.951721 -0.214724,-1.023172 -0.439821,-2.036469 -0.902146,-2.97555 0.275964,-0.75582 1.11063,0.169177 1.485803,0.393852 -0.87474,-1.066653 -2.386265,-1.575254 -2.981781,-2.84086 0.353662,-0.99902 1.44377,-1.50942 2.278207,-2.067013 1.262545,-0.704454 2.567269,-1.346023 3.648045,-2.323877 0.752376,-0.347156 1.741214,0.644592 1.456218,1.369409 z", })34:[] 2f:{"id":"4aaf1ca7e955e518","slug":"juxtaposing-widget","title":"juxtaposing widget","thumbnail":"92ac21b1633531735ea8f81a3af9eb4dd3608baeacf77a1d311aa1ea6a7cbd89","access_level":"public","create_time":"$D2019-04-04T19:48:32.947Z","update_time":"$D2019-08-06T17:38:07.415Z","view_time":null,"first_public_time":"$D2019-04-04T23:36:12.452Z","fork":{"id":"a8d3713dde1a73a7","slug":"simplex-widget","title":"simplex widget","owner":{"id":"43e035ce64fad801","login":"jazztap","name":"Jasmine Otto"}},"stars":0,"starred":false,"owner":{"type":"team","id":"43e035ce64fad801","login":"jazztap","name":"Jasmine Otto","avatar_url":"https://avatars-next.observableusercontent.com/1d847b962089e3524d821a011682b5ec09925cb269ab3f15456fb6e38e574bcc","tier":"starter_2024"},"version":1052,"publish_version":1052,"role":null,"authored":false,"authors":[{"type":"individual","id":"91a3f7bf83a60ddd","login":"jazztap","name":"Jasmine Otto","avatar_url":"https://avatars-next.observableusercontent.com/1d847b962089e3524d821a011682b5ec09925cb269ab3f15456fb6e38e574bcc","tier":null}],"members":[{"type":"individual","id":"91a3f7bf83a60ddd","login":"jazztap","name":"Jasmine Otto","avatar_url":"https://avatars-next.observableusercontent.com/1d847b962089e3524d821a011682b5ec09925cb269ab3f15456fb6e38e574bcc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"juxtaposing widget","cells":[{"id":67,"value":"md`# juxtaposing widget`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":518,"value":"md`\nan input that returns which edge or face (but not vertex) of a tetrahedron you're looking at\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1013,"value":"md`configuration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"key = {\n let c = (...args) => new THREE.Quaternion(...args),\n I = [0x44ffff, 0x444488, 0x222266], I_ = [0xaaaaaa, 0x444488, 0x222266],\n R = [0xccff22, 0xaa4444, 0x880000], R_ = [0x444444, 0xaa4444, 0x880000],\n r = ['#c05050', '#f03030', '#fff0']\n return {\n names: ['012', '013', '123', '023', // faces\n '01', '02', '03', '12', '13', '23'], // edges\n // quaternions to detect orientation\n frames: [c(0,.79,.61,0), c(.13,-.81,.2,.54), c(0,0,0,1), c(.13,.81,-.2,.54),\n c(.1, .9, .2, -.42), c(-.1, .9, .2, .42), c(0, .9, -.42, 0),\n c(-.42, 0, 0, .9), c(.2, -.42, .1, .9), c(.2, .4, 0, .9)],\n colors: [R, I, I, I,\n R_, R_, I_, R_, I_, I_],\n \n irises: Array(10).fill(r) // legacy code\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1038,"value":"md`demo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":778,"value":"`${[...input.prev]} => ${[...input.tokens]}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"lines = {\n\t\t\t\tvar vertices = [ 1,1,1, -1,-1,1, -1,1,-1, 1,-1,-1,\n -1,-1,1, -1,1,-1, 1,1,1, 1,-1,-1];\n\t\t\t\tvar geometry = new THREE.BufferGeometry();\n\t\t\t\tgeometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );\n\t\t\t\t\n let lines = []\n\t\t\t\tfor ( var i = 1; i <= 3; i ++ ) {\n\t\t\t\t\tlet material = new THREE.LineDashedMaterial( {\n\t\t\t\t\t\tcolor: (i/3.0) * 0xffaaaa,\n\t\t\t\t\t\tlinewidth: 10,\n gapSize: [15,0,15][i-1], dashSize: (i*5) * 3,\n\t\t\t\t\t} );\n\t\t\t\t\tlet line = new THREE.Line( geometry, material );\n\t\t\t\t\tline.scale.setScalar( i / 3 );\n line.setRotationFromEuler(new THREE.Euler( Math.PI/5, Math.PI/4, 0) )\n // FIXME: keyframes currently assume this config\n lines.push(line)\n\t\t\t\t}\n \n return lines\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1042,"value":"md`live output`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":801,"value":"simplex","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1046,"value":"md`debounced output`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":193,"value":"mutable input = // like simplex, but only updates on relevant frames\n ({tokens: new Set(),\n prev: new Set(), // ['0']\n seen: new Set()})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1047,"value":"md`reset button`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":680,"value":"mutable ow = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":652,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":655,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":661,"value":"eye_set = (i,j,t=100) => \n d3.select(eye).dispatch('update', {detail: [i,j,t]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":966,"value":"md`#### deps`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1022,"value":"// [simplex.x, simplex.y, simplex.z, simplex.w].map(v => v.toFixed(3)).join(' ')\n// camera.position","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"camera = {\n let camera = new THREE.PerspectiveCamera( 33, 1 /* aspect */, 0.1, 100 )\n // window.innerWidth / window.innerHeight\n // camera.position.z = 10\n let p = camera.position; p.x = -.1; p.y = 6; p.z = 4.45\n return camera\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"scene = {\n let scene = new THREE.Scene();\n scene.background = new THREE.Color( 1, 1, 1 );\n \n lines.forEach((u) => scene.add(u))\n return scene\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"renderer = {\n\t\t\t\tlet renderer = new THREE.SVGRenderer(); // THREE.WebGLRenderer({antialias: true}); // \n\t\t\t\trenderer.setSize( window.innerWidth, window.innerHeight );\n return renderer\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"THREE = {\n const THREE = window.THREE = await require('three');\n // https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/renderers/SVGRenderer.js\n await require('three/examples/js/renderers/Projector.js').catch(() => {});\n await require('three/examples/js/renderers/SVGRenderer.js').catch(() => {});\n \n await require(\"three@0.99.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n // TODO: use TrackballControls, but detect the 1d space of orientations (no canonical 'up') corresp. to ea. vtx.\n return THREE;\n} // TWEEN = require('@tweenjs/tween.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":659,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"