Duplicate crystal

Developer
Pimskie
Size
2,964 Kb
Views
12,144
  1. Duplicate crystal Previews
  2. Duplicate crystal HTML Codes
  3. Duplicate crystal CSS Codes
  4. Duplicate crystal JS Codes

How do I make an duplicate crystal?

The mouse determines angle and number of duplicates. What is a duplicate crystal? How do you make a duplicate crystal? This script and codes were developed by Pimskie on 07 January 2023, Saturday.

Duplicate crystal Previews
IQ Test

Duplicate crystal - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Duplicate crystal</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <canvas class="canvas js-canvas" width="500" height="500"></canvas>
</div> <script src="js/index.js"></script>
</body>
</html>

Duplicate crystal - Script Codes CSS Codes

html,
body { margin: 0; padding: 0; overflow: hidden; background-color: #000;
}
.container { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center;
}
.canvas { background-color: #000;
}

Duplicate crystal - Script Codes JS Codes

const q = (sel) => document.querySelector(sel);
const canvas = q('canvas');
const ctx = canvas.getContext('2d');
const PI2 = Math.PI * 2;
const w = 500;
const h = 500;
const wh = w * 0.5;
const hh = h * 0.5;
let numCopies = 14;
let numGroups = 5;
const colorLight = '#fff';
const colorDark = '#f7f8f9';
let groupRotationInc = 0.1;
let autoRotate = 0;
let autoAnimate = true;
let tick = 0;
const map = (value, start1, stop1, start2, stop2) => ((value - start1) / (stop1 - start1)) * (stop2 - start2) + start2;
const clear = () => { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
};
const drawShape = (rotate, scaleX, scaleY) => { ctx.save(); ctx.translate(wh, hh); ctx.rotate(rotate); ctx.scale(scaleX, scaleY); ctx.lineCap = 'square'; ctx.beginPath(); ctx.fillStyle = colorLight; ctx.strokeStyle = '#bab8b8'; ctx.moveTo(0, 0); ctx.lineTo(-25, -150); ctx.lineTo(0, -180); ctx.lineTo(0, 0); ctx.fill(); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.fillStyle = colorDark; ctx.moveTo(0, 0); ctx.lineTo(25, -150); ctx.lineTo(0, -180); ctx.lineTo(0, 0); ctx.fill(); ctx.stroke(); ctx.closePath(); ctx.restore();
};
const drawGroup = (index, percent, scale, baseRotation) => { const rotateInc = PI2 / numCopies; const scaleX = (index % 2 === 0) ? scale : -scale; const scaleY = scale; for (let i = 0; i < numCopies; i++) { const rotate = baseRotation + (rotateInc * i); drawShape(rotate, scaleX, scaleY); }
};
const loop = () => { clear(); let scale = 1; let baseRotation = autoRotate; const scaleMod = 1 / numGroups; const phase = map(Math.sin(tick), -1, 1, 0, 1); if (autoAnimate) { numGroups = 2 + (10 * phase); groupRotationInc = phase; } for (let i = 0; i < numGroups; i++) { drawGroup(i, (i + 1) / numGroups, scale, baseRotation); scale -= scaleMod; baseRotation += groupRotationInc; } autoRotate += 0.001; tick += 0.01; requestAnimationFrame(loop);
};
const onPointerOver = () => { autoAnimate = false;
};
const onPointerMove = (e) => { const event = (e.touches && e.touches.length) ? e.touches[0] : e; const { target, clientX: pointerX, clientY: pointerY } = event; const percX = ((pointerX - target.offsetLeft) / w); const percY = ((pointerY - target.offsetTop) / h); groupRotationInc = percX; numGroups = percY * 10;
};
const onPointerLeave = () => { autoAnimate = true; groupRotationInc = 0.1;
};
canvas.addEventListener('mouseenter', onPointerOver);
canvas.addEventListener('touchstart', onPointerOver);
canvas.addEventListener('mousemove', onPointerMove);
canvas.addEventListener('touchmove', onPointerMove);
canvas.addEventListener('mouseout', onPointerLeave);
canvas.addEventListener('touchend', onPointerLeave);
loop();
Duplicate crystal - Script Codes
Duplicate crystal - Script Codes
Home Page Home
Developer Pimskie
Username pimskie
Uploaded January 07, 2023
Rating 4
Size 2,964 Kb
Views 12,144
Do you need developer help for Duplicate crystal?

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!

Pimskie (pimskie) Script Codes
Name
A Pen by pimskie
Predictabe Flower
Aizawa Attractor
SVG animation test
Exploding hamburger - and more
Color circles
Circular canvas loader
CSS Push menu
Phyllotaxis
Planet attractors
Create amazing captions with AI!

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!