Initial commit

src/effects/texture/strip-mapping.scss

@@ -0,0 +1,13 @@
+
+.scene figure.cylinder.textured { // TODO: Add other elements with strips.
+    // Maps a texture on a cylinder from left to right 
+    
+    --pstripcount: var(--strip-count, 24);
+    --ptexture: var(--texture, transparent);
+        
+    @for $i from 1 to 90 {
+        & > .strip-#{$i} {
+            background: no-repeat space calc(100% * #{$i - 1} / (var(--pstripcount) - 1)) 0/calc(100% * (var(--pstripcount) - 1)) 100% var(--ptexture);
+        }
+    }
+}

src/elements/axis.scss

@@ -0,0 +1,29 @@
+
+
+.scene figure.axises {
+    width: var(--width, 100px);
+    height: var(--height, 100px);
+    
+    & > .axis {
+        display: inline;
+        position: absolute;
+        width: var(--length, 100px);
+        height: var(--length2, 10px);
+    
+        $offset: calc(var(--length) / 2);
+        &-x {
+            background-color: red;
+            color: red;
+        }
+        &-y  {
+            transform: translateY($offset) translateX(calc(-1 * $offset)) rotateZ(90deg);
+            background-color: green;
+            color: green;
+        }
+        &-z {
+            transform: translateZ($offset) translateX(calc(-1 * $offset)) rotateX(90deg) rotateZ(90deg);
+            background-color: blue;
+            color: blue;
+        }
+    }
+}

src/elements/circular/cylinder.scss

@@ -0,0 +1,26 @@
+
+
+.scene figure.cylinder {
+    // Two parameters: height (y), radius (x,z), and strip-count (number of strip, up to 90)
+    width: calc(var(--radius, 20px) * 2);
+    height: var(--height, 100px);
+    
+    --pradius: var(--radius, 20px);
+    --pstripcount: var(--strip-count, 24);
+    
+    & > .strip {
+        position: absolute;
+        width: calc(2 * var(--PI) * var(--pradius) / var(--pstripcount));
+        height: var(--height, 100px);
+        background: white;
+    }
+    
+    &.debug > .strip {
+        border: solid red;
+        border-width: 2px 0;
+    }
+        
+    @for $i from 1 to 90 {
+        & > .strip-#{$i} { transform: rotateY(calc($i * (360deg / var(--pstripcount)))) translateZ(var(--pradius)); }
+    }
+}

src/elements/cuboids/cube.scss

@@ -0,0 +1,20 @@
+
+.scene figure.cube {
+    --halfsize: calc(var(--size, 100px) / 2);
+    width: var(--size, 100px);
+    height: var(--size, 100px);
+    
+    & > .face {
+        position: absolute;
+        width: var(--size, 100px);
+        height: var(--size, 100px);
+        
+        
+        &.front  { transform: rotateY(  0deg) translateZ(var(--halfsize)); }
+        &.right  { transform: rotateY( 90deg) translateZ(var(--halfsize)); }
+        &.back   { transform: rotateY(180deg) translateZ(var(--halfsize)); }
+        &.left   { transform: rotateY(-90deg) translateZ(var(--halfsize)); }
+        &.top    { transform: rotateX( 90deg) translateZ(var(--halfsize)); }
+        &.bottom { transform: rotateX(-90deg) translateZ(var(--halfsize)); }
+    }
+}

src/elements/cuboids/rectangular.scss

@@ -0,0 +1,58 @@
+
+.scene figure.cuboid.rectangular {
+    // Three parameters: width (x), length (y), and depth (z)
+    --pwidth: var(--width, 100px);
+    --plength: var(--length, 100px);
+    --pdepth: var(--depth, 100px);
+    
+    --halfdepth: calc(var(--pdepth) / 2);
+    --halflength: calc(var(--plength) / 2);
+    
+    --mhalfwidth: calc(var(--pwidth) * -1);
+    --mhalflength: calc(var(--plength) * -1);
+    --mhalfdepth: calc(var(--pdepth) * -1);
+    
+    width: var(--pwidth);
+    height: var(--plength);
+    
+    & > .face {
+        position: absolute;
+        
+        &.front {
+            width: var(--pwidth);
+            height: var(--plength);
+            transform: rotateY(0deg) translateZ(var(--halfdepth));
+            
+        }
+        &.back {
+            width: var(--pwidth);
+            height: var(--plength);
+            transform: rotateY(180deg) translateZ(var(--halfdepth));
+        }
+        
+        &.left {
+            width: var(--pdepth);
+            height: var(--plength);
+            transform: rotateY(-90deg) translateZ(var(--halfdepth));
+        }
+        &.right {
+            width: var(--pdepth);
+            height: var(--plength);
+            transform: translateX(var(--pwidth)) rotateY(-90deg) translateZ(var(--halfdepth));
+            
+        }
+        
+        &.top {
+            width: var(--pwidth);
+            height: var(--pdepth);
+            transform: rotateX(90deg) translateZ(var(--halfdepth));
+            
+        }
+        &.bottom {
+            width: var(--pwidth);
+            height: var(--pdepth);
+            transform: translateY(var(--plength)) rotateX(90deg) translateZ(var(--halfdepth));
+        }
+    }
+}
+

