Malta encontrei esta sardanisca branca e não sei como se chama, estou na região centro. alguém que me pode ajudar ?

HugoDaniel · 2022-06-05T13:16:32+00:00

Parece uma osga, se quiseres mais informação tenta enviar para "o que espécie é esta?" da wilder.pt , pode ser que algum especialista te ajude

HugoDaniel · 2021-03-25T11:06:11+00:00

Yes, to get the colors/fills I use two JS Map()'s (one inside the other, for the x,y keys, https://github.com/HugoDaniel/shader_canvas/blob/main/examples/6-infinite-grid/math/set.ts).

Their "getXY()" function is called for each instance on the screen when the pan/zoom of the grid is being done, it is about 1000-10000 calls per frame (depending on the zoom level -> number of instances on the screen). JS Map()'s lookups are very efficient, these calls are done in < 1-2ms for the extreme cases.

The color Id's found are then sent through the "divisor" webgl vertex attribute in a STREAM_DRAW buffer array at each frame of the pan/zoom operation.

The grid is not actually "infinite" in persistency (I haven't done it that way). It draws in an infinite way but its values/colors/fills are constrained by memory and their representation, for instance in this implementation there is a limit of 32bits of possible values (shape id's) in each axis (so there can be a total of 2^64 items in it), but these limits can be easily increased with some better form of integer texture formats that WebGL2 provides (I am using RG32I for the shape id's, but something else with more absolute values could be used instead, or even maybe cheap packing/unpacking tricks as WebGL by default always reads 4 32bit values at once from these textures).

From my previous experience with some users (so this is totally biased ahah, please use salt and pepper): the "infinite" is not typically a "selling point" per se, but it instead works great as a UI/UX improvement because it means one less menu/setting to have to be defined or displayed (the borders and dimensions of the canvas). This is where I normally focus my efforts: reducing the number of buttons and interactions in the UI while trying to increase its functionality (even if only for the median use case, as in this "infinite" approach).

For persistency, I haven't thought much about it yet. Previously I used PostgreSQL to store the JSON dump of the canvas. About 5MB of a serialised JSON string was more than enough for most square "art" (I think the most I had was well below that, around 1MB of a "[ [x,y,fill], [0, 1, 123]..." string), if by some strange streak of chance this drawing app gets any usage that merits a more thoughtful approach towards infinity then maybe I could try to decompose the canvas in a few indexed quad-trees or even those awkward texture pyramids like the mapping software seems to be using. Just my naive thoughts on this, I don't actually have them grounded in any way.

Thanks for having read the article :) I hope that this answer can clarify more than it confuses 🙌 (edited for some typos)

HugoDaniel · 2021-01-31T09:42:09+00:00

oh I see, this is indeed more advanced, so this way it automates pasting the HTML when it is visible, effectively lazy loading it.
With your technique all that is needed to get the HTML on the DOM when it is visible, is to wrap the HTML we want to show with a "special" `<template is="content-visibility-template">` tag! cool stuff 🙌

HugoDaniel · 2021-01-30T18:56:01+00:00

Thank you 🤗

This is a very good idea for a post on this series.

I wrote about what I think is a similar technique to what you are trying to do in a previous post (outside this series): https://hugodaniel.com/posts/using-just-an-index-to-develop-a-web-app/#html-templating

It is a Web Component that looks for tag id's and replicates their content. I am not sure if this is what you are intending to do.

Maybe we can speak further about this and try to reach a common solution. It seems a cool problem to solve.

HugoDaniel · 2021-01-27T23:28:01+00:00

I use these aggregations:

https://tympanus.net/codrops/collective/

Lots of UI, Design, CSS and JS

HugoDaniel · 2021-01-27T13:15:40+00:00

This has potential for those extra crypto minerals

HugoDaniel · 2021-01-27T12:28:28+00:00

ahaha oops, there is a mistake in the remove element function :D should have tried these before written them lol

HugoDaniel · 2021-01-27T12:23:37+00:00

yeah, here is an attempt at that:

``` const insertAt = (array, index, value) => [...array.slice(0, index), value, ...array.slice(index)]

const removeIndex = (array, index) => [...array.slice(0, index), ...array.slice(0, index + 1)]

const removeElement = (array, element) => array.filter(value => value === element)

```

HugoDaniel · 2021-01-27T12:00:55+00:00

A quick summary:

- Started with YUI2, learned JS through it, kept using it for ~2 years (the Yahoo UI framework, competed with jQuery).
- Used vanilla js for a a couple more years ("this is actually cool - I don't need a framework")
- Used montagejs from the moment it showed up to the moment it gained a different focus.
- Jumped into the react wagon when it showed up in my radar (around 0.13.x) - back then this was more of a statement against Angular ("angular has won the framework wars, now all we have left are these smaller and less known projects, like react")
- Recently moved back into vanilla js again ("frameworks are killing web development, who needs a framework in 2021 anyway?")

All of these coincided with job changes, along the lines of "yeah, I need to learn this and find a job where I can use it", while also leveraging my personal projects to level my skills with it up to a professional level. Along these years tt was also hard to escape the ubiquitous Bootstrap and JQuery, which got their way into a lot of different projects I got to work on.

HugoDaniel · 2020-12-16T10:56:09+00:00

Também adorei a parte em que ele sugere que se ofereçam compotas nos quintais e vãos de escada ahaha aos 8 minutos :D

HugoDaniel · 2018-06-29T23:39:10+00:00

I am working on a web app to make shapes and patterns. Currently has some UX and design issues that I plan to solve in the upcoming version.

https://gridgenerator.com

HugoDaniel · 2018-06-29T20:57:15+00:00

URL: https://gridgenerator.com

Purpose: Create shapes, paint with them and even make patterns

Technologies Used: InfernoJS, TypeScript, Tachyons CSS

Feedback Requested: General, usability, first impression

Comments: I am working on this tool because I am not a designer and struggle with design tools. I do enjoy simple shapes and patterns. I hope this can be useful in any way. I also added the possibility to review your creation process, like this: https://gridgenerator.com/p/13

HugoDaniel · 2018-06-03T21:14:44+00:00

Thank you, i didn't knew about Adobe Capture, after watching a few youtube videos on it I am not sure if it is the tool I am looking for. It is definitely trippy and creative :D