// +-+-+-+ +-+-+-+-+-+-+ // |T|h|e| |T|o|n|e|r|s| // +-+-+-+ +-+-+-+-+-+-+ // Wanted to mix an isometric library with mouse events and // decided to add some sound, this is the result // Credits: // Isometric Library : Obelisk.js // Sound and Interactivity : CreateJS // Very verbose code + sounds/yells by me. // Refactoring and Drying left to the viewer as an excercise. // To Do: // Better Mobile support // Canvas & Scene Init: var canvas = document.getElementById("canvas01"); var point = new obelisk.Point(300, 60); var pixelView = new obelisk.PixelView(canvas, point); var title = document.getElementById('title'); // Cubes setup: //colors var color1 = new obelisk.CubeColor().getByHorizontalColor(0xa8e6cf); var color2 = new obelisk.CubeColor().getByHorizontalColor(0xdcedc1); var color3 = new obelisk.CubeColor().getByHorizontalColor(0xffd3b6); var color4 = new obelisk.CubeColor().getByHorizontalColor(0xffaaa5); var color5 = new obelisk.CubeColor().getByHorizontalColor(0xff8b94); var color6 = new obelisk.CubeColor().getByHorizontalColor(0x62A9FF); var color7 = new obelisk.CubeColor().getByHorizontalColor(0x99FD77); // Seizure inducing : var tColors = ['#ffffff', '#a8e6cf', '#dcedc1', '#ffd3b6', '#ffaaa5', '#ff8b94', '#62A9FF', '#99FD77']; var colors = ['#222', '#222', '#222', '#222', '#222', '#222', '#222', '#222', ]; var dimensionCube = new obelisk.CubeDimension(40, 40, 40); var cube1 = new obelisk.Cube(dimensionCube, color1); var cube2 = new obelisk.Cube(dimensionCube, color2); var cube3 = new obelisk.Cube(dimensionCube, color3); var cube4 = new obelisk.Cube(dimensionCube, color4); var cube5 = new obelisk.Cube(dimensionCube, color5); var cube6 = new obelisk.Cube(dimensionCube, color6); var cube7 = new obelisk.Cube(dimensionCube, color7); var cubePos1 = new obelisk.Point3D(0, 240, 0); var cubePos2 = new obelisk.Point3D(40, 200, 0); var cubePos3 = new obelisk.Point3D(80, 160, 0); var cubePos4 = new obelisk.Point3D(120, 120, 0); var cubePos5 = new obelisk.Point3D(160, 80, 0); var cubePos6 = new obelisk.Point3D(200, 40, 0); var cubePos7 = new obelisk.Point3D(240, 0, 0); var cube1eyeRPos = new obelisk.Point3D(40, 244, 2); var cube1eyeLPos = new obelisk.Point3D(40, 264, 2); var cube1eyeRPosTop = new obelisk.Point3D(40, 244, 90); var cube1eyeLPosTop = new obelisk.Point3D(40, 264, 90); var cube1mouthPos = new obelisk.Point3D(40, 248, 20); var cube2eyeRPos = new obelisk.Point3D(80, 204, 2); var cube2eyeLPos = new obelisk.Point3D(80, 224, 2); var cube2eyeRPosTop = new obelisk.Point3D(80, 204, 90); var cube2eyeLPosTop = new obelisk.Point3D(80, 224, 90); var cube2mouthPos = new obelisk.Point3D(80, 208, 20); var cube3eyeRPos = new obelisk.Point3D(120, 164, 2); var cube3eyeLPos = new obelisk.Point3D(120, 184, 2); var cube3eyeRPosTop = new obelisk.Point3D(120, 164, 90); var cube3eyeLPosTop = new obelisk.Point3D(120, 184, 90); var cube3mouthPos = new obelisk.Point3D(120, 168, 20); var cube4eyeRPos = new obelisk.Point3D(160, 124, 2); var cube4eyeLPos = new obelisk.Point3D(160, 144, 2); var cube4eyeRPosTop = new obelisk.Point3D(160, 124, 90); var cube4eyeLPosTop = new obelisk.Point3D(160, 144, 90); var cube4mouthPos = new obelisk.Point3D(160, 128, 20); var cube5eyeRPos = new obelisk.Point3D(200, 84, 2); var cube5eyeLPos = new obelisk.Point3D(200, 104, 2); var cube5eyeRPosTop = new obelisk.Point3D(200, 84, 90); var cube5eyeLPosTop = new obelisk.Point3D(200, 104, 90); var cube5mouthPos = new obelisk.Point3D(200, 88, 20); var cube6eyeRPos = new obelisk.Point3D(240, 44, 2); var cube6eyeLPos = new obelisk.Point3D(240, 64, 2); var cube6eyeRPosTop = new obelisk.Point3D(240, 44, 90); var cube6eyeLPosTop = new obelisk.Point3D(240, 64, 90); var cube6mouthPos = new obelisk.Point3D(240, 48, 20); var cube7eyeRPos = new obelisk.Point3D(280, 4, 2); var cube7eyeLPos = new obelisk.Point3D(280, 24, 2); var cube7eyeRPosTop = new obelisk.Point3D(280, 4, 90); var cube7eyeLPosTop = new obelisk.Point3D(280, 24, 90); var cube7mouthPos = new obelisk.Point3D(280, 8, 20); // Render for hit Objects pixelView.renderObject(cube1, cubePos1); var dataUrl1 = canvas.toDataURL(); var bitmap1 = new createjs.Bitmap(dataUrl1); bitmap1.name = 'uno'; pixelView.clear(); // pixelView.renderObject(cube2, cubePos2); var dataUrl2 = canvas.toDataURL(); var bitmap2 = new createjs.Bitmap(dataUrl2); bitmap2.name = 'dos'; pixelView.clear(); // pixelView.renderObject(cube3, cubePos3); var dataUrl3 = canvas.toDataURL(); var bitmap3 = new createjs.Bitmap(dataUrl3); bitmap3.name = 'tres'; pixelView.clear(); // pixelView.renderObject(cube4, cubePos4); var dataUrl4 = canvas.toDataURL(); var bitmap4 = new createjs.Bitmap(dataUrl4); bitmap4.name = 'cuatro'; pixelView.clear(); // pixelView.renderObject(cube5, cubePos5); var dataUrl5 = canvas.toDataURL(); var bitmap5 = new createjs.Bitmap(dataUrl5); bitmap5.name = 'cinco'; pixelView.clear(); // pixelView.renderObject(cube6, cubePos6); var dataUrl6 = canvas.toDataURL(); var bitmap6 = new createjs.Bitmap(dataUrl6); bitmap6.name = 'seis'; pixelView.clear(); // pixelView.renderObject(cube7, cubePos7); var dataUrl7 = canvas.toDataURL(); var bitmap7 = new createjs.Bitmap(dataUrl7); bitmap7.name = 'siete'; pixelView.clear(); addBackground(); // //Eyes: var eyeColor = new obelisk.SideColor(0x000000, 0x000000); var eyeDimension = new obelisk.SideYDimension(12, 12); var eye = new obelisk.SideY(eyeDimension, eyeColor); // Mouth: var mouthColor = new obelisk.SideColor(0x000000, 0xFFFFFF); var mouthDimension = new obelisk.SideYDimension(28, 56); var mouth = new obelisk.SideY(mouthDimension, mouthColor); // Real Render: pixelView.renderObject(cube1, cubePos1); pixelView.renderObject(cube2, cubePos2); pixelView.renderObject(cube3, cubePos3); pixelView.renderObject(cube4, cubePos4); pixelView.renderObject(cube5, cubePos5); pixelView.renderObject(cube6, cubePos6); pixelView.renderObject(cube7, cubePos7); pixelView.renderObject(eye, cube1eyeRPos); pixelView.renderObject(eye, cube1eyeLPos); pixelView.renderObject(eye, cube2eyeRPos); pixelView.renderObject(eye, cube2eyeLPos); pixelView.renderObject(eye, cube3eyeRPos); pixelView.renderObject(eye, cube3eyeLPos); pixelView.renderObject(eye, cube4eyeRPos); pixelView.renderObject(eye, cube4eyeLPos); pixelView.renderObject(eye, cube5eyeRPos); pixelView.renderObject(eye, cube5eyeLPos); pixelView.renderObject(eye, cube6eyeRPos); pixelView.renderObject(eye, cube6eyeLPos); pixelView.renderObject(eye, cube7eyeRPos); pixelView.renderObject(eye, cube7eyeLPos); // Easel.JS: var stage = new createjs.Stage("canvas01"); init(); function init() { // Sound // Add loader messages var audioPath = "https://kenoleon.github.io/Front-End-Web-Dev-UI-UX/assets/CodepenSounds/"; var sounds = [{ id: "Do", src: "DoVocal.ogg" }, { id: "Re", src: "ReVocal.ogg" }, { id: "Mi", src: "MiVocal.ogg" }, { id: "Fa", src: "FaVocal.ogg" }, { id: "Sol", src: "SolVocal.ogg" }, { id: "La", src: "LaVocal.ogg" }, { id: "Si", src: "SiVocal.ogg" }]; // Sounds ON/OFF createjs.Sound.alternateExtensions = ["mp3"]; createjs.Sound.registerSounds(sounds, audioPath); // Sound // Hit Bitmaps: stage.enableMouseOver(10); //createjs.Touch.enable(stage); stage.addChild(bitmap7); stage.addChild(bitmap6); stage.addChild(bitmap5); stage.addChild(bitmap4); stage.addChild(bitmap3); stage.addChild(bitmap2); stage.addChild(bitmap1); // watch out for bubbling issues bitmap1.on("mouseover", handleInteraction); bitmap1.on("mouseout", handleInteraction); bitmap2.on("mouseover", handleInteraction); bitmap2.on("mouseout", handleInteraction); bitmap3.on("mouseover", handleInteraction); bitmap3.on("mouseout", handleInteraction); bitmap4.on("mouseover", handleInteraction); bitmap4.on("mouseout", handleInteraction); bitmap5.on("mouseover", handleInteraction); bitmap5.on("mouseout", handleInteraction); bitmap6.on("mouseover", handleInteraction); bitmap6.on("mouseout", handleInteraction); bitmap7.on("mouseover", handleInteraction); bitmap7.on("mouseout", handleInteraction); } function handleInteraction(event) { if (event.type === "mouseover") { // if pointer needed // document.body.style.cursor = "cell"; // console.log(event.target.name); var dimensionCube2 = new obelisk.CubeDimension(40, 40, 120); pixelView.clear(); addBackground(); if (event.target.name === "uno") { createjs.Sound.play("Do"); document.body.style.background = colors[1]; canvas.style.background = colors[1]; title.style.color = tColors[1]; tallCube = new obelisk.Cube(dimensionCube2, color1); pixelView.renderObject(tallCube, cubePos1); pixelView.renderObject(cube2, cubePos2); pixelView.renderObject(cube3, cubePos3); pixelView.renderObject(cube4, cubePos4); pixelView.renderObject(cube5, cubePos5); pixelView.renderObject(cube6, cubePos6); pixelView.renderObject(cube7, cubePos7); pixelView.renderObject(eye, cube1eyeRPosTop); pixelView.renderObject(eye, cube1eyeLPosTop); pixelView.renderObject(mouth, cube1mouthPos); pixelView.renderObject(eye, cube2eyeRPos); pixelView.renderObject(eye, cube2eyeLPos); pixelView.renderObject(eye, cube3eyeRPos); pixelView.renderObject(eye, cube3eyeLPos); pixelView.renderObject(eye, cube4eyeRPos); pixelView.renderObject(eye, cube4eyeLPos); pixelView.renderObject(eye, cube5eyeRPos); pixelView.renderObject(eye, cube5eyeLPos); pixelView.renderObject(eye, cube6eyeRPos); pixelView.renderObject(eye, cube6eyeLPos); pixelView.renderObject(eye, cube7eyeRPos); pixelView.renderObject(eye, cube7eyeLPos); } else if (event.target.name === "dos") { createjs.Sound.play("Re"); document.body.style.background = colors[2]; canvas.style.background = colors[2]; title.style.color = tColors[2]; tallCube = new obelisk.Cube(dimensionCube2, color2); pixelView.renderObject(cube1, cubePos1); pixelView.renderObject(tallCube, cubePos2); pixelView.renderObject(cube3, cubePos3); pixelView.renderObject(cube4, cubePos4); pixelView.renderObject(cube5, cubePos5); pixelView.renderObject(cube6, cubePos6); pixelView.renderObject(cube7, cubePos7); pixelView.renderObject(eye, cube2eyeRPosTop); pixelView.renderObject(eye, cube2eyeLPosTop); pixelView.renderObject(mouth, cube2mouthPos); pixelView.renderObject(eye, cube1eyeRPos); pixelView.renderObject(eye, cube1eyeLPos); pixelView.renderObject(eye, cube3eyeRPos); pixelView.renderObject(eye, cube3eyeLPos); pixelView.renderObject(eye, cube4eyeRPos); pixelView.renderObject(eye, cube4eyeLPos); pixelView.renderObject(eye, cube5eyeRPos); pixelView.renderObject(eye, cube5eyeLPos); pixelView.renderObject(eye, cube6eyeRPos); pixelView.renderObject(eye, cube6eyeLPos); pixelView.renderObject(eye, cube7eyeRPos); pixelView.renderObject(eye, cube7eyeLPos); } else if (event.target.name === "tres") { createjs.Sound.play("Mi"); document.body.style.background = colors[3]; canvas.style.background = colors[3]; title.style.color = tColors[3]; tallCube = new obelisk.Cube(dimensionCube2, color3); pixelView.renderObject(cube1, cubePos1); pixelView.renderObject(cube2, cubePos2); pixelView.renderObject(tallCube, cubePos3); pixelView.renderObject(cube4, cubePos4); pixelView.renderObject(cube5, cubePos5); pixelView.renderObject(cube6, cubePos6); pixelView.renderObject(cube7, cubePos7); pixelView.renderObject(eye, cube3eyeRPosTop); pixelView.renderObject(eye, cube3eyeLPosTop); pixelView.renderObject(mouth, cube3mouthPos); pixelView.renderObject(eye, cube1eyeRPos); pixelView.renderObject(eye, cube1eyeLPos); pixelView.renderObject(eye, cube2eyeRPos); pixelView.renderObject(eye, cube2eyeLPos); pixelView.renderObject(eye, cube4eyeRPos); pixelView.renderObject(eye, cube4eyeLPos); pixelView.renderObject(eye, cube5eyeRPos); pixelView.renderObject(eye, cube5eyeLPos); pixelView.renderObject(eye, cube6eyeRPos); pixelView.renderObject(eye, cube6eyeLPos); pixelView.renderObject(eye, cube7eyeRPos); pixelView.renderObject(eye, cube7eyeLPos); } else if (event.target.name === "cuatro") { createjs.Sound.play("Fa"); document.body.style.background = colors[4]; canvas.style.background = colors[4]; title.style.color = tColors[4]; tallCube = new obelisk.Cube(dimensionCube2, color4); pixelView.renderObject(cube1, cubePos1); pixelView.renderObject(cube2, cubePos2); pixelView.renderObject(cube3, cubePos3); pixelView.renderObject(tallCube, cubePos4); pixelView.renderObject(cube5, cubePos5); pixelView.renderObject(cube6, cubePos6); pixelView.renderObject(cube7, cubePos7); pixelView.renderObject(eye, cube4eyeRPosTop); pixelView.renderObject(eye, cube4eyeLPosTop); pixelView.renderObject(mouth, cube4mouthPos); pixelView.renderObject(eye, cube1eyeRPos); pixelView.renderObject(eye, cube1eyeLPos); pixelView.renderObject(eye, cube2eyeRPos); pixelView.renderObject(eye, cube2eyeLPos); pixelView.renderObject(eye, cube3eyeRPos); pixelView.renderObject(eye, cube3eyeLPos); pixelView.renderObject(eye, cube5eyeRPos); pixelView.renderObject(eye, cube5eyeLPos); pixelView.renderObject(eye, cube6eyeRPos); pixelView.renderObject(eye, cube6eyeLPos); pixelView.renderObject(eye, cube7eyeRPos); pixelView.renderObject(eye, cube7eyeLPos); } else if (event.target.name === "cinco") { createjs.Sound.play("Sol"); document.body.style.background = colors[5]; canvas.style.background = colors[5]; title.style.color = tColors[5]; tallCube = new obelisk.Cube(dimensionCube2, color5); pixelView.renderObject(cube1, cubePos1); pixelView.renderObject(cube2, cubePos2); pixelView.renderObject(cube3, cubePos3); pixelView.renderObject(cube4, cubePos4); pixelView.renderObject(tallCube, cubePos5); pixelView.renderObject(cube6, cubePos6); pixelView.renderObject(cube7, cubePos7); pixelView.renderObject(eye, cube5eyeRPosTop); pixelView.renderObject(eye, cube5eyeLPosTop); pixelView.renderObject(mouth, cube5mouthPos); pixelView.renderObject(eye, cube1eyeRPos); pixelView.renderObject(eye, cube1eyeLPos); pixelView.renderObject(eye, cube2eyeRPos); pixelView.renderObject(eye, cube2eyeLPos); pixelView.renderObject(eye, cube3eyeRPos); pixelView.renderObject(eye, cube3eyeLPos); pixelView.renderObject(eye, cube4eyeRPos); pixelView.renderObject(eye, cube4eyeLPos); pixelView.renderObject(eye, cube6eyeRPos); pixelView.renderObject(eye, cube6eyeLPos); pixelView.renderObject(eye, cube7eyeRPos); pixelView.renderObject(eye, cube7eyeLPos); } else if (event.target.name === "seis") { createjs.Sound.play("La"); document.body.style.background = colors[6]; canvas.style.background = colors[6]; title.style.color = tColors[6]; tallCube = new obelisk.Cube(dimensionCube2, color6); pixelView.renderObject(cube1, cubePos1); pixelView.renderObject(cube2, cubePos2); pixelView.renderObject(cube3, cubePos3); pixelView.renderObject(cube4, cubePos4); pixelView.renderObject(cube5, cubePos5); pixelView.renderObject(tallCube, cubePos6); pixelView.renderObject(cube7, cubePos7); pixelView.renderObject(eye, cube6eyeRPosTop); pixelView.renderObject(eye, cube6eyeLPosTop); pixelView.renderObject(mouth, cube6mouthPos); pixelView.renderObject(eye, cube1eyeRPos); pixelView.renderObject(eye, cube1eyeLPos); pixelView.renderObject(eye, cube2eyeRPos); pixelView.renderObject(eye, cube2eyeLPos); pixelView.renderObject(eye, cube3eyeRPos); pixelView.renderObject(eye, cube3eyeLPos); pixelView.renderObject(eye, cube4eyeRPos); pixelView.renderObject(eye, cube4eyeLPos); pixelView.renderObject(eye, cube5eyeRPos); pixelView.renderObject(eye, cube5eyeLPos); pixelView.renderObject(eye, cube7eyeRPos); pixelView.renderObject(eye, cube7eyeLPos); } else { createjs.Sound.play("Si"); document.body.style.background = colors[7]; canvas.style.background = colors[7]; title.style.color = tColors[7]; tallCube = new obelisk.Cube(dimensionCube2, color7); pixelView.renderObject(cube1, cubePos1); pixelView.renderObject(cube2, cubePos2); pixelView.renderObject(cube3, cubePos3); pixelView.renderObject(cube4, cubePos4); pixelView.renderObject(cube5, cubePos5); pixelView.renderObject(cube6, cubePos6); pixelView.renderObject(tallCube, cubePos7); pixelView.renderObject(eye, cube7eyeRPosTop); pixelView.renderObject(eye, cube7eyeLPosTop); pixelView.renderObject(mouth, cube7mouthPos); pixelView.renderObject(eye, cube1eyeRPos); pixelView.renderObject(eye, cube1eyeLPos); pixelView.renderObject(eye, cube2eyeRPos); pixelView.renderObject(eye, cube2eyeLPos); pixelView.renderObject(eye, cube3eyeRPos); pixelView.renderObject(eye, cube3eyeLPos); pixelView.renderObject(eye, cube4eyeRPos); pixelView.renderObject(eye, cube4eyeLPos); pixelView.renderObject(eye, cube5eyeRPos); pixelView.renderObject(eye, cube5eyeLPos); pixelView.renderObject(eye, cube6eyeRPos); pixelView.renderObject(eye, cube6eyeLPos); } } else { // document.body.style.cursor = "default"; pixelView.clear(); addBackground(); document.body.style.background = colors[0]; canvas.style.background = colors[0]; title.style.color = tColors[0]; pixelView.renderObject(cube1, cubePos1); pixelView.renderObject(cube2, cubePos2); pixelView.renderObject(cube3, cubePos3); pixelView.renderObject(cube4, cubePos4); pixelView.renderObject(cube5, cubePos5); pixelView.renderObject(cube6, cubePos6); pixelView.renderObject(cube7, cubePos7); pixelView.renderObject(eye, cube1eyeRPos); pixelView.renderObject(eye, cube1eyeLPos); pixelView.renderObject(eye, cube2eyeRPos); pixelView.renderObject(eye, cube2eyeLPos); pixelView.renderObject(eye, cube3eyeRPos); pixelView.renderObject(eye, cube3eyeLPos); pixelView.renderObject(eye, cube4eyeRPos); pixelView.renderObject(eye, cube4eyeLPos); pixelView.renderObject(eye, cube5eyeRPos); pixelView.renderObject(eye, cube5eyeLPos); pixelView.renderObject(eye, cube6eyeRPos); pixelView.renderObject(eye, cube6eyeLPos); pixelView.renderObject(eye, cube7eyeRPos); pixelView.renderObject(eye, cube7eyeLPos); } } function addBackground() { //floor: var floorDim = new obelisk.CubeDimension(300, 300, 40); var floorColor = new obelisk.CubeColor().getByHorizontalColor(0x444444); var floor = new obelisk.Cube(floorDim, floorColor); pixelView.renderObject(floor, new obelisk.Point3D(0, 0, -40)); // Turn grid on/Off gridMaker(20, 15, 15, 0, 0x666666); } function gridMaker(units, xSize, ySize, zHeight, gridColor) { var lineColor = new obelisk.LineColor(gridColor); var dimensionX = new obelisk.LineXDimension(xSize * units); var dimensionY = new obelisk.LineYDimension(ySize * units); var lineX = new obelisk.LineX(dimensionX, lineColor); var lineY = new obelisk.LineY(dimensionY, lineColor); for (x = 0; x < xSize + 1; x++) { pixelView.renderObject(lineX, new obelisk.Point3D(0, x * units, zHeight * units)); } for (y = 0; y < ySize + 1; y++) { pixelView.renderObject(lineY, new obelisk.Point3D(y * units, 0, zHeight * units)); } }

!