🧊 Box Designer

Box designer is an Open Source Software application by Francis Studios written in Javascript and powered by NodeJS && Electron

⬇️ Installs

🟢 Release version 1.0.0

• 🐧 Linux x86 / x64 release -> clone this repository and npm i && npm run start unfortunately distributable exceeds github maximal filesize of 100mb - electron is too bloated :(

• 🪟 Windows x86 / x64 release -> clone this repository and npm i && npm run start unfortunately distributable exceeds github maximal filesize of 100mb - electron is too bloated :(

Warning

The author FrancisStudios as yours truly doesn't take any responsibilities for freely distributed (Open Source) softwares - public repositories . These applications are free to explore, modify, distribute with the proper crediting of the author(s) - in this case github.com/francisstudios. These software products are developed purely as hobby projects and original sources are available on the above mentioned github page.

💡 Development Process

If you know me, you know that my main hobby besides coding is electronics. I usually build PCBs and such but I also build my own tools just as anyone does in the coding world.

That means that I build my bench power supplies, function generators, voltage, power, and part value meters and various instruments - whatever I need at the moment

But to build a great appliance, everybody knows that it must look awesome on the outside just as well as well it works on the inside. So I generally like to design my machine houses out of acrylic or metal sometimes wood sheets and I have developed a simple formula that I can use to calculate all the sides of the box(es)

Let's design a W: 300 x H: 100 x D: 300 box from a d = 2mm sheet

top and bottom:    2 pieces of 300 x 300 sheets
left and right:    2 pieces of (300 + 2d) x (300 + 2d) sheets
front and back:    2 pieces of 300 x (300 + 2d) sheets

This is all well and very simple, we don't even have to automate this, as such an easy calculation, but I wanted to write a simple program that does this design for me after I submit a couple of the necessary variables.

So I started playing around in this repository with rendering cubes as I have big future plans for creating a voxel world game and I have never played around rendering cubes in 3D, so to experiment with the math and such, this will be a great ease-in project and hopefully we'll be able to scale it in the future.

On this visual aid you can see that programming is not all laughter and success all the time, as I managed to mess up the rendering as I wanted to try a brand new concept (for me) to connect the edges (without declaring them in any way - just using the computer's smarts to figure out how to connect the vertices) but the plan was abandonned as it is failed in the first round, and I had no more time to experiment with it, since this project was planned to be a one-day project.

But after defining the edges too, we can loop through it and render the lines that way

vertices = [
        [0, 0, 0], [1, 0, 0], [1, 0, 1], [0, 0, 1],  // LOWER FACE
        [0, 1, 0], [1, 1, 0], [1, 1, 1], [0, 1, 1]   // UPPER FACE
    ];

edges = [
        { from: 0, to: 1 }, { from: 1, to: 2 }, 
        { from: 2, to: 3 }, { from: 3, to: 0 }, //LOWER FACE EDGES

        { from: 4, to: 5 }, { from: 5, to: 6 }, 
        { from: 6, to: 7 }, { from: 7, to: 4 }, // UPPER FACE EDGES

        { from: 0, to: 4 }, { from: 1, to: 5 }, 
        { from: 2, to: 6 }, { from: 3, to: 7 } // CONNECTING EDGES
    ];