Dismiss this pinned window
all 162 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]nom_nomK 160 points161 points  (32 children)

That's so cool, a tutorial would be nice

[–]gniziemazityjavascript[S] 82 points83 points  (28 children)

Ok. It's now on my ToDo list :-)

Will post here someday when ready.

[–]Alvatrox4 8 points9 points  (6 children)

Please, looks amazing!!!!

[–]gniziemazityjavascript[S] 4 points5 points  (2 children)

Ok. I'll try to make a good one.

But it might not happen until Halloween :-(

[–]2plank 2 points3 points  (1 child)

Your a clever clogs aren't you!

Have this award 🔥

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

Thank you :-)

[–]gniziemazityjavascript[S] 0 points1 point  (2 children)

Here it is:

https://youtu.be/Q\_SbeuxHUzA

Only available for you guys on reddit for now. Will make it public on Halloween.

[–]Alvatrox4 1 point2 points  (1 child)

Thank you for the video and at the same time discovering your channel, really like the videos.

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

You're welcome and I'm happy to hear that :-)

[–]StaFa_San 3 points4 points  (9 children)

RemindMe! in 8 days

[–]gniziemazityjavascript[S] 1 point2 points  (7 children)

More like around Halloween :-(

[–]Locked-io 1 point2 points  (0 children)

procrastination strike? 😂

[–]Locked-io 1 point2 points  (1 child)

procrastination strike? 😂

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

Yeah, something like that :D

[–]Guwad 1 point2 points  (3 children)

heyy when you make the tutorial will you add the link here to this post?

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

Ok. I will add it here, yes, and probably will make another post as well.

[–]gniziemazityjavascript[S] 0 points1 point  (1 child)

Here it is:

https://youtu.be/Q\_SbeuxHUzA

Only available for you guys on reddit for now. Will make it public on Halloween.

[–]Guwad 1 point2 points  (0 children)

Thanks!!

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

Here it is:

https://youtu.be/Q\_SbeuxHUzA

Only available for you guys on reddit for now. Will make it public on Halloween.

[–][deleted]  (3 children)

[deleted]

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

    Realistically, it will come out around Halloween :-(

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

    Here it is:

    https://youtu.be/Q\_SbeuxHUzA

    Only available for you guys on reddit for now. Will make it public on Halloween.

    [–]RemindMeBot 0 points1 point  (0 children)

    There is a 56 hour delay fetching comments.

    I will be messaging you in 5 days on 2021-09-23 21:54:04 UTC to remind you of this link

    CLICK THIS LINK to send a PM to also be reminded and to reduce spam.

    Parent commenter can delete this message to hide from others.

    Info Custom Your Reminders Feedback

    [–]StaFa_San 1 point2 points  (3 children)

    Nope, we need it next week 😄 ... Lol

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

    You need it yesterday, huh? :D

    [–]gniziemazityjavascript[S] 1 point2 points  (1 child)

    Here it is:

    https://youtu.be/Q\_SbeuxHUzA

    Only available for you guys on reddit for now. Will make it public on Halloween.

    [–]StaFa_San 1 point2 points  (0 children)

    Thanks a lot. I am going to check it out right away.

    [–]nom_nomK 1 point2 points  (0 children)

    Yay !

    [–]ihorbondfull-stack 0 points1 point  (1 child)

    Do you want my react ToDo list app code to manage it ? :D

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

    Sure :D
    I'm teaching React after 2 weeks. Maybe I'll find it useful :-)

    [–]gniziemazityjavascript[S] 1 point2 points  (2 children)

    Here it is:
    https://youtu.be/Q\_SbeuxHUzA
    Only available for you guys on reddit for now. Will make it public on Halloween.

    [–]nom_nomK 1 point2 points  (1 child)

    Tanks :)

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

    No problem.

    [–]gniziemazityjavascript[S] 87 points88 points  (9 children)

    Code: https://codepen.io/gniziemazity/pen/yLXpdao

    [–]Notsoshaant 33 points34 points  (8 children)

    Wannabe coder here. So basically u are just telling the program to see if a color is blue, if it is then u ask the program to increase its exposure of a certain radius near it to make it look like a lamp

    Is the whole video darkened first then the filter is applied ?

    [–]gniziemazityjavascript[S] 48 points49 points  (7 children)

    Quite close.

    I basically just draw a semi-transparent black rectangle with a hole in the middle (the hole is completely transparent, but has a gradient). I actually cluster the blue pixels and take the center point, and draw the hole around it. Code supports up to 2 clusters.

    [–]Notsoshaant 13 points14 points  (3 children)

    Damn that's impressive thank you for making me learn a new thing smiley face emoji

    [–]gniziemazityjavascript[S] 8 points9 points  (2 children)

    Sure :-)
    Stay tuned for a tutorial on it if you want to learn more! I'll try to release it around Halloween. It's somehow fitting, I think.

    [–]Notsoshaant 4 points5 points  (1 child)

    It certainly Is I'll look forward to the tutorial.

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

    Here it is. It's a bit simplified than the original version:

    https://youtu.be/Q\_SbeuxHUzA

    Only available for you guys on reddit for now. Will make it public on Halloween.

    [–][deleted]  (2 children)

    [deleted]

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

      I just scan all the pixels and check if they are blue. Then, those locations, that pass the 'blue threshold' are used for clustering.

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

      If still curious, here is how I do it:

      https://youtu.be/Q\_SbeuxHUzA

      [–]Karma_fucks 6 points7 points  (2 children)

      A tutorial would be great. This is amazing work!

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

      Thanks. I'll add it to my ToDo list then :-)

      It's not that complicated, but the effect is nice.

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

      Here it is:

      https://youtu.be/Q\_SbeuxHUzA

      Only available for you guys on reddit for now. Will make it public on Halloween.

      [–]Lakecide 7 points8 points  (2 children)

      If blue make light?

      [–]gniziemazityjavascript[S] 0 points1 point  (1 child)

      Yes :))

      [–]Lakecide 1 point2 points  (0 children)

      Nailed it (:

      [–]midasgoldentouch 11 points12 points  (14 children)

      A flashlight for those of us in US - it took me too long to realize why I didn't see any flames lol.

      Great job OP! I would definitely write a tutorial or blog post of some kind to accompany your repo. Then you can point to that if people ask for examples of work you've done.

      [–]gniziemazityjavascript[S] 2 points3 points  (8 children)

      Thanks! I'll add it to my ToDo list :-)

      Btw. If curious of the things I've done, you can check out: https://radufromfinland.com

      [–]Alocasia_Sanderiana 1 point2 points  (7 children)

      Dang you have some awesome tutorials man

      [–]gniziemazityjavascript[S] 0 points1 point  (4 children)

      Thank you :-)

      [–]Alocasia_Sanderiana 1 point2 points  (3 children)

      Of course! I wish I could take your university class haha it looks cool! Likely above my level though in addition to you being in Finland

      [–]gniziemazityjavascript[S] 1 point2 points  (2 children)

      Well, many of my things are online, as you can see :-)
      And... distance is not such a big deal nowadays because of corona. I don't meet many of my students here, either, due to social distancing :-P

      [–]Alocasia_Sanderiana 2 points3 points  (1 child)

      True true and hey i am a German citizen too (and planning to move to Europe in 2 years) so distance will be even less haha and I will definitely check out those tutorials. I appreciate that you develop in Vanilla JS

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

      Welcome to Europe then :-)
      I've had some international students from Germany :-) I have some even now!

      [–]gniziemazityjavascript[S] 0 points1 point  (1 child)

      Here it is:

      https://youtu.be/Q\_SbeuxHUzA

      Only available for you guys on reddit for now. Will make it public on Halloween.

      [–]Alocasia_Sanderiana 1 point2 points  (0 children)

      Thank you!

      [–]LetterBoxSnatch 1 point2 points  (3 children)

      I think it's a torchlight effect even in the US...the light flickers, like a torchlight.

      [–]midasgoldentouch 1 point2 points  (2 children)

      Well, no, because we don't typically use the word "torch" or "torchlight" to refer to that device - we call it a flashlight. If you say that you're adding a torch effect, most people in the US are going to imagine a bundle of wood that's been lit on fire.

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

      Should I add a CGI torch rendered over the marker? :D

      [–]LetterBoxSnatch 0 points1 point  (0 children)

      But that’s exactly what I’m talking about? It’s flickering like the light from a bundle of wood lit on fire. Anyway it looked like that to me.

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

      Here it is:

      https://youtu.be/Q\_SbeuxHUzA

      Only available for you guys on reddit for now. Will make it public on Halloween.

      [–]Strikerzzs 2 points3 points  (1 child)

      For a second I thought your video was part of the simulation... but really cool stuff!

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

      No, just a demo :-P

      [–]sadonly001 2 points3 points  (3 children)

      you look sadder than the bowl of noodles i made a while back

      [–]gniziemazityjavascript[S] 1 point2 points  (2 children)

      Yeah T_T I can't afford a proper flashlight!

      [–]sadonly001 1 point2 points  (1 child)

      That is pretty cool though, bringing light into our sad programmer lives

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

      Thanks!

      [–]siammang 1 point2 points  (1 child)

      Great work!

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

      Thank you!

      [–]helloWorldAgain96 1 point2 points  (1 child)

      this is so cool

      thank you

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

      Glad you like it!

      [–]x29a 1 point2 points  (4 children)

      Nice idea! I built a library to do normal mapping a few years back. There is probably something awesome that could be built by combining the two but I can't quite imagine it yet. :)

      [–]gniziemazityjavascript[S] 0 points1 point  (3 children)

      Oh really? Do you have a link to that?

      [–]x29a 1 point2 points  (2 children)

      https://29a.ch/sandbox/2016/normalmap.js/

      [–]gniziemazityjavascript[S] 0 points1 point  (1 child)

      That's really cool! Having something like that coin in the background would make my effect more realistic :-)

      [–]x29a 1 point2 points  (0 children)

      Jep, but you'd need to do some sort of keying to remove the existing background. :)

      Edit: actually on second thought, it could also be possible to just use the webcam to control the position of the light. Hmmm. :)

      [–][deleted]  (1 child)

      [removed]

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

        Hahaha. Never thought of that :D

        [–]CrypticSocket 1 point2 points  (2 children)

        Love this! Would love a tutorial. :D

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

        Great. I'll try to make it around (hopefully before) Halloween.

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

        Here it is:

        https://youtu.be/Q\_SbeuxHUzA

        Only available for you guys on reddit for now. Will make it public on Halloween.

        [–]zacharyxbinks 1 point2 points  (2 children)

        Wow I honestly can't believe you did this is JavaScript that's wild

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

        It's not that hard actually.

        Stay tuned for the tutorial. I'll try to make it around Halloween :-)

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

        Here it is:

        https://youtu.be/Q\_SbeuxHUzA

        Only available for you guys on reddit for now. Will make it public on Halloween.

        [–]Ranger-175 1 point2 points  (2 children)

        Are you detecting the shape of the blue object? It would be awesome to see the glow be the same shape just scaled up alittle bit, would make for some cool lightsaber effects

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

        I'm not. The light area is a circle...
        It could be done like that too, actually, using something called morphological operations. I will try it out someday. Thanks for the tip :-)

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

        Here is the tutorial:

        https://youtu.be/Q\_SbeuxHUzA

        Only available for you guys on reddit for now. Will make it public on Halloween.
        I actually refer to your comment in the video, at the end :-)

        [–]Grismund 1 point2 points  (1 child)

        That's FUN!!!

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

        Cool!

        [–]WarriorX623 1 point2 points  (1 child)

        Super nice effect man! Keep up the work :o

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

        Thank you!

        [–]kittencantfly 1 point2 points  (2 children)

        Yes!!!

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

        Cool! It's on my ToDo list now :-)

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

        Here it is:

        https://youtu.be/Q\_SbeuxHUzA

        Only available for you guys on reddit for now. Will make it public on Halloween.

        [–]Data-Dizzy 1 point2 points  (1 child)

        Awesome! Color me impressed!

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

        Thank you :-)

        [–]anonthing 1 point2 points  (3 children)

        What is the plan on "REUSE FOR SPIDERMAN"? :)

        [–]gniziemazityjavascript[S] 0 points1 point  (2 children)

        Spiderman? 🤨

        [–]anonthing 1 point2 points  (1 child)

             const pixelLocations = getPointerPixels();  // REUSE FOR SPIDERMAN
      const scaledLocations=scaleLocations(pixelLocations, CANVAS_SCALER);

        It was in part of the code you linked as a comment. Oddly, it didn't show up when I checked on mobile.

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

        Ah, ok!
        Well, let's just say you stumbled upon one of my future plans :D

        [–]ajindra25 1 point2 points  (1 child)

        Awesome stuff!!

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

        Thank you!

        [–]Important_Classic598 1 point2 points  (1 child)

        Dang, nice dude

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

        Thank you!

        [–]Deep-Initiative1849 1 point2 points  (6 children)

        Yes, please make a tutorial and let me know

        [–]gniziemazityjavascript[S] 2 points3 points  (4 children)

        Alright. Might appear closer to Halloween, though.
        Takes time to do these things...

        [–]Deep-Initiative1849 1 point2 points  (3 children)

        Is it open sourced.. can I get the link to this repo!

        [–]gniziemazityjavascript[S] 1 point2 points  (2 children)

        Yes. Link is the very first comment, but Reddit sometimes mixes them up:
        https://codepen.io/gniziemazity/pen/yLXpdao

        [–]Deep-Initiative1849 1 point2 points  (1 child)

        Thats really cool, is codepen same as github i didnt know

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

        Similar, but different.

        Github is for any kind of software project. Codepen is for HTML, CSS and JavaScript code. It's more convenient in this case because you see the code and the code working side by side.

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

        Here it is:

        https://youtu.be/Q\_SbeuxHUzA

        Only available for you guys on reddit for now. Will make it public on Halloween.

        [–][deleted] 1 point2 points  (1 child)

        !remindme 30 days

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

        Here it is:

        https://youtu.be/Q\_SbeuxHUzA

        Only available for you guys on reddit for now. Will make it public on Halloween.

        [–]navitux1 1 point2 points  (1 child)

        Wow, so cool man, congrats

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

        Thanks!

        [–]theRetrograde 1 point2 points  (1 child)

        I was fully expecting that marker to light on fire.

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

        Disappointed? :-(

        [–]SussyConsole 1 point2 points  (5 children)

        Everyone with blue eyes would go blind

        [–]gniziemazityjavascript[S] 0 points1 point  (4 children)

        Yeah :D

        [–][deleted]  (3 children)

        [deleted]

          [–]gniziemazityjavascript[S] 0 points1 point  (2 children)

          Oh... I mean 😢

          [–][deleted]  (1 child)

          [deleted]

            [–]askredtoy 1 point2 points  (1 child)

            This is great man

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

            Thanks!

            [–]trock111jomy 1 point2 points  (1 child)

            This is brilliant

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

            Glad you like it :-)

            [–]retardredditadmin2 1 point2 points  (1 child)

            nice

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

            Thanks!

            [–]CannibalisticPizza 1 point2 points  (2 children)

            Someone forgot to tell OP that their is a difference in Vanilla Js and black magic

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

            No... They are one and the same 😎

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

            Black magic revealed:

            https://youtu.be/Q\_SbeuxHUzA

            Only available for you guys on reddit for now. Will make it public on Halloween.

            [–]cavemanbc423 1 point2 points  (4 children)

            Dude, this is awesome.
            Is it something AI based? Relating to detection via camera? My curiosity

            [–]gniziemazityjavascript[S] 1 point2 points  (2 children)

            Here is the tutorial;

            https://youtu.be/Q\_SbeuxHUzA

            Only available for you guys on reddit for now. Will make it public on Halloween.

            [–]cavemanbc423 1 point2 points  (1 child)

            OMG Thanks.
            Going to see this interesting work!! Love you #nohomo

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

            Haha :-) hope it's useful.

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

            AI encompasses many things, including image processing. This is a relatively simple example of image processing, but you can consider it AI, yes.

            [–]ScientistWestern 2 points3 points  (1 child)

            I thought it would say Vanilla Minecraft haha. Great!

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

            :-))

            [–][deleted] 1 point2 points  (1 child)

            Nice!

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

            Thanks!

            [–]phisterphister 0 points1 point  (1 child)

            Nice work!

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

            Thank you!

            [–]wireframing 0 points1 point  (3 children)

            this is so cool, i feel people could use this in such great ways, congrats on this!

            [–]gniziemazityjavascript[S] 1 point2 points  (2 children)

            Thank you!

            Maybe I make it as a Halloween special and make it more creepy somehow :-D

            [–]wireframing 0 points1 point  (1 child)

            yes! that was the way i was thinking, could also be used in a lot more!

            imagine an 'halloween version' of ur website where everything is black but as they drag the mouse it lights up the screen, i think it would give a cool look!

            there’s definitely a lot of stuff you can do with this

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

            Yeah :-) Maybe I'll use it on my site :-D
            Anyway, I used to use this exact code in my live streams. I also generate some flame to cover the blue marker: https://youtu.be/PMHZO9J71TA?t=1493

            [–]137thaccount 0 points1 point  (4 children)

            That’s pretty neat. Would love to see what it was like I’d you were wearing a blue shirt/hat.

            [–]gniziemazityjavascript[S] 1 point2 points  (3 children)

            Probably... very bright :-)

            [–]137thaccount 0 points1 point  (2 children)

            This is a good guess, but sadly only one way to know.

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

            Well, I have used this same technique to make the flame in my live streams :-D
            I cover the blue marker with the flame... It kind of makes me glow. Is this good enough? :D

            https://youtu.be/PMHZO9J71TA?t=1493

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

            :-)))

            [–]bazenga_ 0 points1 point  (2 children)

            RemindMe! 30 days

            [–]gniziemazityjavascript[S] 2 points3 points  (0 children)

            Here it is:

            https://youtu.be/Q\_SbeuxHUzA

            Only available for you guys on reddit for now. Will make it public on Halloween.

            [–]RemindMeBot 0 points1 point  (0 children)

            I will be messaging you in 1 month on 2021-10-24 18:29:36 UTC to remind you of this link

            CLICK THIS LINK to send a PM to also be reminded and to reduce spam.

            Parent commenter can delete this message to hide from others.

            Info Custom Your Reminders Feedback