Cirqmon #Devlog 9

This version is more of testing, I thought that I should write blogs and use examples using Cirqmon, So Written 2 blogs on Quantum computing for Beginners and Deutsch Joza algorithm.

• While writing it I thought I should Show them on Cirqmon Hompage too, earlier I thought I would replace blogs part in Homepage with Just a medium link of mine, but later when I read on internet that medium allows to see RSS version of Blogs so I parsed RSS to JSON and fetched Blogs related Quantum Computing.

• Along with it, made Qubits limits to 8 and steps to 24 and made a centralized Config file to control parameters from there.

• Added a Toggle so People can switch indentation of Qubit states either Big endian or Little Endian.

• Updated Homepage button with Pikachu Button I found while explore on UI verse, also added link to Readme guide.

Now After writing Blogs I am getting surge of confidence inside that I understood Quantum Computing more Better. One of topics I am curious about is Cybersecurity and one of Algorithm that challenges classical Approaches like RSA is Shor’s Algorithm so next I am going to explore it, Also along with all these, I have updated Some images in readme too and going to Push updates, so do Share Feedbacks.

Cirqmon #Devlog 8

Actually I was telling my friend about project, and I realized that the Project should have better readme that tells about features, Examples, and Tour.

Also added HSL wheel in Q sphere so People can Use it as a reference. Initially its faded, you hover it and it gets Visible. Also the Latest version is now Live with multi qubit gates.

Cirqmon Devlog #7

So, I am posting this Devlog after interval of Almost 20 days since last Posted.

Why delay?

During this time I learnt a Lot about Quantum computing. Infact, I was planning to ship the Project with Single qubit gates only, but after I joined Qiskit Global Summer School, then I realised that main game in Quantum computing is about entanglement, that comes with multi Qubit gates like CX, CZ, SWAP etc.

The Media attached is Demo is of a GHZ circuit is made by combination of H gate and CNOT gates. Basically a GHZ state is larger version of Bell state. For N qubits, only two possible states shows Up with equal probability i.e 1/root2 (000…n + 111…n).

So here is What I made Changes and How :

1) 2 Qubit Gates Implementation -

So Earlier Version was for Only 1 Qubit Gates, and it used Tensor product. Where it used to tensor Each step and then Multiply each step to StateVector in successive manner.

But for 2 Qubit gates, tensor method gets problematic because multi qubit gates need to have dependence on other qubits too, meanwhile tensor assumes every gate on that step is independent and it builds large matrix.
This loses dependence and relation as demanded by multi qubit gates.

So then I got to know of approach called Embedding or Inflation where we first create Temporary matrix of 2^n rows and 2^n Columns with each entry initially as 0, then we start looping through columns of that Matrix (which represent possibility, like iteration for 0 is actually 00 in binary) and then, matching it with rows and columns in Gate matrix, after that we force the bit in Temporary Matrix’s respective column and row to align with what Gate’s matrix bit has? Either 0 or 1.

Finally we get Result of application in that Temporary matrix which we multiply with StateVector later on. That’s how This Inflation Approach works.

2) Applied Phase angle Indicator

Now, Quantum State’s node’s color in Q sphere shows its phase Angle, which can be from PI to -PI, calculated using formula tan2a(y,x), then we constraint it from 0 to 2PI, later convert to degrees, then feeding that value as HUE value in HSL colour format keeping lightness as 50% and Saturation 100% and then it corresponds to Phase Angle with color that degree, like 0deg is red, 90deg is green etc.

So this was Major Changes I did along with some Style changes and Minor error fixing that appeared during changing the Simulator’s Approach.

And to be very Honest at when I started to Write code for 2 qubit Gates, I earlier thought I would Do something that I dont have to change Simulator, but those were still just making me cry.
So finally I gone to AI to learn and for almost 2 days new experiments were going out of head and that way almost I wasted Hours and then to experiment more and Stop Tracking Hackatime since I knew It would track more hours for Experiments too, So I coded in Cursor (Without Any AI, Just as Other Editor) Untracked. At the End it worked :)

Now Finally Majority part is Done, after few More Edits, Will Ship it soon!

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 -

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

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

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

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,