I’m always in big doubt when setting the canvas size in p5.js, what if is a phone or a tablet, what’s viewer screen? We’ll never know… So there is this thing, responsive design, and some other flavors (fluid design and others) I did a little research and found that they are all based in HTML/CSS classes and columns thinking. Very clever. But that’s not what I was after, they are great for traditional sites, and may be a great solution even for hosting sketches. And are not difficult to use. But I thought, for sketches this may not be the perfect solution.
So I started thinking of a full window canvas solution. Soon I realized the columns as base of design thinking, is not perfect for sketches, we mostly think in points… It’s a very simple idea, not a big deal. The Gpoint is a GridPoint, when created it references itself to the grid size and adapts any time the window is resized. Again as simple as point(windowWidth*0.xyz, windowHeight*0.xyz)
That’s it. Is a way of using regular positional thinking but make every point relative in an easy way.
You can say gp = new Gpoint(134, 256) and ellipse(gp.x, gp.y, 10). and that’s it. The point will be locked to ratio of the screen at the actual size. Simple and powerful. The Gpoint so is the base of my Grid. They are created by Grid, and Grid updates them. The goal is… well really? my goal is to have fun. But I’m heading to perhaps a design system based only on canvas. So right now I got panels, rows and columns.
I got no formal training/learning in coding, so my process is somewhat chaotic. I do write a lot, later I comment, than start to try to apply the building blocks in a example of how I could use it, notice a lot of flaws and bad decisions and go back to rebuild the building blocks.
This is where I am now. I got a little system that is kind of working already, but just noticed some stupid design decisions I made, I’m going back now, and the structure is probably gonna change, perhaps a lot… not sure yet.
Anyways…
I’m not really willing to share the code yet, as I’m ashamed for it 
but I’m willing to share the result of this phase, as I found it beautiful and already shows the thinking of the atom Gpoint. But of course the code is there, the classes are less confuses and in better shape, but the sketch is a BIG mess, sorry. Latter when I got things more organized I’ll share everything in a better way. So for now focus is in result not code.
To have an idea of how “in process” it is, as a test device, I’m reloading the page every click. This breaks touch interaction, he he the very goal… But was a quick way of trying different grids, the grid is randomly created every reload and the design is all based in the grid, so it adapts to the new grid.
bare with me and have a look, and DO resize the window, and DO click or reload the page to see different grids.
edit: forgot to mention press ‘g’ to toogle grid overlay.
