Skip to content

Instantly share code, notes, and snippets.

@w3collective

w3collective/zdog-3d-mario.html

Last active September 14, 2021 05:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save w3collective/3619a514c414230283eb62a14d4c18d6 to your computer and use it in GitHub Desktop.
Save w3collective/3619a514c414230283eb62a14d4c18d6 to your computer and use it in GitHub Desktop.
Download ZIP
Design and animate a pseudo 3D “Super Mario” with Zdog
Raw
zdog-3d-mario.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Design &amp; animate a pseudo 3D “Super Mario” with Zdog</title>
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
</head>
<body>
<canvas class="zdog-canvas" width="300" height="300"></canvas>
<script>
let isSpinning = true;
let illo = new Zdog.Illustration({
element: ".zdog-canvas",
dragRotate: true,
onDragStart: function () {
isSpinning = false;
},
});
const red = "#ff0000";
const blue = "#001cff";
const yellow = "#fffe00";
const black = "#000000";
const skin = "#ffaa7d";
const hair = "#340d00";
const shoe = "#5d2914";
const mario = [
// column 1
{ x: -60, y: 10, color: blue },
{ x: -60, y: 20, color: skin },
{ x: -60, y: 30, color: skin },
{ x: -60, y: 40, color: skin },
{ x: -60, y: 70, color: shoe },
// column 2
{ x: -50, y: -50, color: hair },
{ x: -50, y: -40, color: hair },
{ x: -50, y: -30, color: hair },
{ x: -50, y: 0, color: blue },
{ x: -50, y: 10, color: blue },
{ x: -50, y: 20, color: skin },
{ x: -50, y: 30, color: skin },
{ x: -50, y: 40, color: skin },
{ x: -50, y: 60, color: shoe },
{ x: -50, y: 70, color: shoe },
// column 3
{ x: -40, y: -70, color: red },
{ x: -40, y: -60, color: hair },
{ x: -40, y: -50, color: skin },
{ x: -40, y: -40, color: skin },
{ x: -40, y: -30, color: hair },
{ x: -40, y: -10, color: blue },
{ x: -40, y: 0, color: blue },
{ x: -40, y: 10, color: blue },
{ x: -40, y: 20, color: blue },
{ x: -40, y: 30, color: skin },
{ x: -40, y: 40, color: red },
{ x: -40, y: 50, color: red },
{ x: -40, y: 60, color: shoe },
{ x: -40, y: 70, color: shoe },
// column 4
{ x: -30, y: -80, color: red },
{ x: -30, y: -70, color: red },
{ x: -30, y: -60, color: hair },
{ x: -30, y: -50, color: hair },
{ x: -30, y: -40, color: hair },
{ x: -30, y: -30, color: skin },
{ x: -30, y: -20, color: skin },
{ x: -30, y: -10, color: blue },
{ x: -30, y: 0, color: blue },
{ x: -30, y: 10, color: blue },
{ x: -30, y: 20, color: blue },
{ x: -30, y: 30, color: red },
{ x: -30, y: 40, color: red },
{ x: -30, y: 50, color: red },
{ x: -30, y: 60, color: shoe },
{ x: -30, y: 70, color: shoe },
// column 5
{ x: -20, y: -80, color: red },
{ x: -20, y: -70, color: red },
{ x: -20, y: -60, color: hair },
{ x: -20, y: -50, color: skin },
{ x: -20, y: -40, color: hair },
{ x: -20, y: -30, color: skin },
{ x: -20, y: -20, color: skin },
{ x: -20, y: -10, color: red },
{ x: -20, y: 0, color: red },
{ x: -20, y: 10, color: red },
{ x: -20, y: 20, color: red },
{ x: -20, y: 30, color: yellow },
{ x: -20, y: 40, color: red },
{ x: -20, y: 50, color: red },
// column 6
{ x: -10, y: -80, color: red },
{ x: -10, y: -70, color: red },
{ x: -10, y: -60, color: skin },
{ x: -10, y: -50, color: skin },
{ x: -10, y: -40, color: skin },
{ x: -10, y: -30, color: skin },
{ x: -10, y: -20, color: skin },
{ x: -10, y: -10, color: blue },
{ x: -10, y: 0, color: blue },
{ x: -10, y: 10, color: blue },
{ x: -10, y: 20, color: red },
{ x: -10, y: 30, color: red },
{ x: -10, y: 40, color: red },
// column 7
{ x: 0, y: -80, color: red },
{ x: 0, y: -70, color: red },
{ x: 0, y: -60, color: skin },
{ x: 0, y: -50, color: skin },
{ x: 0, y: -40, color: skin },
{ x: 0, y: -30, color: skin },
{ x: 0, y: -20, color: skin },
{ x: 0, y: -10, color: blue },
{ x: 0, y: 0, color: blue },
{ x: 0, y: 10, color: blue },
{ x: 0, y: 20, color: red },
{ x: 0, y: 30, color: red },
{ x: 0, y: 40, color: red },
//column 8
{ x: 10, y: -80, color: red },
{ x: 10, y: -70, color: red },
{ x: 10, y: -60, color: black },
{ x: 10, y: -50, color: black },
{ x: 10, y: -40, color: skin },
{ x: 10, y: -30, color: hair },
{ x: 10, y: -20, color: skin },
{ x: 10, y: -10, color: red },
{ x: 10, y: 0, color: red },
{ x: 10, y: 10, color: red },
{ x: 10, y: 20, color: red },
{ x: 10, y: 30, color: yellow },
{ x: 10, y: 40, color: red },
{ x: 10, y: 50, color: red },
// column 9
{ x: 20, y: -70, color: red },
{ x: 20, y: -60, color: skin },
{ x: 20, y: -50, color: skin },
{ x: 20, y: -40, color: hair },
{ x: 20, y: -30, color: hair },
{ x: 20, y: -20, color: skin },
{ x: 20, y: -10, color: blue },
{ x: 20, y: 0, color: blue },
{ x: 20, y: 10, color: blue },
{ x: 20, y: 20, color: blue },
{ x: 20, y: 30, color: red },
{ x: 20, y: 40, color: red },
{ x: 20, y: 50, color: red },
{ x: 20, y: 60, color: shoe },
{ x: 20, y: 70, color: shoe },
// column 10
{ x: 30, y: -70, color: red },
{ x: 30, y: -50, color: skin },
{ x: 30, y: -40, color: skin },
{ x: 30, y: -30, color: hair },
{ x: 30, y: -10, color: blue },
{ x: 30, y: 0, color: blue },
{ x: 30, y: 10, color: blue },
{ x: 30, y: 20, color: blue },
{ x: 30, y: 30, color: skin },
{ x: 30, y: 40, color: red },
{ x: 30, y: 50, color: red },
{ x: 30, y: 60, color: shoe },
{ x: 30, y: 70, color: shoe },
//column 11
{ x: 40, y: -70, color: red },
{ x: 40, y: -50, color: skin },
{ x: 40, y: -40, color: skin },
{ x: 40, y: -30, color: hair },
{ x: 40, y: 0, color: blue },
{ x: 40, y: 10, color: blue },
{ x: 40, y: 20, color: skin },
{ x: 40, y: 30, color: skin },
{ x: 40, y: 40, color: skin },
{ x: 40, y: 60, color: shoe },
{ x: 40, y: 70, color: shoe },
// column 12
{ x: 50, y: -40, color: skin },
{ x: 50, y: 10, color: blue },
{ x: 50, y: 20, color: skin },
{ x: 50, y: 30, color: skin },
{ x: 50, y: 40, color: skin },
{ x: 50, y: 70, color: shoe },
];
mario.forEach(function (block) {
new Zdog.Box({
addTo: illo,
width: 10,
height: 10,
depth: 10,
stroke: false,
color: block.color,
translate: { x: block.x, y: block.y },
});
});
function animate() {
illo.rotate.y += isSpinning ? 0.05 : 0;
illo.updateRenderGraph();
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
@w3collective
Copy link
Author

Source => https://w3collective.com/design-super-mario-zdog/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment