“Insect Particlizer” an Experiment of combining Pixel Manipulation with CSS.

Canvas..what a beautiful name that doesn’t express how much I love this API, although it was terrible for me at the beginning, but after some trial and error, I understood it, even tried to create uncommon stuff with that crashed my IDE several times. …


This content originally appeared on DEV Community and was authored by Ali Shata

Canvas..what a beautiful name that doesn't express how much I love this API, although it was terrible for me at the beginning, but after some trial and error, I understood it, even tried to create uncommon stuff with that crashed my IDE several times. This experiment here is just a one of an uncountable number of experiments that I'm doing quite often in my Frontend journey, here I used Canvas API to get the data of the insect's image, then handled this data in one CSS property (yeah one!)to produce this particles effect.

Insect Particlizer

Question here is, how this could be possible..how one CSS property could handle the image's data (an array of 100000 arrays btw)?

  • I 'really encourage you my reader to discuss with me in the comments, even try to brainstorm some ideas, maybe you can come up with a better answer than mine.


This content originally appeared on DEV Community and was authored by Ali Shata


Print Share Comment Cite Upload Translate Updates
APA

Ali Shata | Sciencx (2024-08-31T04:56:08+00:00) “Insect Particlizer” an Experiment of combining Pixel Manipulation with CSS.. Retrieved from https://www.scien.cx/2024/08/31/insect-particlizer-an-experiment-of-combining-pixel-manipulation-with-css/

MLA
" » “Insect Particlizer” an Experiment of combining Pixel Manipulation with CSS.." Ali Shata | Sciencx - Saturday August 31, 2024, https://www.scien.cx/2024/08/31/insect-particlizer-an-experiment-of-combining-pixel-manipulation-with-css/
HARVARD
Ali Shata | Sciencx Saturday August 31, 2024 » “Insect Particlizer” an Experiment of combining Pixel Manipulation with CSS.., viewed ,<https://www.scien.cx/2024/08/31/insect-particlizer-an-experiment-of-combining-pixel-manipulation-with-css/>
VANCOUVER
Ali Shata | Sciencx - » “Insect Particlizer” an Experiment of combining Pixel Manipulation with CSS.. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/08/31/insect-particlizer-an-experiment-of-combining-pixel-manipulation-with-css/
CHICAGO
" » “Insect Particlizer” an Experiment of combining Pixel Manipulation with CSS.." Ali Shata | Sciencx - Accessed . https://www.scien.cx/2024/08/31/insect-particlizer-an-experiment-of-combining-pixel-manipulation-with-css/
IEEE
" » “Insect Particlizer” an Experiment of combining Pixel Manipulation with CSS.." Ali Shata | Sciencx [Online]. Available: https://www.scien.cx/2024/08/31/insect-particlizer-an-experiment-of-combining-pixel-manipulation-with-css/. [Accessed: ]
rf:citation
» “Insect Particlizer” an Experiment of combining Pixel Manipulation with CSS. | Ali Shata | Sciencx | https://www.scien.cx/2024/08/31/insect-particlizer-an-experiment-of-combining-pixel-manipulation-with-css/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.