2d:null 2e:["$","title",null,{"children":"Intertwining Curves | Cody Rushing | Observable"}] 33:T4a9,function buildLine(){ const { random } = CanvasSketchUtil; const spawnBounds = [0.35, 0.65]; const spawnRange = spawnBounds[1] - spawnBounds[0]; const slotsPerSide = Math.floor(LINES_COUNT / 2); const slotSize = spawnRange / slotsPerSide; if(slotSize < LINE_WIDTH){ console.warn('Slot size too small, lines could overlap. Decrease LINE_WIDTH or LINES_COUNT, or increase spawn range'); } const slots = []; while(slots.length < LINES_COUNT){ let i = slots.length; let vertical = i < slotsPerSide; let slotIndex = i % slotsPerSide; slots.push({ i, vertical, pos0: spawnBounds[0] + slotIndex * slotSize }); } let availableSlots = slots.filter( slot => !lines.find(l => l.slot.i === slot.i) ); // if no slots available, then reuse the first line's slot if(!availableSlots.length){ availableSlots = [lines[0].slot]; } let slot = random.pick(availableSlots); let { vertical } = slot; let forward = random.boolean(); let pointGroups = createPoints({ forward, ...slot }); let points = pointGroups.map(pg => pg.point); lines.push({ vertical, points, renderedPoints: [], slot }); }34:T98d,function createPoints({ vertical, forward, pos0 }){ const { random } = CanvasSketchUtil; random.permuteNoise(); let edges = [0,1]; // randomly pick whether to start stacking up or down let stackUp = random.boolean(); const interpolateVectors = ({ vi, vf, count=1, inclusive=true}) => { let r = []; for(let i=1; i<=count; i++){ r.push( vi.clone().add( vf.clone().sub(vi.clone()).multiplyScalar(i/(count+1)) ) ); } if(inclusive){ r.unshift(vi); r.push(vf); } return r; }; if(!forward){ edges.reverse(); } // first point let x0 = vertical ? pos0 : edges[0]; let y0 = vertical ? edges[0] : pos0; // last point let x1 = vertical ? pos0 : edges[1]; let y1 = vertical ? edges[1] : pos0; let vx = x1 - x0; let vy = y1 - y0; let z = baseZ; // let baseAngle = Math.atan2(vy, vx); let v = new THREE.Vector3(vx,vy,0); let noiselessZone = 0; let p0 = new THREE.Vector3(x0,y0,z); let p1 = new THREE.Vector3(x1,y1,z); let p0_n = p0.clone().add( v.clone().multiplyScalar(noiselessZone) ); let p1_n = p0.clone().add( v.clone().multiplyScalar(1 - noiselessZone) ); // add first points let pointGroups = interpolateVectors({vi: p0, vf: p0_n, count: 1, inclusive: true}) .map( point => { return { point, overlappingPoints: [], stackUp }; } ); for(var i=0; i { return { point, overlappingPoints: [] } } ) ); }35:T518,function adjustPointStacking({pointGroup, prevPointGroup}){ const p = pointGroup.point; const collisionThreshold = LINE_WIDTH * 1.8; const allOtherPoints = lines.map(l => l.points).reduce( (acc, v) => { acc = acc.concat(v); return acc; }, [] ); pointGroup.overlappingPoints = allOtherPoints .filter( existingPoint => new THREE.Vector2(p.x, p.y) .sub(new THREE.Vector2(existingPoint.x, existingPoint.y)) .length() < collisionThreshold ); const prevZs = prevPointGroup.overlappingPoints.map(v => v.z).sort(); const currentZs = pointGroup.overlappingPoints.map(v => v.z).sort(); pointGroup.stackUp = prevPointGroup.stackUp; // no change, use z from prev point if(JSON.stringify(prevZs) === JSON.stringify(currentZs)){ pointGroup.point.setZ(prevPointGroup.point.z); return; } // no overlapping points, so go back to base, and flip stacking order for future stacks if(!pointGroup.overlappingPoints.length){ pointGroup.point.setZ(baseZ); pointGroup.stackUp = !pointGroup.stackUp; return; } // stack point up or down depending on `stackUp` property pointGroup.point.setZ( pointGroup.stackUp ? currentZs[currentZs.length-1] + collisionThreshold : currentZs[0] - collisionThreshold ); }36:Tbc1, function draw({time}){ const { MeshLine, MeshLineMaterial } = ThreeMeshLine; const disappearingBuffer = 2; let currentLine = lines[lines.length - 1]; // if all available lines have been drawn, the first line will disappear let lineToDisappear = lines.length >= LINES_COUNT - disappearingBuffer ? lines[0] : null; if(!currentLine || currentLine.done){ buildLine(); currentLine = lines[lines.length - 1]; currentLine.startTime = time; } // set a disappearStartTime value on lineToDisappear if(lineToDisappear && !lineToDisappear.hasOwnProperty('disappearStartTime')){ lineToDisappear.disappearStartTime = time; } lines.forEach( (line, i) => { const { points, vertical, color, startTime, disappearStartTime, slot } = line; const isCurrentLine = i === lines.length-1; const isDisappearing = !isNaN(disappearStartTime); const isLineToDisappear = i === 0 && lines.length > LINES_COUNT; const pointsToRender = isCurrentLine ? points.slice( 0, Math.round( points.length * d3.easeQuadInOut((time - startTime)/DRAW_DURATION_SECONDS) ) ) : points; const geometry = createGeometry(pointsToRender, {...slot, time}); const meshLine = new MeshLine(); meshLine.setGeometry(geometry); const lineWidth = isDisappearing ? d3.scaleLinear() .domain([disappearStartTime, disappearStartTime + DRAW_DURATION_SECONDS]) .range([LINE_WIDTH, 0]) .clamp(true)(time) : LINE_WIDTH; const colorScale = d3.scaleLinear() .domain([0, 1]) .range(['#FF388A', '#0AA1FA']) .interpolate(d3.interpolateRgb) .clamp(true); const getColor = function({slotIndex, time}){ return colorScale( linearOscillator({ domain: [0, LINES_COUNT/2], })(slotIndex + time * 0.5) ); }; const material = new MeshLineMaterial({ color: getColor({slotIndex: slot.i, time}), sizeAttenuation: false, lineWidth, near: camera.near, far: camera.far }); // mark line as done if all points have been rendered if(pointsToRender.length >= points.length){ line.done = true; } // if line is disappearing, if(isDisappearing && lineWidth === 0){ line.doneDisappearing = true; } const mesh = new THREE.Mesh( meshLine.geometry, material ); scene.add(mesh); if(line.mesh){ scene.remove(line.mesh); } line.mesh = mesh; } ); if(lineToDisappear && lineToDisappear.doneDisappearing){ scene.remove(lineToDisappear.mesh); lines.shift(); } renderer.render(scene, camera); }37:T4cc0,ThreeMeshLine = { /* This is from `three.meshline` on npm, which could not be imported into observable https://github.com/spite/THREE.MeshLine */ function MeshLine() { this.positions = []; this.previous = []; this.next = []; this.side = []; this.width = []; this.indices_array = []; this.uvs = []; this.counters = []; this.geometry = new THREE.BufferGeometry(); this.widthCallback = null; // Used to raycast this.matrixWorld = new THREE.Matrix4(); } MeshLine.prototype.setMatrixWorld = function(matrixWorld) { this.matrixWorld = matrixWorld; } MeshLine.prototype.setGeometry = function( g, c ) { this.widthCallback = c; this.positions = []; this.counters = []; // g.computeBoundingBox(); // g.computeBoundingSphere(); // set the normals // g.computeVertexNormals(); if( g instanceof THREE.Geometry ) { for( var j = 0; j < g.vertices.length; j++ ) { var v = g.vertices[ j ]; var c = j/g.vertices.length; this.positions.push( v.x, v.y, v.z ); this.positions.push( v.x, v.y, v.z ); this.counters.push(c); this.counters.push(c); } } if( g instanceof THREE.BufferGeometry ) { // read attribute positions ? } if( g instanceof Float32Array || g instanceof Array ) { for( var j = 0; j < g.length; j += 3 ) { var c = j/g.length; this.positions.push( g[ j ], g[ j + 1 ], g[ j + 2 ] ); this.positions.push( g[ j ], g[ j + 1 ], g[ j + 2 ] ); this.counters.push(c); this.counters.push(c); } } this.process(); } MeshLine.prototype.raycast = ( function () { var inverseMatrix = new THREE.Matrix4(); var ray = new THREE.Ray(); var sphere = new THREE.Sphere(); return function raycast( raycaster, intersects ) { var precision = raycaster.linePrecision; var precisionSq = precision * precision; var geometry = this.geometry; if ( geometry.boundingSphere === null ) geometry.computeBoundingSphere(); // Checking boundingSphere distance to ray sphere.copy( geometry.boundingSphere ); sphere.applyMatrix4( this.matrixWorld ); if ( raycaster.ray.intersectSphere( sphere ) === false ) { return; } inverseMatrix.getInverse( this.matrixWorld ); ray.copy( raycaster.ray ).applyMatrix4( inverseMatrix ); var vStart = new THREE.Vector3(); var vEnd = new THREE.Vector3(); var interSegment = new THREE.Vector3(); var interRay = new THREE.Vector3(); var step = this instanceof THREE.LineSegments ? 2 : 1; if ( geometry instanceof THREE.BufferGeometry ) { var index = geometry.index; var attributes = geometry.attributes; if ( index !== null ) { var indices = index.array; var positions = attributes.position.array; for ( var i = 0, l = indices.length - 1; i < l; i += step ) { var a = indices[ i ]; var b = indices[ i + 1 ]; vStart.fromArray( positions, a * 3 ); vEnd.fromArray( positions, b * 3 ); var distSq = ray.distanceSqToSegment( vStart, vEnd, interRay, interSegment ); if ( distSq > precisionSq ) continue; interRay.applyMatrix4( this.matrixWorld ); //Move back to world space for distance calculation var distance = raycaster.ray.origin.distanceTo( interRay ); if ( distance < raycaster.near || distance > raycaster.far ) continue; intersects.push( { distance: distance, // What do we want? intersection point on the ray or on the segment?? // point: raycaster.ray.at( distance ), point: interSegment.clone().applyMatrix4( this.matrixWorld ), index: i, face: null, faceIndex: null, object: this } ); } } else { var positions = attributes.position.array; for ( var i = 0, l = positions.length / 3 - 1; i < l; i += step ) { vStart.fromArray( positions, 3 * i ); vEnd.fromArray( positions, 3 * i + 3 ); var distSq = ray.distanceSqToSegment( vStart, vEnd, interRay, interSegment ); if ( distSq > precisionSq ) continue; interRay.applyMatrix4( this.matrixWorld ); //Move back to world space for distance calculation var distance = raycaster.ray.origin.distanceTo( interRay ); if ( distance < raycaster.near || distance > raycaster.far ) continue; intersects.push( { distance: distance, // What do we want? intersection point on the ray or on the segment?? // point: raycaster.ray.at( distance ), point: interSegment.clone().applyMatrix4( this.matrixWorld ), index: i, face: null, faceIndex: null, object: this } ); } } } else if ( geometry instanceof THREE.Geometry ) { var vertices = geometry.vertices; var nbVertices = vertices.length; for ( var i = 0; i < nbVertices - 1; i += step ) { var distSq = ray.distanceSqToSegment( vertices[ i ], vertices[ i + 1 ], interRay, interSegment ); if ( distSq > precisionSq ) continue; interRay.applyMatrix4( this.matrixWorld ); //Move back to world space for distance calculation var distance = raycaster.ray.origin.distanceTo( interRay ); if ( distance < raycaster.near || distance > raycaster.far ) continue; intersects.push( { distance: distance, // What do we want? intersection point on the ray or on the segment?? // point: raycaster.ray.at( distance ), point: interSegment.clone().applyMatrix4( this.matrixWorld ), index: i, face: null, faceIndex: null, object: this } ); } } }; }() ); MeshLine.prototype.compareV3 = function( a, b ) { var aa = a * 6; var ab = b * 6; return ( this.positions[ aa ] === this.positions[ ab ] ) && ( this.positions[ aa + 1 ] === this.positions[ ab + 1 ] ) && ( this.positions[ aa + 2 ] === this.positions[ ab + 2 ] ); } MeshLine.prototype.copyV3 = function( a ) { var aa = a * 6; return [ this.positions[ aa ], this.positions[ aa + 1 ], this.positions[ aa + 2 ] ]; } MeshLine.prototype.process = function() { var l = this.positions.length / 6; this.previous = []; this.next = []; this.side = []; this.width = []; this.indices_array = []; this.uvs = []; for( var j = 0; j < l; j++ ) { this.side.push( 1 ); this.side.push( -1 ); } var w; for( var j = 0; j < l; j++ ) { if( this.widthCallback ) w = this.widthCallback( j / ( l -1 ) ); else w = 1; this.width.push( w ); this.width.push( w ); } for( var j = 0; j < l; j++ ) { this.uvs.push( j / ( l - 1 ), 0 ); this.uvs.push( j / ( l - 1 ), 1 ); } var v; if( this.compareV3( 0, l - 1 ) ){ v = this.copyV3( l - 2 ); } else { v = this.copyV3( 0 ); } this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] ); this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] ); for( var j = 0; j < l - 1; j++ ) { v = this.copyV3( j ); this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] ); this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] ); } for( var j = 1; j < l; j++ ) { v = this.copyV3( j ); this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] ); this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] ); } if( this.compareV3( l - 1, 0 ) ){ v = this.copyV3( 1 ); } else { v = this.copyV3( l - 1 ); } this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] ); this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] ); for( var j = 0; j < l - 1; j++ ) { var n = j * 2; this.indices_array.push( n, n + 1, n + 2 ); this.indices_array.push( n + 2, n + 1, n + 3 ); } if (!this.attributes) { this.attributes = { position: new THREE.BufferAttribute( new Float32Array( this.positions ), 3 ), previous: new THREE.BufferAttribute( new Float32Array( this.previous ), 3 ), next: new THREE.BufferAttribute( new Float32Array( this.next ), 3 ), side: new THREE.BufferAttribute( new Float32Array( this.side ), 1 ), width: new THREE.BufferAttribute( new Float32Array( this.width ), 1 ), uv: new THREE.BufferAttribute( new Float32Array( this.uvs ), 2 ), index: new THREE.BufferAttribute( new Uint16Array( this.indices_array ), 1 ), counters: new THREE.BufferAttribute( new Float32Array( this.counters ), 1 ) } } else { this.attributes.position.copyArray(new Float32Array(this.positions)); this.attributes.position.needsUpdate = true; this.attributes.previous.copyArray(new Float32Array(this.previous)); this.attributes.previous.needsUpdate = true; this.attributes.next.copyArray(new Float32Array(this.next)); this.attributes.next.needsUpdate = true; this.attributes.side.copyArray(new Float32Array(this.side)); this.attributes.side.needsUpdate = true; this.attributes.width.copyArray(new Float32Array(this.width)); this.attributes.width.needsUpdate = true; this.attributes.uv.copyArray(new Float32Array(this.uvs)); this.attributes.uv.needsUpdate = true; this.attributes.index.copyArray(new Uint16Array(this.indices_array)); this.attributes.index.needsUpdate = true; } this.geometry.setAttribute( 'position', this.attributes.position ); this.geometry.setAttribute( 'previous', this.attributes.previous ); this.geometry.setAttribute( 'next', this.attributes.next ); this.geometry.setAttribute( 'side', this.attributes.side ); this.geometry.setAttribute( 'width', this.attributes.width ); this.geometry.setAttribute( 'uv', this.attributes.uv ); this.geometry.setAttribute( 'counters', this.attributes.counters ); this.geometry.setIndex( this.attributes.index ); } function memcpy (src, srcOffset, dst, dstOffset, length) { var i src = src.subarray || src.slice ? src : src.buffer dst = dst.subarray || dst.slice ? dst : dst.buffer src = srcOffset ? src.subarray ? src.subarray(srcOffset, length && srcOffset + length) : src.slice(srcOffset, length && srcOffset + length) : src if (dst.set) { dst.set(src, dstOffset) } else { for (i=0; i renderer.dispose());\n \n restart();\n \n while(true){\n if (document.visibilityState === 'visible'){\n let now = new Date();\n // TODO, this is a clumsy way to manage time\n time += 1/60;\n draw({time});\n yield renderer.domElement; \n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"viewof restartButton = {\n const button = html`