Public
Edited
Jan 27, 2023
1 star
P5 = require('https://unpkg.com/p5@1.2.0/lib/p5.js')
p5(sketch => {
let gridTopX;
let gridTopY;
//let gridTopY = 200;
const sideLength = 33;
sketch.setup = () => {
sketch.createCanvas(600, 400);
gridTopX = sketch.width / 8;
gridTopY = sketch.height / 2;
sketch.strokeWeight(2);
}
function drawCube(c, r, z, color){
const x = gridTopX + (c-r) * sideLength * sketch.sqrt(3)/2;
const y = gridTopY + (c+r) * sideLength / 2 - sideLength*z;
const points = [];
for (let angle = sketch.PI / 6; angle < sketch.PI * 2; angle += sketch.PI/3){
points.push(
sketch.createVector(x + sketch.cos(angle) * sideLength,
y + sketch.sin(angle) * sideLength)
);
}
// faces
sketch.quad(x, y,
points[5].x, points[5].y,
points[0].x, points[0].y,
points[1].x, points[1].y
);
sketch.quad(x, y,
points[1].x, points[1].y,
points[2].x, points[2].y,
points[3].x, points[3].y
);
sketch.quad(x, y,
points[3].x, points[3].y,
points[4].x, points[4].y,
points[5].x, points[5].y
);
//sketch.fill(color)
}
sketch.draw = () => {
//sketch.background(220);
drawCube(0,0,0, sketch.color("yellow"));
drawCube(1,0,0);
drawCube(2,0,0);
drawCube(3,0,0);
drawCube(4,0,0);
drawCube(5,0,0);
drawCube(6,0,0);
drawCube(7,0,0);
drawCube(8,0,0);
drawCube(9,0,0);
drawCube(0,0,1);
drawCube(1,0,1);
drawCube(2,0,1);
}
})
<div class="scene">
<div class="cube">
<div class="cube__face cube__face--front">💜</div>
<div class="cube__face cube__face--back">back</div>
<div class="cube__face cube__face--right">right</div>
<div class="cube__face cube__face--left">left</div>
<div class="cube__face cube__face--top">top</div>
<div class="cube__face cube__face--bottom">bottom</div>
</div>
</div>
<style>
* { box-sizing: border-box; }
/* body { font-family: sans-serif; } */
.scene {
width: 200px;
height: 200px;
border: 1px solid #CCC;
margin: 80px;
perspective: 600px;
}
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transform: {
translateZ(-100px)
rotateY(45deg)
skewX(-45deg)
};
transition: transform 1s;
}
.cube.show-front { transform: translateZ(-100px) rotateY( 0deg); }
.cube.show-right { transform: translateZ(-100px) rotateY( -90deg); }
.cube.show-back { transform: translateZ(-100px) rotateY(-180deg); }
.cube.show-left { transform: translateZ(-100px) rotateY( 90deg); }
.cube.show-top { transform: translateZ(-100px) rotateX( -90deg); }
.cube.show-bottom { transform: translateZ(-100px) rotateX( 90deg); }
.cube__face {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid black;
line-height: 200px;
font-size: 40px;
font-weight: bold;
color: white;
text-align: center;
}
.cube__face--front { background: hsla( 0, 100%, 50%, 0.7); }
.cube__face--right { background: hsla( 60, 100%, 50%, 0.7); }
.cube__face--back { background: hsla(120, 100%, 50%, 0.7); }
.cube__face--left { background: hsla(180, 100%, 50%, 0.7); }
.cube__face--top { background: hsla(240, 100%, 50%, 0.7); }
.cube__face--bottom { background: hsla(300, 100%, 50%, 0.7); }
.cube__face--front { transform: rotateY( 0deg) translateZ(100px); }
.cube__face--right { transform: rotateY( 90deg) translateZ(100px); }
.cube__face--back { transform: rotateY(180deg) translateZ(100px); }
.cube__face--left { transform: rotateY(-90deg) translateZ(100px); }
.cube__face--top { transform: rotateX( 90deg) translateZ(100px); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(100px); }
label { margin-right: 10px; }
</style>
<div class='block'>
<div class='face front'><p class='label'> Value Block And More <p> </div>
<div class='face side'> </div>
<div class='face top'> </div>
</div>
<style>
.block {
width: 300px;
height: 300px;
overflow: hidden;
}
.label {
position: absolute;
text-align: center;
top: 10px;
}
.face {
transform-origin: 0 0;
position: absolute;
width: 100px;
height: 100px;
}
.front {
background: hsla( 60, 100%, 50%, 0.7);
transform: rotateZ(-30deg) skewX(-30deg) translate(130px, 172px) scaleY(0.864);
}
.top {
background: hsla(240, 100%, 50%, 0.7);
transform: rotateZ(210deg) skew(-30deg) translate(-200px, -60px) scaleY(0.864);
}
.side {
background: hsla( 0, 100%, 50%, 0.7);
transform: rotateZ(90deg) skewX(-30deg) scaleY(0.864) translate(68px, -131px);
}
</style>
<svg viewBox="-130 -20 300 100">
<g id="cube" class="cube-unit">
<rect width="21" height="24" fill="#00affa" stroke="#0079ad" transform="skewY(30)"/>
<rect width="21" height="24" fill="#008bc7" stroke="#0079ad" transform="skewY(-30) translate(21 24.3)"/>
<rect width="21" height="21" fill="#009CDE" stroke="#0079ad" transform="scale(1.41,.81) rotate(45) translate(0 -21)"/>
</g>
</svg>
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.
