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!!!