Web Developer, Roboticist, Programming Language Enthusiast, Ex Game Dev, Tools Developer, and Canadian
Public
Edited
Sep 3, 2023
skewed = import("https://cdn.skypack.dev/skewed@0.4.2")
{
const { Camera, Vector3, Color, Box, Red, Sphere, render } = skewed;
const container = document.createElement("div");
let lightingScenario = ["reference", "moonlit"][1];
let ambientLightColor, directionalLightColor;
if (lightingScenario === "moonlit") {
// Bluish white
ambientLightColor = {
r: 64,
g: 64,
b: 120
};
directionalLightColor = {
r: 255,
g: 252,
b: 181
};
} else {
ambientLightColor = {
r: 64,
g: 64,
b: 64
};
directionalLightColor = {
r: 255,
g: 252,
b: 255
};
}
const boxStrokeWidth = 3;
const scene = {
directionalLight: {
type: "directional light",
direction: Vector3(1, 0.75, 0).normalize(),
color: Color(
directionalLightColor.r - ambientLightColor.r,
directionalLightColor.g - ambientLightColor.g,
directionalLightColor.b - ambientLightColor.b
)
},
ambientLightColor,
shapes: [
Box({
position: Vector3(0, 50, 150),
rotation: Vector3(0, 0, 0),
scale: 1.0,
width: 100,
height: 100,
depth: 100,
fill: Red,
stroke: Color(0, 0, 0),
strokeWidth: boxStrokeWidth
}),
Box({
position: Vector3(0, 200, -350),
rotation: Vector3(0, 0, 0),
scale: 1.0,
width: 100,
height: 400,
depth: 100,
fill: Color(255, 255, 255),
stroke: Color(0, 0, 0),
strokeWidth: boxStrokeWidth
}),
Sphere({
position: Vector3(200, 70, 0),
rotation: Vector3(0, 0, 0),
scale: 1.0,
// radius: 80,
radius: 70,
fill: Color(255, 128, 0),
stroke: Color(0, 0, 0, 0),
strokeWidth: 4
})
// cylinder,
// sphere,
//...shadowShapes,
//...particles,
//...grid
// ...Axii(Vector3(0, 0, 0)),
]
};
const camera = skewed.Camera();
const viewport = {
left: 0,
top: 0,
width: 400,
height: 400
};
render(container, scene, viewport, camera);
return container;
}
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.
