pulling example SVG to walkable shape

index.html

@@ -2191,29 +2191,22 @@ function changeColorNextPinch(){
 	}, 50) // relatively cheap check, filtering on small array
 }
 
-/*
-
-generalize selector to pick last Nth rather than very last
-        adapt getIdFromPick() with .slice() after filter then map on length-N instead of length-1
-
-selector pickers : pickClass and pickId
-        display result in 3D HUD with rotating objects and selector value
-                ideally themselves also selectable/usable, e.g clone from HUD to bring back "out"
-                         requires extra work as becoming a child will not work, own positionning
-                                should fix that
-                        could compare to world coordinates instead of "just" position attribute
-        add a clear selector function to avoid making the HUD unusable
-
-could also pick via volume, e.g wireframe box
-        start with https://threejs.org/docs/#api/en/math/Box3.containsPoint
-                can iterate with https://threejs.org/docs/#api/en/math/Box3.containsBox
-                consider also https://threejs.org/docs/#api/en/math/Box3.intersectsBox
-
-consider pick then apply, i.e changeColorLastId() but for next Id
-        should be cancealable
-
-*/
-
+function loadSVG(samplingValue = 100, scaling = 1/1000 ){
+	let url = "https://fabien.benetou.fr/pub/home/future_of_text_demo/content/remarkable_import_example_for_outline.svg"; 
+	fetch(url).then( r => r.text() ).then( r => {
+		let pointsAsString = r.split("\n").filter( l => l.indexOf("polyline")>-1 )[1].split('"').filter( l => l.length>100)[0]
+		// very specific, could load instead as document as done in SVG player
+		let points = pointsAsString.split(" ").filter( (p,i) => (i%samplingValue==0) ).map( i => i.split(",").map( a => Number(a)))
+		// consider the reMarkable reference to SVG, i.e 0 to ...1872 x 1404 
+		const offset = {x:-1,y:0,z:-1}
+		points.map( p => { 
+			let el = addPrimitive("cylinder", "" + (p[0]*scaling+offset.x) + " 0 " + (p[1]*scaling+offset.z) );
+			// should consider instancing
+			el.setAttribute("scale", ".01 4 .01"); 
+			el.className = "linefromsvgextrusion"
+		} )
+	} )
+}
 
 </script>
 <div id="observablehq-key">
@@ -2260,18 +2253,9 @@ consider pick then apply, i.e changeColorLastId() but for next Id
       <a-entity hide-on-enter-ar="" id="environmentsky" class="hidableenvironment" gltf-model="../content/SourceCityToolkit/SKY_Market_day.glb" scale="1 1 1" position="17 -10 -4" rotation="0 0 0"></a-entity>
       <a-text target value="instructions : \n--right pinch to move\n--left pinch to execute" position="0 1.65 -0.2" scale="0.1 0.1 0.1"></a-text>
 
-      <a-text target value="jxr addBlockCodeExample()" position="0 1.65 -0.1" scale="0.1 0.1 0.1"></a-text>
-      <a-text target value="jxr addAllPrimitives()" position="0 1.60 -0.1" scale="0.1 0.1 0.1"></a-text>
-      <a-text target value="jxr addCompoundPrimitiveExample()" position="0 1.55 -0.1" scale="0.1 0.1 0.1"></a-text>
-      <a-text target value="jxr rescalePlace(1/10, 1)" position="0 1.50 -0.1" scale="0.1 0.1 0.1"></a-text>
-      <a-text target value="jxr rescalePlace()" position="0 1.45 -0.1" scale="0.1 0.1 0.1"></a-text>
-      <a-text target value="jxr tile_snapping_enabled = !tile_snapping_enabled" position="0 1.40 -0.1" scale="0.1 0.1 0.1"></a-text>
-      <a-text target id="getfromid_color" value="jxr changeColorLastId()" position="0 1.35 -0.1" scale="0.1 0.1 0.1"></a-text>
-      <a-text target id="getfromid_id" value="jxr getIdFromPick()" position="0 1.30 -0.1" scale="0.1 0.1 0.1"></a-text>
       <a-text target id="locationreload" value="jxr location.reload()" position="0 1.20 -0.1" scale="0.1 0.1 0.1"></a-text>
-      <a-text target id="getfromclass_color" value="jxr changeColorLastClass()" position="0 1.15 -0.1" scale="0.1 0.1 0.1"></a-text>
-      <a-text target id="getfromclass_id" value="jxr getClassFromPick()" position="0 1.10 -0.1" scale="0.1 0.1 0.1"></a-text>
-      <a-text target id="changeColorNextPinch" value="jxr changeColorNextPinch()" position="0 1.05 -0.1" scale="0.1 0.1 0.1"></a-text>
+      <a-text target id="loadsvg1" value="jxr loadSVG()" position="0 1.05 -0.1" scale="0.1 0.1 0.1"></a-text>
+      <a-text target id="loadsvg1" value="jxr loadSVG(1,1/1000)" position="0 1.05 -0.1" scale="0.1 0.1 0.1"></a-text>
 
       <a-text target value="jxr pushLeftClass('tiles')" position=" -0.2 1.55 0.1" rotation="0 90 0" scale="0.1 0.1 0.1"></a-text>
       <a-text target value="jxr pushRightClass('tiles')" position=" -0.2 1.50 0.1" rotation="0 90 0" scale="0.1 0.1 0.1"></a-text>