So lately I’ve been on quite a bunch of adventures with SkiaSharp in Xamarin.Forms! 😀 You know how it is for me, pushing the limits of the framework as usual for the fun 😉 And this right here is one of those adventures I’m going to share with you all…
Little Backstory…
I’ve always been fascinated by the Atom’s graphical structure being the science nerd back in school days. I’ve always loved the simulation of the Electrons circulating around the atom’s core filled with Neutrons and Protons. 😀 So while reminiscing those memories, I was thinking of ways to play around with SkiaSharp framework, and suddenly, AHA! A light bulb lit-up on my head! 😀
I’ve decided to build an Atom Simulation in SkiaSharp, with Xamarin.Forms! 😉
A sneak peek!
TADAAA! 😀
So where is it going?
Haven’t you ever thought those animated atom structure simulation they show on TV was very very cool? Well I’m thinking of building a similar simulation with SkiaSharp on top of Xamarin.Forms! 😀
And this is going to be a step by step process, where I shall begin with the basic 2D structure and slowly moving towards the complex animated simulation!
Well I’ve already started developing this some time back, and I’ve made quite a bit of progress.
I have hosted this on Github: github.com/UdaraAlwis/SkiaSharpAtomStructure. So that anyone can try it out or add improvements to it, and yes I’m open for pull requests! 😉
Code behind tech bits?
Well basically as you may have already figured out, it’s a Xamarin.Forms project, and I’m using the awesome SkiaSharp for rendering the graphics.
And to be specific with SkiaSharp I’m using the following to render the cool stuff:
- 2D Shapes Drawing
- Canvas Translations and Rotations
- Continuous Animation Rendering
- Gradient Shading
- Touch handling
Pretty cool set of features right there, out of the box with SkiaSharp eh! 😉
Progress so far…
I’ve broken the progressive steps to several Pages in the project for clear distinction between the code behind.
I will be updating this post as the project moves forward with improvements and new progression steps.
And here they are…
1. Atom Silhouette
So the first step was to simply build a silhouette of the atom structure. There you have the core with Neutrons and Protons, and the Electrons around it in their own orbits.
Basically I’m using the SkCanvas.DrawCircle() to draw the center core and then SkCanvas.DrawOval() to draw the Oval Orbits around the core. 😉
Then I’m drawing the “Electron dot” for each orbit using the corner most point of the Oval Orbit, which is basically the width of the Oval. Tricky yeah!
You might think how about the angles of the oval? Oh yeah I’m using Canvas Rotation for each orbit draw cycle, SkCanvas.RotateDegrees(xx degrees)! 😀
And there’s a simple +/- increment mechanism for increasing and decreasing the number of electrons around the orbit!
You can take a look at the implementation: AtomSilhouettePage.xaml.cs
2. Atom Orbital Paths
Here’s a little improvement for the previous step, where as I’ve added some gradient effect for the drawing of the Oval path with the same SkCanvas.DrawOval() call.
The CreateSweepGradient() is one of the way to create a gradient color effect in SkiaSharp, whereas we’ve used white and dark gray as the color here.
Oh Gradients are always cool yeah! 😉
You can take a look at the implementation: AtomOrbitalPathsPage.xaml.cs
3. Atom Orbital Paths Uneven
Now we know in reality the Atom’s electron orbit is not a nice even orbit, so we’re going to reflect just that in this progress step! 😀
So basically I’m randomly generating the Oval’s supposed width for each orbit, thus giving the above output!
You can take a look at the implementation: AtomOrbitalPathsUnevenPage.xaml.cs
4. Atom Animated Silhouette
This is the step where I kick it up a notch, with the Animation rendering using SkiaSharp!
So as we all know there’s no direct animation rendering support with SkiaSharp, since its a on demand 2D vector graphics rendering system.
What I’m doing here to get the electron dot’s to movement on the oval orbit, is I’m rendering it’s each 360 degrees positions continuously on a timer loop. Might sound pretty complex, but its actually simple! 😉
You can take a look at the implementation: AtomAnimatedPage.xaml.cs
5. A cool touch feature!
I’ve added something cool for the number of displayed Electron’s incremental mechanism!
I’ve added a touch handling feature to the atom’s electron incremental mechanism, so now basically you can swipe up or down the screen to increase or decrease the number of electron orbits of the Atom! 😉 Now instead of clicking on the +/- buttons, rather you could swipe up or down to increase or decrease the electron orbits.
This was done simply using the SkiaSharp’s built in touch event handler, and calculating the touch movement direction, thus determining up or down direction! 😀
6. Atom Animated Uneven Orbits
So here’s the next progression step, with uneven orbits animation! I’m using a gradient oval drawing for each orbit, similar to what I’ve explained above in one of the previous steps. And I’m generating the Orbits Width upon a given random value.
You can take a look at the implementation: AtomAnimatedUnevnOrbitsPage.xaml.cs
7. ….T B C…..
This will be the next progression step. Since this post will be a continuously updated post along with every progression step I make in this fun project! 😀 So stay tuned!
That’s all for now!
So like I said at the beginning, this is a continuous fun protect, which I’ll keep on improving step by step. And once again, I will be accepting your pull requests for any improvements you suggest, or just drop a comment or message me of your suggestions. 😀
Don’t forget, feel free to try this project from my Github repo: github.com/UdaraAlwis/SkiaSharpAtomStructure
I will be updating this post as the project progresses on hopefully! 😉
ÇøŋfuzëÐ SøurcëÇødë 