QR Code generator

Here i’m just showing that theere are more data bits with same text for bigger versions, demonstrating the 2 byte length thing. I also fixed all scope issues. Here’s the annoying part, I just learned that apparently for more than 1 block of error correction, you have to do block0byte0, block1byte0… So now i’m gonna try to writeinto codegrid using messageCoefficients. NEXT STEPS: error correction in blocks(MAIN data from message coefficients), logo in code, info page

YES! Got rid of the Re reading logic. Also, side note, the thing was NOT working in the previous dev log. I wasn’t actually using the padding bits for the error correction. So first i fixed that. Then i basically got rid of it cause i finally understood i could easily reconstruct the bitstream. So did that and ik its really janky, but its fine. Also added a debug button so you can quickly switch modes without changing source code cause it was getting annoying. Lastly, i am a bit concerned now that i made eventlisteners on input rather than onchange about hte scope of variables. If it changes mid function that could be bad. NEXT STEPS: let keyword for all non-global vars, 2 bytes for message length in some versions, error correction in blocks, logo in code, info page

The demo doesn’t really show much, but i basically just converted everything(EXCEPT that one thing for messageCoefficients). It was really hard because if i made one mistake or lost my train of thought it is really hard to get back into it. I really want to get rid of message coefficients. Or at least it shouldn’t reread the message. Instead, i will probably have message coefficients break it up into sections for error correction to handle or smth. TBH i just don’t like it. NEXT STEPS: stop rereading message, 2 byte length in some versions, error correction in blocks, logo in code, info page

Lwk don’t know how this took same amount of time as teh alignment patterns. Oh, actually those weren’t all coding, so makes sense. But basically i just replaced wherever i was setting into codegrid directly with an offset and in drawgrid i used the array. It’s working now, but one small thing i want to change is that I don’t like how it’s in a random order. I did kinda do whatever i wanted when making it originally, but now i want order in array to be order it is created: base, data, dataRead, padding, error, format, version. Also lwk i don’t like dataRead, might just not have that in the future. IMPORTANT: just found out htat in some versions, url lenght byte is not 8 bits, it’s 16 bits(2 bytes), so gotta account for that. NEXT STEPS: Finish up array debug, get rid of messageCoefficients function, 2 byte length in some versions, error correction in blocks, logo in code, info page

GOT DYNAMIC ALIGNMENT PATTERNS. Yo ts was actually hard because docs(ones i could find, not official one) said just use a lookup table. So i had to actually look at the qr codes of all types and get my own algorithm. Idk if this is official algorithm, but it works for all qr codes 1-40. A lot of the time is not recorded cause it was on paper, not computer. I’m gonna do the debug thing first cause i know once i get error correction workign i’m not bouta come back and fix the horendous debug code. Also i realised i can put logo in a qr code. NEXT STEPS: better debug, error correction in blocks, logo in code, info page.

I learned the remainder bits aren’t always 7, they are different based on version. I tried hella to make it dynamic calculation like for padding, but finally gave up and just used a lookup table. Might try going back to dynamic later. Next steps: Alignment patterns, BETTER DEBUG MODE(array for color to num), info page, error code blocks

Finished version info. Couple issues i ran into was paramaterization and version not being an int(it gets treated as one when u do arithmetic with it but not otherwise). I also implemented the same logic to extend the version as i used for format strips. Then write them in the appropriate areas. I got really confused that it wasn’t scanning, but the problem was that i didn’t do the aliignment patterns based on the version, and also i had completely forgot about this, but in bigger qr codes the error correction is calculated in blocks. NEXT STEPS: alignment patterns, Error code by BLOCKS not as whole, info page

Did size parameterization for all nextPos and writeBytes and didn’t want to acces global so did it kinda roundabout way where some functions atke in size just to pass it on. Also fixed display and alert. Right now, the only VALID qr code is v2. Howver, all versions display something. To make it actually valid, i need to make alignment patterns dynamic and add version info. I think that’s it, maybe timing patterns go away. Theoretically, error correction is alr working. As u see it has the correct num bits. Small problem i ran into was the max size for the canvas, but that was fisxed by just making cell_size smaller(I’m so smart for including that in the first place) NEXT STEPS: alignment patterns based on version, version info(timing patterns might disapear), Info page.

So i first wasted a bunch of time trying to edit csv file to also have size which doesn’t work cause the map is based on level not version. Then i just made a slider and integrated it anywhere that was counting from teh end of the grid. JUST REALISING I DIDN’T DO IT FOR NEXT POS. Also sitll need to actually do alignment patterns, cause i just basically did find replace ,no logic

