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 };
}
renderer = {
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
//camera.lookAt(0, 40, 100);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
//camera.lookAt(0, 40, 100);
controls.addEventListener("change", () => renderer.render(scene, camera));
invalidation.then(() => (controls.dispose(), renderer.dispose()));
return renderer;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