src/elements/figure.scss

@@ -0,0 +1,39 @@
+
+.scene {
+    & > figure.root {
+        display: block;
+        transform-origin: 50% 50%;
+        
+        width: var(--width);
+        height: var(--height);
+        
+        
+        position: relative;
+        transform: rotateX(var(--rotation-x, 0deg)) rotateY(var(--rotation-y, 0deg));
+        transition: transform 0.2s;
+    }
+    
+    & figure {
+        transform-style: preserve-3d;
+        margin-inline-start: 0;
+        margin-inline-end: 0;
+        margin-block-start: 0;
+        margin-block-end: 0;
+        position: absolute;
+        pointer-events: none;
+    }
+    
+    & .position-at-center {
+        transform: translateX(-50%) translateY(-50%);
+    }
+    
+    & .debug {
+        outline: solid 2px red;
+        outline-offset: -2px;
+        opacity: 1;
+    }
+    
+    & .hidden {
+        display: none;
+    }
+}

src/elements/plane.scss

@@ -0,0 +1,17 @@
+
+// Planes are simple two faced figures with a width and a length.
+// The root element must contain to faces: front and back.
+
+.scene figure.plane {
+    width: var(--width);
+    height: var(--height);
+    
+    & > .face {
+        position: absolute;
+        width: var(--width);
+        height: var(--height);
+        
+        &.front  { transform: rotateY(  0deg); }
+        &.back   { transform: rotateY(180deg) translateZ(1px); }
+    }
+}

src/main.scss

@@ -0,0 +1,21 @@
+
+@import "scene";
+@import "view";
+
+/* elements */
+
+@import "elements/figure";
+@import "elements/axis";
+@import "elements/plane";
+@import "elements/circular/cylinder";
+@import "elements/cuboids/cube";
+@import "elements/cuboids/rectangular";
+
+/* effects */
+
+@import "effects/texture/strip-mapping";
+
+/* UI elements */
+
+@import "ui/buttons";
+@import "ui/tooltips";

src/scene.scss

@@ -0,0 +1,10 @@
+section.scene {
+    --PI: 3.14159265358979;
+    
+    max-width: fit-content;
+    max-height: fit-content;
+    perspective: 600px;
+    border: solid 1px red;
+    pointer-events: none;
+    z-index: 1;
+}

src/ui/buttons.scss

@@ -0,0 +1,11 @@
+
+.fill {
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+}
+
+a, button, .interactive {
+    pointer-events: auto !important;
+}

src/ui/tooltips.scss

@@ -0,0 +1,16 @@
+
+.scene > figure.root figure.interactive:hover > .tooltip {
+    opacity: 0.8
+}
+
+.tooltip {
+    width: fit-content;
+    padding: 5px;
+    opacity: 0;
+    border-radius: 5px;
+    background: #222;
+    
+    font-size: 1em;
+    color: white;
+    transition: opacity 0.2s;
+}

src/view.scss

@@ -0,0 +1,31 @@
+
+// Rotating canvas view
+
+.view-section {
+    position: fixed;
+    width: 11.11vw;
+    height: 11.11vh;
+    z-index: 0;
+}
+
+@for $i from 0 through 9 {
+    // view sections
+    $rotation-x: $i * 20deg - 80deg;
+    $rotation-y: 160deg - ($i * 40deg);
+        
+    .view-top-#{$i} {
+        top: 11.11vh * $i;
+    }
+    
+    .view-top-#{$i}:hover ~ section.scene {
+        --rotation-x: #{$rotation-x};
+    }
+    
+    .view-left-#{$i} {
+        left: 11.11vw * $i;
+    }
+    
+    .view-left-#{$i}:hover ~ section.scene {
+        --rotation-y: #{$rotation-y};
+    }
+}