Make the logic for detecting if a url is too long. My previous logic was dumb. I was checking if the length was less than 255. I got that number from 255 being teh largest 8 bit binary number. So 255 is maximum ascii value, not length. To fix, i already had the available_bits, so i just made an error_bits, so available_bits-error_bits = available_data_bits. required data bits = 8*length+8+4. each char is 8 bits, plus 8 bit length identifier, plus r bit terminator(Just realised while writting this that technically this shouldn’t be included since terminator is supposed to be 4 or less). Made function for this and also made selection for level better. Moved some stuff around as well. I had really hard tiem with this project, so i also want to make the info page have everything you would need to make your own qr code generator(explain steps in detail, but don’t do pseudo code. Ex. “div message polynomial by generator polynomial in gf(256)” instead of “Exact steps to do poly division as well as galois math.”) Basically the documentation but in a more readable format. Cause the documentation theoretically exists but i couldn’t find the og source anywhere. NEXT STEPS: Version QR codes, info page and css.

Create the map so and paramaterize the error correction level. Ik the UI is kinda ass, but it works. HOWEVER, big issue is that right now the BLOCK thing doesn’t work. Since i’m only using v2 right now, it is fine because all levels in v2 are 1 block, but yeah. Also keep in mind that since this is a v2 qr code, your text cannot be very long at the high error correction level because error correction takes up stpace. NEXT STEPS: need to fix the max url size error, and then need to make it for higher level qr codes. I also wanna fix the css cause right now it’s kinda ass

Made multiple mask methods. Originally made a better version for mask 0 because its really simple but later ones can’t be simplified so it was better to just leave them all as math formulas to be consistent. All formulas are from thonky’s website. Also, another problem was mask_input.value is a string sothat .toString(2) doenst binary it. instead cahnge to num before passing as param

YESSSSS LESS GO. IT WORKS. this is literally so fun. Ok, so there werent’ that many problems. I asked it to do all the BASIC galois math(+-*/^ and log) BUT NOT the polynomial stuff. I also had it check everything. It found that in the format strip, you don’t want 10 for medium, you want 00. IT WORKS NOW, LESSGO. Next steps gonna be scaling up to v40 qr code, and making more mask versions and more error correction levels. THIS SHOUDL GO TO YOUTUBE.COM

Basically restarting, moved everything to a function so i can debug functions one by one which claude handles better. I’m sorry bro ts is too hard to do without ai. Using this as a comparison: https://www.nayuki.io/page/qr-code-generator-library

IT DOESN’T WORK. Uk what’s even more annoying? The problem is in the math, the hardest part of it. Basically, i was debugging it with ai and then it led me to this website which basically does what i want to do so i put “www.youtube.com” in both and started looking at differences. No diff till the error correction part. Also format strips are cooked. I was looking on thonky’s guide and honestly it kinda sucks cause it told me to do most of theformat strips and they ended up wrong. Ig i have to fix it somehow now. HOWEVER, i think i’m getting message and generator polynomial cause even though gemini is retarded and argued with me for 1 hr that my message polynomial was wrong before finally accepting it was right(i didn’t bully it, just asked to explain why it was worng), it did say that generator was right from the start. So uh, gonna jump off a bridge now(this is a joke).

Once i got galois math down, i just started writing bits. However, i ran into some probs with the nextpos. The vertical format strip screwed it up. I spent some timetrying to fix it blindly without understanding the proble. That’s literally all i did. Also, i made error correction green so u can tell where it starts. Also, last 7 bits are just empty, cause they useless. Why do i sound like i’m writting an essay for english class

BRO THIS IS AMAZING. I had to implement this annoying thing called Galois fields cause for some reason you can’t use normal math in qr codes(the reason is that you want it to always be writable in a byte, so 256 is the max num u can have). IT’s annoying cause you have to 1.) look through the web to get all the galois math and not from a qr code website tutorial and not from ai cause ur better than that, 2.) understand how and why it works, 3.) Remember what parts of the math need to be done with galois math and which are normal math(like do you want to add or XOR(galois add)), 4.) get the exponent and log lists(got from thonky cause i couldn’t find anywehre else and i’m not bouta generate that, too much work), implement a logic to store polynomials as arrays with the first idx being greatest degree(this is stupid, should have done idx = dgreee), then work around that cause u an idiot, and then get into problems cause you said 1-alphai which puts it outside galois field so you should just say 1+alphai, then maek a generator function, then use gemini to check ur answer, have gemini complain at u cause u accidentally copied the indices of the coefficients as well, BUT FINALLY IT WORKS AND NOW I’M IN THE HOME STRETCH. Just need to write these bits, do masking(i’ll probably just do one pattern to start with), write format strips. Then i’ll probably make it hella customizable like colors, version num, error correction level, masking method

