DEV Community: prakasha

Building a Spin Wheel in React

prakasha — Sun, 09 Feb 2025 20:51:54 +0000

Building a spin Wheel was in my to-do list for a very long time; finally, finally i was able to spend time on this.

Step 1: Calculate segmentAngle

Let's assume we want to show 6 items in the wheel. const itemsCount = 6;

Divide the size of the wheel by the number of items => 360/6.
const segmentAngle = 360 / itemsCount;

Step 2: Identifying Radian & width from segmentAngle

You might be thinking, why do we need to identify radians 🧐?
I too had the same question. To find the exact width, we had to identify Radian.
Before even looking into this solution, i had used a random value as 45% 😂

Formula 1: radians = degrees * (π/180);
Formula 1: SegmentWidth = 2*radiusOfWheel*sin(segmentAngle)/2);

ref: Formula based on the central angle 🙏🏽

// Assume circle diameter is 300px
const radians = segmentAngle * (3.14 / 180); // 1.0466666666666669
const segmentWidth = 2 * 150 * Math.sin(1.0466666666666669 / 2); // 149.93103079293073

Step 3: Set Height for segment
Wondering why it cannot be 100%, because if you do, then the UI breaks. 😹

We had to adjust the height of each segment to fit correctly inside the circle.
To make it look like a pizza slice, adjust height = 50% and transformY to 50%

This is how it will look like now.

Step 4: Implementing random rotation
Take a random number and multiply it by the segmentAngle to get a random rotation.
And add 5 spins to it.

const randomSpin = Math.floor(Math.random() * itemsCount) * segmentAngle;
const totalRotation = rotation + (360 * 5) + randomSpin; // 5 full rotations

Below is my final result!

[Boost]

prakasha — Thu, 16 Jan 2025 19:13:54 +0000

🚀 Exploring the Power of Visualization: From Dependency Graphs to Molecular Structures 🧬

prakasha ・ Jan 12

#rag #softwareengineering #webdev #datascience

🚀 Exploring the Power of Visualization: From Dependency Graphs to Molecular Structures 🧬

prakasha — Sun, 12 Jan 2025 15:54:58 +0000

Over the past few weeks/months, i have been exploring import-graph-visualizer for visualizing modules and their dependencies in angular projects, which made me think and fascinated to build something similar but the same concept, like chemical compounds.

💡 Why Chemical Compounds and Not Dependencies?

When i was searching for data to render something with cytoscape and render a structure, i came across PubChem.
PubChem provides an amazing API to fetch detailed molecular data, so I thought: Why not visualize molecules first? 🤯

🚀 Real Vision ?

Started to imagine, software architects or Developers using augmented reality (like Apple Vision) to visually map out their system architecture, wherever they are 🌍. They could easily spot and understand dependencies in their system with a more engaging, almost gamified experience that reduces the learning curve for newer developers.

🌟 Current Implementation:

Interactive Molecule Visualization: Molecules and their bonds come to life, giving a clear picture of how components are connected.
Dynamic Data Fetching from PubChem API: Molecule data pulled in real-time.
Molecular Properties: Displaying key chemical properties like molecular formula, molecular weight, and IUPAC name.

🌟 Next Steps:

Animated Atoms: floating atoms making it more engaging and provide gamified effect.
Might add on later, (thinking something around 3D visualizations).

🌟 Technologies Used:

React for UI components
Cytoscape.js for graph-based molecular visualization
PubChem API for chemical data
Motion/Threejs for animations

GitHub: https://github.com/gprakasha/react-cytoscape-molecules