Devlog #6 :)

So Hey People, I am feeling Immensely satisfied that Q Sphere feature is Mostly done.

Also the GateWiki part is also done that tells You about Gate you Clicked on Gates Tray, again to tell you can drag gates into Circuit to build and Tap to know about it. May be I also link blogs on that Later.

Now about Q Sphere Part

Okay , Now let me share about Making of Q Sphere Part, So earlier I was not able to visualize it, but somehow I got to Know about Spherical Coordinates which is dependent on:

• theta: angle of Line from Z Axis
• phi: angle of Line from x Axis

But clicked finally after frustration of not understanding it earlier. Then I gone to Google searching to see 3d visuals and AI to understand how we calculate those angles: So -

1. Based on hamming weights (Means how many 1s in that State, Suppose in |01> has 1 1s and 011 have 2 1s ) and total qubits which help us find theta and divide sphere into sort of rings for similar nodes/lines of same hamming weights in same ring.

2. Then we find how we calculate phi based on total active states in each ring and slicing ring into same proportion.

I don’t know why but that was a finally a kick for me :)

Finally since you will plot lines and nodes on spherical surface you have to convert theta and phi to coordinates [x, y, z] which you do using polar coordinates. Then after plotting them, a major part of Q sphere is made. now as you can see on 2nd screenshot left side the Sphere shows nodes for respective State. more chances of being 0 is on upper half and more 1 chance on bottom half.

Structured the folders

Also I worked on code Structure to keep all algos separated:

• To parse stateVectors
• Parse the frontend data to json circuit instructions
• Making all q sphere data from stateVectors
• parsing Code to export in Qiskit.
• more such functions too..

So yeah that was work I did, little more things is needed to build, after that project is done. Adding some multi qubit gates is next important thing now.

I would be pushing on Github this Version and Vercel too now. Go check it out.

Namaste!!!

Devlog #5 :)

To be very honest I forget that its 8 hours 47 minutes in hackatime and it didn’t posted devlog until I got a Notification on slack.

Sooo Guys! In this part of work I had to decide a thing that should I add Visualization of Qubits or not and then I realized that’s the whole point of project [to let people easily visualize whats happening]. So thats why I have decided add Q sphere.

Folder Structure

First of all I realized that my project was using url images and project structure was actually messing up as files and folders were increasing, so I decided to first organise the chaos and downloading all internet 3d assets in project. [Screenshot -1]. Because without a better organization of project it would get intimidatingly hard for others to contribute.

Big Endian vs Little Endian

Now second part is making the Result page of Qubit execution match that 3d glassmorphism design and white browsing through IBM composer (Tool for making Circuits) I got to observe that states were actually reverse in order.

Suppose you applied hadamard gate to first qubit in 2 qubit system so instead of showing Probabilities of states as |00> = 50%, |01> = 0, |10> = 50%, |11> = 0, it reversed for 01 and 10. So after reading on internet about this I got to know that both ways are right and just differs because order you calcuate tensors:

• G1 * G2 * G3.. gives you Big Endian Version which considers least qubit as important
• Vice versa in case of Little Endian as IBM uses.

So I implemented both in project. Earlier I thought I broke a physics Law [haha.]

Making Q Sphere

Its for Q sphere [2nd screenshot], that’s what help you understand statevector, because we can’t imagine more than 3D, so IBM come with this method.

Basically I have used react 3 fiber that helps us write Three.js in react easily, using JSX instead of js manually, and it shows 3 lines in space which represent each state in vector:

• Bigger the node on top, bigger its probability.
• Color tells phase angle from origin.
• More 0 probability the vector will be pointing on upper hemisphere’s top and similarly more 1 will point on bottom of lower hemisphere.

I am still processing [x,y,z] coordinates of line. Q sphere now shows random plots, I have to parse state vector to correct representation, will tell you about it in next devlog after I have learnt and implemented this.

Screen Restrictions

Forth is more of usability, side by side you can see either, code and graph or sphere and graph, so understand better.

Also I added a screen restrictor for small screens since running this project on phone won’t be possible because design clutterness (forget to add screenshot, but you can check live).

