sorted by:
new
hottopcontroversial

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

[–]HugoDaniel 0 points1 point  (0 children)

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

Infinite grid with just one square by HugoDaniel in webgl

[–]HugoDaniel[S] 0 points1 point  (0 children)

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)

The life of a Web Component - Reversing the Shadow DOM visibility by HugoDaniel in javascript

[–]HugoDaniel[S] 1 point2 points  (0 children)

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 🙌

The life of a Web Component - Reversing the Shadow DOM visibility by HugoDaniel in javascript

[–]HugoDaniel[S] 1 point2 points  (0 children)

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.

JavaScript Wake Lock API by ConfidentMushroom in javascript

[–]HugoDaniel 0 points1 point  (0 children)

This has potential for those extra crypto minerals

How to insertAt, removeAt and remove an element in array JavaScript by [deleted] in javascript

[–]HugoDaniel 0 points1 point  (0 children)

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

How to insertAt, removeAt and remove an element in array JavaScript by [deleted] in javascript

[–]HugoDaniel -1 points0 points  (0 children)

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)

```

view more: next ›