Pixel Void
- 18 Devlogs
- 41 Total hours
Pixel Void, as in the void of pixels - you draw on the borders of squares. Inspired by 7 segment displays
Pixel Void, as in the void of pixels - you draw on the borders of squares. Inspired by 7 segment displays
During some field testing, I learned that the user experience needs improvement. I need to make buttons more clear, and add the greatest thing to be created: THE UNDO BUTTON !!!
So this is my goal moving forward!
In the meantime, this is the logo I made for the app! Since this entire project was inspired by 7-segment displays, thats what the logo portrays, along with some filler lines on top to fill in the extra space :)
Everything was so inconsistent so I spent some time recoloring everything! (before and after images)
In the process i learned that an old feature I had (debug mode, which showed cool dots on the screen) hasn’t been working for a reallly long time!!! woops- had to fix that 
Its almost ready to ship!! Just need to work on the readme and add some finishing touches!
the app now lets you customize the length and amount of squares in the grid! I haven’t fully implemented it because I ran out of time, but yay stuff!
I do realize the UI colors are kinda a mess so ill need to fix that. The project is almost complete!!
p.s. - sorry I didnt have anything to draw this time, I spent the whole day cleaning and stuff so i’m short on time today
You can now load and save from files, which also saves your current colors and the palette as well. In addition, you can download as an image or the canvas!
this wasn’t too hard, was mostly research on file prompts and saving numpy files, so I got distracted with my work quite often and went on to do other stuff.
I’m also getting better at learning to draw on this thing, and am thinking of some things I could include in the readme guide.
so funny thing- when I added this, the right click input just stopped registering so had to spend some time figuring out what changed!!!
colors can now be added and removed in the palette! I’m not the most proud of the design of it, it works!
Main problem is that some of the UI elements feel too small due to just the way it is. Hopefully by the end all the lil issues will be fixed
It fully works, and I’ve also designed a new piece of the UI for color palette on aseprite! this should hopefully be able to be implemented quite easily with the new system.
The main reason i’m doing this is because it was quite hard to get the same color twice, and this will give you the ability to save them.
IVE ALSO NOTICED THAT IVE SPELLED PALETTE AS PALLETTE ON ALL MY CODE SO NOW I NEED TO FIX THAT
After making the color picker, I realized - the main drawing canvas was not modular at all!! it would have been a pain to add anything new or change the UI in any way,
So i’ve moved the entire thing into it’s own class, and made it support the same input system the color picker uses!!
This also means I could theoretically have MULTIPLE canvas to draw on!! 
the possibilities are endless….
ok well there are a few things to fine tune but this was my first time making my own inputs for pygame!
I added a bit of extra space on the click detection since the slider was a bit small, so hopefully it should make it more user friendly!
Everything was surpsisingly working smoothly - except for the fact that I never set it up for the screen to update!!! turns out it updated once and never again, and when I fixed that it all worked yayayay
I’m learning a lot about pygame doing this!
clicking leftmouse activates one color, and right mouse activates the other!
clicking both mixes the color as a bonus, which currently just averages the rgb values, so might change that later if it looks bad for complementary colors.
I can feel this project start to come together ^_^
I also fixed some bugs that the brush had because it was detecting the pixels completely wrong and inefficiently!
I tried to make it as optimized as I could but there’s still a lot to improve on! I got such satisfaction seeing it work for the first time
one of the silliest ones was that i had 2 variables that had similar names (because they did similar things) and i used the wrong one!!!
i forgot to occasionally change the size of the grid so it was tragic when i found out everything was broken when i changed it 😱😱😱
Isn’t the ✨distance formula✨ the greatest thing ever?
now hopefully i just need to add more color options, improve the ui a bit, and it should be ready!
part 1 of collision check is complete!
my brain sometimes gives me hints of a solution to a coding problem and i need to decipher the rest myself from what it pictures to what needs to be written
the blue dots on the video is the range its gonna check from to see if its within the circle
since the entire thing was scaled, i had to unscale the mouse coordinates to get the pixel coordinates back.
I also spent a bunch of time trying to figure out how to basically detect collision and it was a pain. but i think i figured something out! (second pic is my planning)
Implemented Pygame for UI!
grid now displays properly, and is scaled to a 500x500 resolution. not sure how it would do with constant updates, might switch to a different system later on.
plan is to render a circle over the mouse when hovered over the grid, which is going to be the paint brush.
also considering making the piece in between the lines a mix of all colors around it
Grid renders correctly!
parameters can customize the length easily!
Planning the structure!