So hope you liked this version, I know it’s too much of quantum but yeah like others I am also trying to understand better.

At Last, don’t forget to check attachments and share your feedbacks. Also I think I would be pushing on github now before developing futher.

Namaste!!!

Devlog #4

This Part was all about making Navigation work between pages and since last time I got some feedbacks that Home and Playground VIbe Don’t match so made Playground more 3d.

Here are Changes -

1. Using react router, Made Navigation between Home and Playground and Vice versa.

1. Used 3d Resources like Background images, Button images to make it look 3d Videogame.

1. Added button animations like some changes images, some spins. Improved qubit adjust box.

1. Added tooltip component so people know what buttons does what, since buttons are image based.

So, I have tried to make project look 3d Glassmorphism and minimal too. check out video attached to see progress till now .

#Devlog 3

Made Homepage for Cirqmon because I wanted to Put Medium blogs and Tool at one place so this will act as Entry door easily. Experimented with designs, fonts and images to make it feel like 3d Cartoon themed. Following things made -

1. At first “what is does” Hero Section telling people that its a Colorful way to play and learn to make Quantum Circuits. Actually in hero section I have experimented with 3d images animations but it looked distracting UI so Removed it. but Kept H and Y gates to give a idea of Builder.

1. Blogs Section is where it will fetch Quantum related Blogs from Medium (will write soon). Don’t forget to notice that Astronaut. Data is dummy. the Boxes use Backdrop transparent design to match with 3d design.

1. Last is for People who would like to give feedbacks. Buttons are Demo for now.

Basically UI for Homepage is Done. Now in next Version WIll use router for Navigation. ALso TBH Gemini really Helped me with Box Shadow button effects which I adjusted according to project Later.

Do give Feedbacks please :)

Its Devlog 2 and in midway didn’t knew That I will be able to go further in project but somehow Curosity pushed it. So I have basically in this Version I made following new Things -

1. Added fundamental Single Qubit Gates and the Moment someone drag Gates into Circuit and it get Translated into circuit Instructions JSON which tracks for which gate is applied at target and step;

2. The moment you click on Playcircuit button it Calculates the probability of Each possible Qubit state and corresponding qiskit code;

Basically this part of calculating the Circuit I had options either to use Qiskit directly via Python, Use react pre-written Scripts in react or Reinvent the Wheel by making my own Simulator which might not be as Efficient as Already made ones. So to see how strong my kidneys are I chose 3rd one. But you won’t believe I got answers to all My questions whether Why more qubits means exponential computation time, or tensors and many other things which I will write in blogs in some time.

So basically it was about initializing a State vector and then running step by step tensor product of gates applied and then when I got a single wire as a result of all gates in each step, then multiply the state vector with Matrix which contains 2^N rows and columns (n is number of qubits) which finally gives you the amplitudes of each state. FInally you format them to Show.

Now it still need better design and More code organization after which I will push new Version; till then You are welcome for Questions and Suggestions.

Note - This version handle single qubits till now.

Quite a While I started to learn about quantum Computing and observed that its still gives too research vibes for a beginner to overwhelm and leave it.

This is Cirqmon which I am making so Building Quantum circuits become some fun without dumping every information and expecting everyone to be a Researcher.

Started with making on React, giving it Cartoon or Animated vibe, earlier I thought to make it Doremon themed but later found that it would give copyright issues.

For now features added-
1 ) You can Drag and Drog Quantum gates from Tray into Circuit Canvas.

2 ) Music and Background Manage buttons.

3 ) I have tried to play with Vector and Cartoon Images in Transition.

4 ) Adjust Qubits and Nodes/Steps from Drawer earlier I thought to Use Slider but used Buttons later to Avoid touch screen inconsistencies.

While making the Drag and Drop canvas Features, found that using HTML Drag and drop API sometimes break on Safari and other browers and it was still making codebase look complicated for others or even me in future to Contribute. So I used @dnd kit for drag and drop feature.

Also I kept a Limit on Qubits and Nodes to Keep Execution Easier and test.

Majorly a Structure is Done,