2b:null 2c:["$","title",null,{"children":"Samark& | Anaglyphic | Observable"}] 31:T2937,genererFigures = { const figures = []; const features = { Name: "" }; button; // ------ your code starts here ------ // Here the variable u is the unit used to scale const u = 1; const halfDoor = r() < 0.5; function shapeCreator(factor) { const shape = [ { draw: "moveTo", drawArgs: [0, 0] }, { draw: "lineTo", drawArgs: [0, 4] }, { draw: "lineTo", drawArgs: [4, 4] } ]; const formA = () => r() * 2; const formB = () => 2 + r() * 3; const formC = () => r() * 2; const formD = () => 2 + r() * 3; for (let i = 0; i < 2 + rint(6); ++i) { shape.push({ draw: "bezierCurveTo", drawArgs: [formA(), formB(), formC(), formD(), 2, 0] }); } const factorShape = []; shape.forEach((d) => { const drawArgs = []; d.drawArgs.forEach((a) => drawArgs.push(a * factor)); factorShape.push({ draw: d.draw, drawArgs }); }); return factorShape; } const doorThickness = 4 + rint(4); const bevelSegments = 1 + rint(5); const xdecal = 7; function addDoor(pos, detail, factor, figures) { const shape = shapeCreator(factor); for (let i = 0; i < detail; ++i) { const bevelThickness = 0.01 * doorThickness * i * factor; const bevelSize = 0.1 + r(); figures.push( { geometry: { type: "ExtrudeGeometry", shapeArgs: shape, extrudeSettings: { steps: 1, depth: 0.1 + 0.2 * i, bevelEnabled: true, bevelThickness, bevelSize, bevelOffset: 1, bevelSegments } }, pos: { x: pos.x - 0.1 * i * factor, y: pos.y, z: pos.z }, rot: { // Rotation x: 0, y: 0, z: 0 }, scale: { x: 1 - 0.05 * i, y: 1, z: 1 //+ 0.1 * i }, lines: true, // Display color segments (like wireframe, but faces not triangles) hatch: true, // Fill with white texture full: false // Fill with color texture (in the anaverse, red and cyan) }, { geometry: { type: "ExtrudeGeometry", shapeArgs: shape, extrudeSettings: { steps: 1, depth: 0.1 + 0.2 * i, bevelEnabled: true, bevelThickness, bevelSize, bevelOffset: 1, bevelSegments } }, pos: { x: xdecal + pos.x + 0.1 * i * factor, y: pos.y, z: pos.z }, rot: { // Rotation x: 0, y: 0, z: 0 }, scale: { x: -1 * (1 - 0.05 * i), y: 1, z: 1 //+ 0.1 * i }, lines: true, // Display color segments (like wireframe, but faces not triangles) hatch: true, // Fill with white texture full: false // Fill with color texture (in the anaverse, red and cyan) } ); if (!halfDoor) { figures.push( { geometry: { type: "ExtrudeGeometry", shapeArgs: shape, extrudeSettings: { steps: 1, depth: 0.1 + 0.2 * i, bevelEnabled: true, bevelThickness, bevelSize, bevelOffset: 1, bevelSegments } }, pos: { x: xdecal + pos.x + 0.1 * i * factor, y: pos.y - 6, z: pos.z }, rot: { // Rotation x: 0, y: 0, z: 0 }, scale: { x: -1 * (1 - 0.05 * i), y: -1, z: 1 //+ 0.1 * i }, lines: true, // Display color segments (like wireframe, but faces not triangles) hatch: true, // Fill with white texture full: false // Fill with color texture (in the anaverse, red and cyan) }, { geometry: { type: "ExtrudeGeometry", shapeArgs: shape, extrudeSettings: { steps: 1, depth: 0.1 + 0.2 * i, bevelEnabled: true, bevelThickness, bevelSize, bevelOffset: 1, bevelSegments } }, pos: { x: pos.x - 0.1 * i * factor, y: pos.y - 6, z: pos.z }, rot: { // Rotation x: 0, y: 0, z: 0 }, scale: { x: 1 - 0.05 * i, y: -1, z: 1 //+ 0.1 * i }, lines: true, // Display color segments (like wireframe, but faces not triangles) hatch: true, // Fill with white texture full: false // Fill with color texture (in the anaverse, red and cyan) } ); } } } addDoor({ x: -2, y: 40, z: 200 }, 23, 30, figures); /* figures.push({ geometry: { type: "CylinderGeometry", args: [5, 5, 9, 35, 1, false, -Math.PI / 2, Math.PI] }, pos: { x: 0, y: 50, z: 225 }, rot: { x: 0, y: 0, z: 0 }, scale: { x: 10, y: 12, z: 10 }, lines: true, full: false, hatch: true }); */ for (let i = -5; i < 160; ++i) { figures.push({ geometry: { type: "ConeGeometry", args: [2 + rint(2), 1, 3 + rint(4)] }, pos: { x: -r() * 3 + r() * 6, y: i * 0.1 - 51, z: i * 1.5 }, rot: { x: 0, y: Math.PI * 2 * r(), z: Math.PI }, scale: { x: 1, y: 100, z: 1 }, lines: true, full: false, hatch: true }); } function addSlice(rot, pos, figures) { let th = 5; const shapeArgsBlade = []; const pBlade = [[0, 0]]; //shape.moveTo( 0,0 ); shapeArgsBlade.push({ draw: "moveTo", drawArgs: [0, 0] }); for (let i = 0; i < 20; i++) { pBlade[i + 1] = [ ((r() + 1) * (20 - i)) / 2, pBlade[i][1] + 0.2 + r() * 5 ]; // shape.lineTo( p[i+1][0], p[i+1][1] ); shapeArgsBlade.push({ draw: "lineTo", drawArgs: [pBlade[i + 1][0], pBlade[i + 1][1]] }); } let next = r(); if (next < 0.3) { next = (i) => { return (22 - i) / 2; }; } else if (next > 0.3 && next <= 0.6) { next = (i) => { return 5; }; } else { next = (i) => { return r() * 10; }; } for (let i = 19; i >= 0; i--) { shapeArgsBlade.push({ draw: "lineTo", drawArgs: [pBlade[i][0] + next(i), pBlade[i][1]] }); } shapeArgsBlade.push({ draw: "lineTo", drawArgs: [0, 0] }); figures.push({ geometry: { type: "ExtrudeGeometry", shapeArgs: shapeArgsBlade, extrudeSettings: { steps: 1, depth: 0.8, bevelEnabled: true, bevelThickness: 2.5, bevelSize: 0.5, bevelOffset: -1, bevelSegments: 1 } }, pos: { x: pos.x, y: pos.y, z: pos.z }, rot: { // Rotation x: rot.x, y: rot.y, z: rot.z }, scale: { x: 1, y: 2, z: 3 + rint(3) }, lines: true, // Display color segments (like wireframe, but faces not triangles) hatch: true, // Fill with white texture full: false // Fill with color texture (in the anaverse, red and cyan) }); } //corridor const length = 21; const y = 40; for (let m = -13; m < length; ++m) { addSlice({ x: 0, y: 0, z: 0 }, { x: -35, y, z: 0 + m * 5 }, figures); addSlice({ x: 0, y: Math.PI, z: 0 }, { x: 35, y, z: 0 + m * 5 }, figures); } // supports du corridor const numSupports = 10 + rint(22); for (let i = 0; i < numSupports; ++i) { const z = 30 + (180 * i) / numSupports; const rad = z < 80 ? 60 : 90; const y = z < 80 ? 21 : 32; figures.push({ geometry: { type: "TorusGeometry", args: [rad, 1, 9, 12, Math.PI * 0.6] }, pos: { x: 0, y, z }, rot: { x: 0, y: -Math.PI * 0.2 + r() * Math.PI * 0.4, z: Math.PI * 1.2 }, scale: { x: 1, y: 1, z: 1.3 }, lines: true, full: false, hatch: true }); } // roundplace const rayon = 60; const sections = 40; for (let m = 0; m < sections; ++m) { if (m < sections * 0.15 || m > sections * 0.36) { if (m < sections * 0.65 || m > sections * 0.86) { addSlice( { x: 0, y: -((m * 2) / sections) * Math.PI + Math.PI, z: 0 }, { x: rayon * Math.cos((m * Math.PI * 2) / sections), y, z: 150 + rayon * Math.sin((m * Math.PI * 2) / sections) }, figures ); } } } //couronne figures.push({ geometry: { type: "TorusGeometry", args: [82, 15, 16, 32, Math.PI * 0.5] }, pos: { x: 65, y: 30, z: 148 }, rot: { x: Math.PI / 2, y: 0, z: -Math.PI * 0.25 }, scale: { x: 1, y: 1, z: 5 }, lines: true, full: false, hatch: true }); figures.push({ geometry: { type: "TorusGeometry", args: [82, 15, 16, 32, Math.PI * 0.5] }, pos: { x: -65, y: 30, z: 148 }, rot: { x: Math.PI / 2, y: 0, z: Math.PI * 0.75 }, scale: { x: 1, y: 1, z: 5 }, lines: true, full: false, hatch: true }); // bottom figures.push({ geometry: { type: "SphereGeometry", args: [15, 32, 16, 0, Math.PI * 2, Math.PI / 2, Math.PI / 2] }, pos: { x: 0, y: -50, z: 110 }, rot: { x: 0, y: 0, z: 0 }, scale: { x: 5, y: 6, z: 12 }, lines: false, full: true, hatch: false }); figures.push({ geometry: { type: "SphereGeometry", args: [15, 32, 16, 0, Math.PI * 2, Math.PI / 2, Math.PI / 2] }, pos: { x: 0, y: 11, z: 250 }, rot: { x: -Math.PI / 2, y: 0, z: 0 }, scale: { x: 5, y: 5, z: 6 }, lines: false, full: true, hatch: false }); for (let i = -10; i < 10; i++) { addSlice({ x: 0, y: Math.PI / 2, z: 0 }, { x: i * 5, y, z: -55 }, figures); } // ------ your code ends here ------ return { figures, features }; }32:T714,scene = { const scene = new THREE.Scene(); scene.background = new THREE.Color(0x001b42); //manufacture genererFigures.figures.forEach((fig) => { var geometry, edgeGeometry; if (fig.geometry.type === "ExtrudeGeometry") { var shape = new THREE.Shape(); fig.geometry.shapeArgs.forEach((d) => shape[d.draw](...d.drawArgs)); geometry = new THREE.ExtrudeGeometry(shape, fig.geometry.extrudeSettings); geometry.center(); edgeGeometry = new THREE.EdgesGeometry(geometry); } else { geometry = new THREE[fig.geometry.type](...fig.geometry.args); geometry.center(); edgeGeometry = new THREE.EdgesGeometry(geometry); } var pos = new THREE.Vector3(fig.pos.x, fig.pos.y, fig.pos.z); var rot = new THREE.Vector3(fig.rot.x, fig.rot.y, fig.rot.z); if (fig.scale) { var scale = new THREE.Vector3(fig.scale.x, fig.scale.y, fig.scale.z); } if (fig.lines) { const line = new THREE.LineSegments(edgeGeometry, lineMaterial); line.position.set(pos.x, pos.y, pos.z); line.rotation.set(rot.x, rot.y, rot.z); if (fig.scale) { line.scale.set(scale.x, scale.y, scale.z); } scene.add(line); } if (fig.hatch) { const hatch = new THREE.Mesh(geometry, hatchMaterial); hatch.position.set(pos.x, pos.y, pos.z); hatch.rotation.set(rot.x, rot.y, rot.z); if (fig.scale) { hatch.scale.set(scale.x, scale.y, scale.z); } scene.add(hatch); } if (fig.full) { const full = new THREE.Mesh(geometry, fullMaterial); full.position.set(pos.x, pos.y, pos.z); full.rotation.set(rot.x, rot.y, rot.z); if (fig.scale) { full.scale.set(scale.x, scale.y, scale.z); } scene.add(full); } }); return scene; }33:[] 2f:{"id":"adf76754a766ade8","slug":null,"title":"Samark&","thumbnail":"3113b3f2176f4c2f3f4b8b41cfdce26b99e6a16039ed113ef82e8aa540562899","access_level":"public","create_time":"$D2023-10-18T14:52:47.137Z","update_time":"$D2023-11-22T11:59:50.895Z","view_time":null,"first_public_time":"$D2023-10-18T14:52:47.137Z","has_unpublished_edits":null,"fork":{"id":"2e6a09db4fa8c925","slug":"anav-extruded-shapes","title":"Shapes","owner":{"id":"800970edcaeb8f91","login":"anaglyph-ic","name":"Anaglyphic"}},"stars":0,"starred":false,"owner":{"type":"team","id":"800970edcaeb8f91","login":"anaglyph-ic","name":"Anaglyphic","avatar_url":"https://avatars-next.observableusercontent.com/19aeef7ac69ee14cef82c97e6c0c159bd26401d7c0a84015f40729f56e262d5e","tier":"starter_2024"},"version":1661,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6f0f4212e751586f","login":"anaglyph-ic","name":"Anaglyphic","avatar_url":"https://avatars-next.observableusercontent.com/19aeef7ac69ee14cef82c97e6c0c159bd26401d7c0a84015f40729f56e262d5e","tier":null}],"members":[{"type":"individual","id":"6f0f4212e751586f","login":"anaglyph-ic","name":"Anaglyphic","avatar_url":"https://avatars-next.observableusercontent.com/19aeef7ac69ee14cef82c97e6c0c159bd26401d7c0a84015f40729f56e262d5e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Samark&","cells":[{"id":242,"value":"# Samark&","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"viewof button = Inputs.button(\"new iteration\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"renderer.domElement","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"rint = (n) => Math.floor(r() * n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"r = () => fxrand()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"The implementation of the API on this notebook is much simpler and more \"naive\" than the actual anaver.se implementation. The anaverse will (or at least, should) display the same result, but your figures will have to jump through many more hoops. Some of these are intuitive, others not so much. \n\nAs a rule of thumb, try to use as **few different geometries** as possible. By \"geometry\", we mean the following part:\n```js\n{\n geometry:{ // This geometry property (type + args)\n type:\"BoxGeometry\", // is what we call a \"geometry\" here\n args:[1,1,1] // reuse the same as much as you can\n } \n ,pos:{ // position / rotation / texture can change each time\n ...\n}\n```\n\nThe actual implementation of the anaverse allows for mutualisation of geometries and textures *within and among gentks*. This can lead to dramatic performance improvements.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":371,"value":"------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":464,"value":"Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":304,"value":"// Continuously updates\n{\n while (true) {\n //cube.rotation.z += 0.01;\n renderer.render(scene, camera);\n yield null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"hatchMaterial = new THREE.MeshBasicMaterial({color:\"white\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"fullMaterial = new THREE.MeshBasicMaterial({\n color: \"red\",\n side: THREE.DoubleSide\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"lineMaterial = new THREE.LineBasicMaterial({color: \"red\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"camera = {\n const fov = 60;\n const aspect = width / height;\n const near = 0.01;\n const far = 1000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n\n camera.position.set(0, 40, 0);\n camera.lookAt(0, 40, 100);\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"renderer = {\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n //camera.lookAt(0, 40, 100);\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n //camera.lookAt(0, 40, 100);\n controls.addEventListener(\"change\", () => renderer.render(scene, camera));\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n return renderer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.137.0/build/three.min.js\");\n await require(\"three@0.137.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"fxrand=()=>Math.random();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"cameraPos=[\n {\n name:\"base\",\n position:[0,1,-2],\n lookAt:[0,0,0]\n },{\n name:\"Derelict Chapel\",\n position:[0,55,-80],\n lookAt:[0,5,0]\n },{\n name:\"Blest Atrium\",\n position:[2,15,-25],\n lookAt:[0,0,0]\n },\n {\n name:\"Statue\",\n position:[0,1,-2.5],\n lookAt:[0,-14,5]\n }]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"viewof c = Inputs.select(cameraPos, {value: cameraPos.find(t => t.name === \"base\"),format: x => x.name, label: \"Camera position preset\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"