2c:null 2d:["$","title",null,{"children":"SDF to SVG: rotation force | Kompany | Observable"}] 32:T9f2,chart = { // const width=1587/2, height=1123/2 const width=900, height=500 const viewBoxWidth=500, viewBoxHeight=500 const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr('viewBox', `${-viewBoxWidth/2} ${-viewBoxHeight/2} ${viewBoxWidth} ${viewBoxHeight}`) .attr('style', 'background: #1E1225') let rand = makeRandomGenerator(inputSeed); // Every point is a trace. let points = (new Array(lineCount)).fill(0).map(p => { let x, y, z x = (rand.random()-.5)*512 y = (rand.random()-.5)*512 z = (rand.random()-.5)*512 let source = new THREE.Vector3(x, y, z) // trace of a point moving over time let path = d3.path(); let d, norm, diff, target = source.clone(); let visible = false//, visiblePrev; let speed = new THREE.Vector3(rand.random(), rand.random(), rand.random()).normalize() for(let i = 0; i < stepsNumber; i+=.1) { d = distance(target); // flying to the surface along the normal norm = normal(target).multiplyScalar(-1); diff = norm.clone().multiplyScalar(d); source = target.clone(); target.add(diff); // tracing the particle path on the surface if(Math.abs(d)<1){ i++ if (!getVisibility(target) && flags.includes('visibleSide')) continue else { if(path['_'].length == 0) path.moveTo(target.x, target.y); else path.lineTo(target.x, target.y); } // remove from speed part that is collinear to normal (projecting to the surface) speed.sub(norm.clone().multiplyScalar(norm.clone().dot(speed))).normalize() speed.applyAxisAngle(norm, curvicity) // let slide = getParticleForce(target) target.add(speed.multiplyScalar(minSlide)); } } return path; }) // drawing traces if (flags.includes('l')) { svg.selectAll('path') .data( points ) .enter() .append('path') .attr('d', p => p.toString()) .attr('stroke', '#FCE000') .attr('fill', 'none') .attr('stroke-width', 1.1) // .attr('opacity', .1) } // drawing points if (flags.includes('d')) { svg.selectAll('circle') .data( points ) .enter() .append('circle') .attr('cx', p => p['_x0']) .attr('cy', p => p['_y0']) .attr('r', p => 2) .attr('fill', p => '#FCE000') } return svg.node() }33:T96e,distance = p => { p = p.clone(); // rotation of the shape p.applyAxisAngle(new THREE.Vector3(0,1,0).normalize(), sceneRotationX) .applyAxisAngle(new THREE.Vector3(0,0,1).normalize(), sceneRotationY) p.applyAxisAngle(new THREE.Vector3(1,0,0).normalize(), p.x*twistness) p.x /= 2 // let distortion = new THREE.Vector3(0,0,0) // // distortion.x = Math.sin(p.y/30) // distortion.x = new noise('01').noise3D(p.x/200, p.y/200, p.z/200) // distortion.y = new noise('02').noise3D(p.x/200, p.y/200, p.z/200) // distortion.z = new noise('03').noise3D(p.x/200, p.y/200, p.z/200) // distortion.multiplyScalar(100) // p.add(distortion) let q switch(object){ case 'cage': p.x = Math.abs(p.x) - 120 p.y = Math.abs(p.y) - 120 p.z = Math.abs(p.z) - 120 q = new THREE.Vector3( Math.abs(p.x+1)-1, Math.abs(p.y+1)-1, Math.abs(p.z+1)-1) let p1 = new THREE.Vector3(p.x,q.y,q.z).max(new THREE.Vector3(0,0,0)).length() + Math.min(Math.max(p.x,q.y,q.z), 0) let p2 = new THREE.Vector3(q.x,p.y,q.z).max(new THREE.Vector3(0,0,0)).length() + Math.min(Math.max(q.x,p.y,q.z), 0) let p3 = new THREE.Vector3(q.x,q.y,p.z).max(new THREE.Vector3(0,0,0)).length() + Math.min(Math.max(q.x,q.y,p.z), 0) return Math.min(p1,p2,p3)-40 case 'torus': q = new THREE.Vector2(new THREE.Vector2(p.x, p.y).length()-80,p.z) return q.length()-40 case 'sphere': return p.length()-150 case 'octahedron': let s = 100 // size p.x = Math.abs(p.x) p.y = Math.abs(p.y) p.z = Math.abs(p.z) let m = p.x + p.y + p.z - s if( 3*p.x < m ) q = new THREE.Vector3(p.x, p.y, p.z) else if( 3*p.y < m ) q = new THREE.Vector3(p.y, p.z, p.x) else if( 3*p.z < m ) q = new THREE.Vector3(p.z, p.x, p.y) else return m*0.57735027 let k = 0.5*(q.z-q.y+s) k = k<0?0:k k = k>s?s:k return new THREE.Vector3(q.x,q.y-s+k,q.z-k).length() // float sdOctahedron( vec3 p, float s) // { // // p = abs(p); // // float m = p.x+p.y+p.z-s; // // vec3 q; // // if( 3.0*p.x < m ) q = p.xyz; // // else if( 3.0*p.y < m ) q = p.yzx; // // else if( 3.0*p.z < m ) q = p.zxy; // // else return m*0.57735027; // float k = clamp(0.5*(q.z-q.y+s),0.0,s); // return length(vec3(q.x,q.y-s+k,q.z-k)); // } } }34:[] 30:{"id":"010427b92e7683f5","slug":"sdf-to-svg-rotation-force","title":"SDF to SVG: rotation force","thumbnail":"5b37daa858b8e83d3228c23b1b5baa2211c3743044b48be141901d1fb0702d1a","access_level":"public","create_time":"$D2020-10-24T20:27:03.838Z","update_time":"$D2020-10-28T22:36:46.785Z","view_time":null,"first_public_time":"$D2020-10-24T21:42:42.584Z","has_unpublished_edits":null,"fork":{"id":"6e11f1b60f1ff624","slug":"sdf-to-svg-particle-traces-noise-nontransparent-optimised","title":"SDF to SVG: particle traces + noise + nontransparent optimised","owner":{"id":"93e08c2ef7636259","login":"illus0r","name":"Kompany"}},"stars":5,"starred":false,"owner":{"type":"team","id":"93e08c2ef7636259","login":"illus0r","name":"Kompany","avatar_url":"https://avatars-next.observableusercontent.com/153dda72f5f5b4faa63c9f8d87b22cae7dd030554cea8a64d15946af15d4f888","tier":"starter_2024"},"version":1657,"publish_version":1657,"role":null,"authored":false,"authors":[{"type":"individual","id":"e4fe6b7eca089a9f","login":"illus0r","name":"Kompany","avatar_url":"https://avatars-next.observableusercontent.com/153dda72f5f5b4faa63c9f8d87b22cae7dd030554cea8a64d15946af15d4f888","tier":null}],"members":[{"type":"individual","id":"e4fe6b7eca089a9f","login":"illus0r","name":"Kompany","avatar_url":"https://avatars-next.observableusercontent.com/153dda72f5f5b4faa63c9f8d87b22cae7dd030554cea8a64d15946af15d4f888","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"SDF to SVG: rotation force","cells":[{"id":0,"value":"md`# SDF to SVG: rotation force`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":965,"value":"viewof inputSeed = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":989,"value":"viewof lineCount = slider({\n min: 1, \n max: 64*64, \n step: 1, \n value: 1600, \n title: \"Number of particles\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":997,"value":"viewof minSlide = slider({\n min: 1, \n max: 512, \n step: 1, \n value: 4, \n title: \"Slide step\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"viewof stepsNumber = slider({\n min: 1, \n max: 1000, \n step: 16, \n value: 10, \n title: \"Slide steps number\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1153,"value":"viewof sceneRotationX = slider({\n min: 0,\n max: 3.1415*2,\n step: 0.01, \n value: 3.1415/4,\n title: \"Scene rotation X\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1180,"value":"viewof sceneRotationY = slider({\n min: 0,\n max: 3.1415*2,\n step: 0.01, \n value: 3.1415/4,\n title: \"Scene rotation Y\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1607,"value":"viewof curvicity = slider({\n min: -1,\n max: 1,\n step: 0.001, \n value: 0.0,\n title: \"Curvicity\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1646,"value":"viewof twistness = slider({\n min: -.1,\n max: .1,\n step: 0.001, \n value: 0.0,\n title: \"twistness\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1457,"value":"viewof object = select([\"torus\", \"cage\", \"sphere\", \"octahedron\", ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1018,"value":"viewof flags = checkbox({\n //title: \"Colors\",\n //description: \"Please select your favorite colors\",\n options: [\n { value: \"l\", label: \"Lines\" },\n { value: \"d\", label: \"Dots\" },\n { value: \"visibleSide\", label: \"Only visible side\", checked: true },\n ],\n value: [\"l\", \"visibleSide\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1422,"value":"// Как проверить, видна или нет.\n// Идём от точки против оси z. Если прошли 1000 пикселей и ни на что не напоролись, значит видна.\n// Если за N реймарш-шагов мы не дошли до плоскости z = -9999 пикселей, точка не видна.\n\n// лайнту надо рисовать только если предыдущая точка была видна и эта тоже.\n// мувту — во всех остаальных случаях.\n// То есть, если хотя бы одна из точек (прошлая или текущая) не была видна\n\ngetVisibility = target => {\n let visibility = target.clone()\n visibility.add(new THREE.Vector3(0,0,-9))\n let visibilityD\n for(let j = 0; j < 50; j++){\n if(visibility.z < -9999) break\n visibilityD = distance(visibility)\n visibility.add(new THREE.Vector3(0,0,-visibilityD))\n }\n return visibility.z < -9999? true : false\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1445,"value":"getParticleForce = target => {\n // let slide = new THREE.Vector3(0,0,0)\n // slide.x = new noise('001').noise3D(target.x/noiseDetails, target.y/noiseDetails, target.z/noiseDetails)\n // slide.y = new noise('002').noise3D(target.x/noiseDetails, target.y/noiseDetails, target.z/noiseDetails)\n // slide.z = new noise('003').noise3D(target.x/noiseDetails, target.y/noiseDetails, target.z/noiseDetails)\n // slide.normalize()\n\n // let slide = new THREE.Vector3(0,0,0)\n // slide.x = Math.sin(target.x/noiseDetails)\n // // slide.y = Math.sin(target.y/noiseDetails)\n // // slide.z = Math.sin(target.z/noiseDetails)\n // slide.normalize()\n\n let slide = new THREE.Vector3(0,0,0)\n slide.x = -target.x\n slide.y = -target.y\n slide.y = -target.y\n slide.normalize()\n\n return slide\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"normal = p => {\n //p = p.clone();\n let n = new THREE.Vector3(distance(p.clone().add(new THREE.Vector3(+.01, 0, 0)))\n - distance(p.clone().add(new THREE.Vector3(-.01, 0, 0))),\n distance(p.clone().add(new THREE.Vector3(0, +.01, 0)))\n - distance(p.clone().add(new THREE.Vector3(0, -.01, 0))),\n distance(p.clone().add(new THREE.Vector3(0, 0, +.01)))\n - distance(p.clone().add(new THREE.Vector3(0, 0, -.01))))\n \n return n.normalize()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1494,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {slider, checkbox, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":964,"value":"import {makeRandomGenerator} from \"@forresto/random-seed\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"THREE = require(\"three@0.89.0/build/three.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1240,"value":"noise = require('simplex-noise@2.4.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"