Fixed the padding 236 and 17 thing. Basically i keep track of how many writable bits are left. To do this, first take the whole grid(25^2), then subtract each base pattern as you set it. Total 270 base bits as u see me highlight.(mode:4, alignment pattern: 25, corners:3*(64)=192, format strips: 33, timing strips:16) Left over is 355. Then write data bytes, each should take away exactly 8 bits from the available bits. After writing data bytes, you add another 4 terminator bits, so those get removed. Then you want to keep going as long as you have MORE than enough to write the error correction and version info bits. Remember, if you can write another byte, then 8 bits are left, this means i didn’t really think about if it’s > or >=. Then to get # of bits requred for error and version info, you do n_per_blocknum_blocks8+7. n_per_block is just total_n/num_blocks, so n_per_blocknum_blocks = total_n/num_blocksnum_blocks = total_n. total_n is # of ERROR CORRECTION(not including version info) BYTES, so to convert to # of bits, multiply by 8. Lastly, +7 because there are 7 version# bits according to this image i found online. Rn i have no clue what level of error correction i’m using, but i had gemini generate a whole csv file full of the things, which can’t attach here. IT basically tells teh n_per_block and num_blocks for each level of error correction for each version qr code. next need to actually put info in format strips, masking, and create generator polynomial. I foudn formula for generator polynoomial online(not gmeini), but it’s complicated so will need to make a funciton for it.

Started with error correction. Found this really useful picture that shows what is where. So 7 bits tell version info, and the rest is straight forward. IT DOES NOT SHOW CHARACTER BYTES FOR DATA. It shows codewords, so this is shifted by 4 bits because of the mode in the bottom left. The error bytes is what i’m interested in right now. So i did what i thought is right which is force go backward from end, and try to hug the left(opposite of when going forward) but as u can see this screws up e11. Also i commented out the code for this part but your supposed to alternate 236 and 17 to fill up any empty data codewords. Error thing should be easy once i have the start of e1. I need to really think about how to reverse engeneer nextpos, to get prev pos. I think i still need to hug right, but go up when i’m in the right instead of when in the left

It’s hella annoying cause ican’t log research hours otherwise i would have like 20 hr by now. Ok, basically i just wanted to devlog an idea i had. If instead of recursive, i implement nextpos iteratively, then i don’t have to do the whole “Set to 4 and 5” thing, i can just force one move, and then keep same logic for rest of moves in a while loop. Now reason i need this is for error correction, first i need to go back by # of errof correction bits(n per block*# of blocks*8) and then store that position, then start up again from wehre i left off after the terminator padding of the main data, then padd the required 63 17 alternating, up till the start of error correction. btw if u were wondering, i would really recomend whenever doing smth like this, put the grid on top cause it’s very helpful for debugging

Fixed WriteBytes skipping thing, i realised you always want the right one if possible so no need to save col offset when skipping the base parts. Now i also started error correction. For error correction, you need to convert all the data (including binary mode) into codewords. Codewords are bytes of data. Because bin mode is 4 bits, you pad the 4 end bits. Then you can convert codewords to decimal to get coefficients of a polynomial. Now if you divide this polynomial by a generator polynomial(that i need to figure out how to get) Then you get a remainder, that remainder is the error correction bits. The phone uses reed solomon to get it back from that polynomial(it’s hella interesting, you might wanna look into it). But basically, i did polynomial division with quotient and remainder(even though i don’t need quotient) and also got coefficients from codewords. I set bits to 4 and 5 after reading them the second time. This way i can still use nextpos. Now just need the generator polynomial and then the masking. I also need format strips and i want it to be completely customizable(all versions of qr codes, all possible modes(bin alphanumeric numeric, not kanji), and all possible masks)

WRITEBYTES IS WORKING! well kinda. So teh logic is sound, and its working great, but one extra row next to the alignment pattern is skipeed, BUT it’s still empty(because it shows red). While typing this i just realised that it’s probably because i only check the right cell, so i should check right and left cell each time row increments. So far it’s looking just like veritasium iks doing so far. Another small problem was there were no formating strips. Ur not gonna believe how simple the main writebytes problem was. I just was forgetting to subtract column offset DURING my calculations, not while setting the bit.

So small thing needed for base. I realised now i could have just filled the thing with -1 instead of 0 which i will have to do anyway, but basically i made all the areas that are white but in the base 2 and all the black in base 3. Then i also made an outline function that makes squares given start and size. Thsi made it easier to do all the outlines. Ig the whole 32 thing was bs cause i’m gonna have to use -1 anyway, but now what i’m going to do next is working on the writebyte logic. Rn it just goes int the correctpatter but it needs to be able to handle already filled stuff and also changing direction(when you reach teh edge of the qr code)

Finish the base of the qr code, meaning everything that will stay same(for now) independent of the input url. I also realised that i cant just have 1 and 0 because later on the zig zag pattern needs to skip the base parts, so i made the base 2, black(data) 1, and white(data) 0. This will be useful for debugging too. Also in console it give sthe ascii code of each char and the bin representation of length of the thing. Need to pad 0 on it now

I made all the required files, and started with actual logic. I have now the grid, and i’m starting the boxes(the 3 in the top left, top right and bottom left corners) those are always same. It’s working butit’s hard to see so i’m gonan do display next. Im debating between having a canvas and if there’s a way to have just 25 elements next. to each other who’s background color i can change