Isocubes
How do I make an isocubes?
What is a isocubes? How do you make a isocubes? This script and codes were developed by Rafael Abensur on 12 September 2022, Monday.
Isocubes - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>isocubes</title> <script>
(function() { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) { clearTimeout(id); };
}());
</script>
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
</head>
<body> <!--// Source: http://wxs.ca/iso/ -->
<canvas id="thecanvas"></canvas> <script src="js/index.js"></script>
</body>
</html>
Isocubes - Script Codes JS Codes
"use strict";
// Source: http://wxs.ca/iso/
var cubes = { "scale": 15, "width": 6, "height": 6, "grabbed": null, "cubes": [], "k": 0.01, "damp": 0.99, "margin": -20
};
var k = 0.01;
var r3 = Math.sqrt(3);
var hr3 = r3 / 2;
var rgbString = function rgbString(r, g, b) { return "rgb(" + Math.floor(r) + ", " + Math.floor(g) + ", " + Math.floor(b) + ")";
};
var isoCube = function isoCube(ctx, s, c) { var r = 230 - 80 * c.off, g = 230, b = 230 + 80 * c.off; //Upper Square ctx.beginPath(); ctx.fillStyle = c.grabbed ? "#ec008c" : rgbString(r, g, b); ctx.moveTo(0, 0); ctx.lineTo(s * hr3, -0.5 * s); ctx.lineTo(0, -1 * s); ctx.lineTo(-hr3 * s, -0.5 * s); ctx.lineTo(0, 0); ctx.fill(); //Right Square ctx.beginPath(); ctx.fillStyle = "#999999"; ctx.moveTo(0, 0); ctx.lineTo(0, 10 * s); ctx.lineTo(hr3 * s, 10 * s - 0.5 * s); ctx.lineTo(hr3 * s, -0.5 * s); ctx.lineTo(0, 0); ctx.fill(); //Left Square ctx.beginPath(); ctx.fillStyle = "#000000"; ctx.moveTo(0, 0); ctx.lineTo(0, 10 * s); ctx.lineTo(-hr3 * s, 10 * s - 0.5 * s); ctx.lineTo(-hr3 * s, -0.5 * s); ctx.lineTo(0, 0); ctx.fill();
};
var tick = function tick(g) { g.frame++; g.ctx.setTransform(1, 0, 0, 1, 0, 0); g.ctx.clearRect(0, 0, g.canvaswidth, g.canvasheight); g.cubes.forEach(function (c) { g.ctx.setTransform(1, 0, 0, 1, 0, 0); g.ctx.translate(hr3 * g.scale + g.margin, g.scale + g.margin); g.ctx.translate(g.scale * c.x * r3, g.scale * c.y * 1.5); if (c.y % 2 == 1) { g.ctx.translate(g.scale * hr3, 0); } g.ctx.translate(0, c.off * g.scale); isoCube(g.ctx, g.scale, c); var x = c.x, y = c.y, e = g.k * c.off; if (x == 0) { c.voff -= e; } else { var n = g.cubes[y * g.width + x - 1]; c.voff -= g.k * (c.off - n.off); } if (x == g.width - 1) { c.voff -= e; } else { var n = g.cubes[y * g.width + x + 1]; c.voff -= g.k * (c.off - n.off); } if (y == 0) { c.voff -= e; } else { var n = g.cubes[(y - 1) * g.width + x]; c.voff -= g.k * (c.off - n.off); } if (y == g.height - 1) { c.voff -= e; } else { var n = g.cubes[(y + 1) * g.width + x]; c.voff -= g.k * (c.off - n.off); } c.voff *= g.damp; }); //Update g.cubes.forEach(function (c) { c.off += c.voff; }); if (g.grabbed != null) { g.grabbed.off = (g.mouseY - g.grabY) / g.scale; g.grabbed.voff = 0; }
};
var initcubes = function initcubes(g) { g.cubes = []; for (var y = 0; y < g.height; y++) { for (var x = 0; x < g.width; x++) { var c = { "x": x, "y": y, "off": 0.0, "voff": 0.0, "grabbed": false }; g.cubes.push(c); } }
};
var init = function init() { var canvas = document.getElementById("thecanvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; window.onmousedown = function (e) { cubes.grabX = e.clientX; cubes.grabY = e.clientY; cubes.mouseX = e.clientX; cubes.mouseY = e.clientY; var gY = Math.floor((cubes.mouseY - cubes.margin) / (1.5 * cubes.scale)), gXt = (cubes.mouseX - cubes.margin) / (r3 * cubes.scale), gX = gY % 2 == 1 ? Math.floor(gXt - 0.5) : Math.floor(gXt); if (gX >= 0 && gX < cubes.width && gY >= 0 && gY < cubes.height) { cubes.grabbed = cubes.cubes[gY * cubes.width + gX]; cubes.grabbed.grabbed = true; } }; window.onmousemove = function (e) { cubes.mouseX = e.clientX; cubes.mouseY = e.clientY; }; window.onmouseup = function () { if (cubes.grabbed != null) { cubes.grabbed.grabbed = false; } cubes.grabbed = null; }; // setInterval(()=> { // cubes.grabX = Math.random() * canvas.width; // cubes.grabY = Math.random() * canvas.height; // cubes.mouseX = cubes.grabX; // cubes.mouseY = (cubes.grabY + 50 * (Math.random() < 0.5 ? -1.1 : 0.9)); // const gY = Math.floor((cubes.mouseY - cubes.margin) / (1.5 * cubes.scale)), // gXt = (cubes.mouseX - cubes.margin) / (r3 * cubes.scale), // gX = gY % 2 == 1 ? Math.floor(gXt - 0.5) : Math.floor(gXt); // if (gX >= 0 && gX < cubes.width && gY >= 0 && gY < cubes.height) { // cubes.grabbed = cubes.cubes[gY * cubes.width + gX]; // cubes.grabbed.grabbed = true; // } // cubes.mouseY = cubes.mouseY + 50 * (Math.random() < 0.5 ? -1 : 1); // if (cubes.grabbed != null) { // cubes.grabbed.grabbed = false; // } // }, 1000); window.onresize = function () { cancelAnimationFrame(cubes.anim); init(); }; cubes.ctx = canvas.getContext('2d'); cubes.canvaswidth = canvas.width; cubes.canvasheight = canvas.height; cubes.width = Math.ceil(cubes.canvaswidth / (cubes.scale * r3)); cubes.height = Math.ceil(cubes.canvasheight / (cubes.scale * 1.5)); cubes.frame = 0; initcubes(cubes); (function animloop() { cubes.anim = requestAnimationFrame(animloop); tick(cubes); })();
};
window.onload = init;
Developer | Rafael Abensur |
Username | abensur |
Uploaded | September 12, 2022 |
Rating | 4.5 |
Size | 4,776 Kb |
Views | 34,408 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Tesseract experiments | 3,557 Kb |
Chart tooltip example | 2,757 Kb |
Divinding circle | 2,390 Kb |
New Pen Template | 1,233 Kb |
D3.js Brazil Economic Underwater | 4,368 Kb |
Responsive SVG thermometer | 3,711 Kb |
React Progress Bar | 8,893 Kb |
D3.js with CSS sprites | 9,304 Kb |
Pocker Mortys dataviz | 13,940 Kb |
Amadurou Logo Animation | 3,208 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Blog Concept 2 | JGallardo | 2,994 Kb |
Price table | Serluk | 5,928 Kb |
My Interests | Anshusaxenaarora | 2,015 Kb |
Playing with transition timing | Mattgrosswork | 1,993 Kb |
Jstam.com Home Page | Jstam | 10,558 Kb |
CSS Letter animations | Sladix | 2,116 Kb |
A Pen by Dalton Liu | Liudalton | 12,437 Kb |
Awesome Full Page Menu Nav | Ey_intuitive | 4,194 Kb |
JavaScript Animation | Rcmeisty | 4,581 Kb |
Mega Menu by Joni | Asakasinsky | 3,171 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!