Share your repls and programming experiences

← Back to all posts
⚪🔴🔵 Check out these cool interactive circles 🔵🔴⚪
RolandJLevy (1052)

A cool grid of interactive coloured circles that change size and opacity based on the position of the cursor. Simply move your cursor over the grid to see the effect.

Features 💡

  • Made with Vanilla JavaScript and CSS
  • Adjusts the size and opacity of each circle by calculating the distance between the circle and the cursor using pythagoras theorem, like this: Math.sqrt((x * x) + (y * y))
  • Generates 216 circles each with a unique hex colour
  • Includes dark mode 🌖 ← → 🌒
  • Doesn't achieve anything - it's just a bit of fun! 😆

Links 🔗

Comments
hotnewtop
Coder100 (17105)

Woahhhh es6 module imports!

I recommend you using babel and/or webpack to build this for browsers that don't support it yet :)

RolandJLevy (1052)

@Coder100 ah, yes. Good point. I'll look into it...

xxpertHacker (865)

@Coder100 What browser doesn't support ES6 modules!? It's been almost 6 years. According to the chart on MDN on module browser support, only Android Webview doesn't support ES6 modules.

But, I really, and I mean really doubt that Android WebView is used by any sane person as an actual browser. No one should surf the web using Android Webview, it's a very subpar browser, that is only used in very niche situations. (I'm surprised that it actually is still shipped anymore, and is still updated)

RolandJLevy (1052)

Hi @xxpertHacker, I appreciate @Coder100 bringing this issue up as I have a habit of not checking for compatibility. Thanks for explaining it so well :)

xxpertHacker (865)

@RolandJLevy It's alright, using modules are okay, it's almost 2021.

I recommend forgetting about IE, as it has long since died, just like plenty of other browsers, we don't talk about Amaya or Netscape Navigator anymore, why should we care about IE?

Now, if really care about compatibility with 9+-year-old browsers, I'd recommend sending both, a module, and a nomodule script.

And, seeing as you're using HTML, as opposed to XHTML, you should be perfectly fine.

Coder100 (17105)

oh yeah I'm first how cool

RolandJLevy (1052)

@Coder100 thanks! The hardest part was just getting the x and y position of each circle!

Coder100 (17105)

how did you overcome that? still cannot get my head around that @RolandJLevy

RolandJLevy (1052)

@Coder100, this method in the Ball class uses getBoundingClientRect() to calculate the centre of rect:

getOrigin(selector) {
    const { top, right, bottom, left } = this.$(selector).getBoundingClientRect();
    const x = (right - left) / 2 + left;
    const y = (bottom - top) / 2 + top;
    return { x, y };
  }
Coder100 (17105)

you should add a dark mode, that way the dots that aren't hovered over can still be seen @RolandJLevy

RolandJLevy (1052)

@Coder100 thanks! I checked MDN and the only browser that doesn't support module imports is Internet Explorer: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

RolandJLevy (1052)

@Coder100 nice idea! Shouldn't be too difficult to implement...

RolandJLevy (1052)

@Coder100 dark mode just been added! 🌖 🌒 thanks for the suggestion :)

RolandJLevy (1052)

Hey @Coder100, I just posted my new game, check it out and let me know what you think! https://repl.it/talk/share/GAME-Play-POP-100-a-Totally-Awesome-Game/79626

RolandJLevy (1052)

Thabks @ZDev1, it was fun making this :)

RolandJLevy (1052)

@ZDev1, one thing I could get to work was the touchmove event for the mobile view. Do you know much about it?

RolandJLevy (1052)

@ZDev1 I tried this but it didn't work:

addEventHookMouseTouch() {
  ['mousemove', 'touchmove'].forEach(event => {
 
 document.addEventListener(event, (e) => {
      e.preventDefault();
      this.morph(e, `#b${this.id}`);
    });
 });
}
zplusfour (891)

@RolandJLevy use jQuery

$("#target").mousemove(function() {
   // Your code here
});

and

$("#target").bind('touchmove', function(e){
   e.preventDefault();
   // Your code here
});
RolandJLevy (1052)

Hi @ZDev1, thanks a lot for the jQuery. I'm trying to avoid frameworks and libraries these days but it's still worth considering. Have you used this code and do you know why the touchmove event hook uses bind whereas mousemove doesn't?

zplusfour (891)

@RolandJLevy no, i dont know anything
maybe you can use Jquery instead.

RolandJLevy (1052)

Hi @ZDev1, thanks for your input with this. Jquery is a library which is extra bloat in the app and I want to avoid libraries and frameworks.

I much prefer using plain vanilla JS without dependancies so I know what's going on under the hood and not reliant to other developers maintaining and bug-fixing their codebase.

I think I need to dig a bit deeper to understand touch events. I hope you're doing well and enjoying any coding you're doing :)

zplusfour (891)

@RolandJLevy
oh well, research more!
and yes I am doing very well, at Polycloud!

RolandJLevy (1052)

Hi @ZDev1, thanks. How is the Polycloud project going and what plans do you all have for it?

zplusfour (891)

@RolandJLevy check the Trello!
and the uploading part is working (was working) because we need to make another upload system.

RolandJLevy (1052)

Hey @ZDev1, tomorrow morning I'm going to post a new game I've been working on. Will be great to know what you think :)

HewoPrsen (4)

heyyyyyyyyyyyyyyyyyyyyyyyyyyyy this is very satisfying-

RolandJLevy (1052)

Hey @HewoPrsen, thanks! Glad you like it :)

python88 (298)

I hope this gets trending!

RolandJLevy (1052)

@python88 me too! It hasn't got many upvotes yet...

CoolGuy27 (68)

@RolandJLevy np

var satisfaction = 9999;
function cool(){
satisfaction++;
}
cool();
alert("satisfaction is " + satisfaction);
RolandJLevy (1052)

@CoolGuy27

console.log(`Thanks for alerting me about the ${satisfaction} satisfaction!`);
firefish (915)

@CoolGuy27 var moves variables to the top of the scope, (look at Javascript Hoisting - wonder why no-one else uses it), however let does not.

RolandJLevy (1052)

@firefish, just to add - let and const were introduced with ES6 (ES2015)

Also, var only has global or function scope whereas let and const have block scope. var variables can be updated and re-declared. let variables can be updated but not re-declared. const variables can neither be updated nor re-declared.

firefish (915)

@RolandJLevy Why would you want to redeclare a variable?

CoolGuy27 (68)

@firefish idk, but I will start to use

let
RolandJLevy (1052)

@firefish, I'm not sure. You might want to reset it. This explains the differences better than I ever could: https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/

RolandJLevy (1052)

Hey @CoolGuy27, I just posted a new game, check it out and let me know what you think :) https://repl.it/talk/share/GAME-Play-POP-100-a-Totally-Awesome-Game/79626

RolandJLevy (1052)

Hey @firefish, I just posted a new game, check it out and let me know what you think! https://repl.it/talk/share/GAME-Play-POP-100-a-Totally-Awesome-Game/79626

firefish (915)

@RolandJLevy no need to advertise Ok! I will!

AgastyaSandhuja (172)

woahhh! dark mode makes it even better :0