Twinkling Stars

[dada78 31 Likes (Newbie)]

Hi guys,

I am trying to do the following in plain JS and am failing miserably:

 

0_ Dynamically create x amount of stars of an existing dom element

1_ Fill an area with randomly positioned stars (dots at this point)

2_ Then animate the alpha in and out at random times

 

Issue: The console log is not printing the generated random numbers for the index 

 

Thanks for your help!

See the Pen 31632d94b995ed3af8c5f917a69228c8 by dada78 (@dada78) on CodePen

[OSUblake 9,990 Likes (Superhero)]

Hi @dada78

 

Here's a demo that should help you out. Let me know if you need help understanding anything in there.

 

See the Pen PJJxJr by osublake (@osublake) on CodePen

 

[PointC 8,599 Likes (Superhero)]

Very nice Blake.

 

What's the advantage in creating the empty fragment and appending the stars to it and then the fragment to 'main'? My first instinct would have been to use .cloneNode() and append the stars directly into the 'main' element. 

 

I'm here to learn Professor Bowen.

[OSUblake 9,990 Likes (Superhero)]

Great question.

 

Appending a star directly to the main element will trigger a reflow. There are 300 stars, so appending them one at a time could trigger 300 reflows. That does not include any additional reflows or repaints that might be caused by changing the initial style for each star. By appending all the stars to a document fragment, modifying them on there, and then adding it to the main element will trigger only 1 reflow and repaint.

 

For that demo, the performance impact probably won't be noticeable because it only happens when the page loads, you can't scroll, see, or interact with anything else on the screen, and the star images are very lightweight.

 

Here's where I first learned about using fragments.

http://slides.com/rovolutionary/tuning-svg-performance-in-a-production-app#/

 

I was dealing with the same problems as the author. My SVG app ran like crap because of all <use> elements I was constantly adding and removing from the DOM. Moral of the story. Use document fragments whenever possible, and don't use <use> elements... like ever. I have officially renamed them <don't use> elements.

 

[PointC 8,599 Likes (Superhero)]

ahhh... makes complete sense. Thanks for the lesson. That slideshow is pretty educational. I've got that one bookmarked now.

 

Goodbye <use>. Hello createDocumentFragment().

[dada78 31 Likes (Newbie)]

Thanks @OSUblake,

I tried to make your example work with my initial codepen and forked the update here:

See the Pen 0e5f98812d7d45aa074880b569f39303 by dada78 (@dada78) on CodePen

 

However I feel like I am not fully understanding this line here, as it throws the following console error: Uncaught TypeError: Cannot read property 'cloneNode' of undefined

 

var index = random(textures.length)|0;
  var star = textures[index].cloneNode(true);
  frag.appendChild(star);

 

This is how I understand it: length returns the number of DOM elements in the textures variable or 0 and randomizes those. 

var star  holds the randomized array of the textures variable and clones each of the elements in the index and then appends it to the fragment we've created.

 

Is the issue happening because I only have one DOM element not various different ones like you?

 

Thanks for taking the time to explain.

 

 

 

 

 

 

[OSUblake 9,990 Likes (Superhero)]

Hi @dada78

 

Correct. It's throwing the error because you only have 1 star.

 

I was lazy and did something else that might be confusing. The weird "|" pipe character in this code is just a quick way to floor a positive number.

// This...
var ease1 = eases[random(numAnimations)|0];

// ... is the same as this
var ease1 = eases[Math.floor(random(numAnimations))];

 

I changed them so they wouldn't confuse you.

 

See the Pen pWWQaE?editors=0010 by osublake (@osublake) on CodePen

 

[dada78 31 Likes (Newbie)]

@OSUblake you rock! Thanks so much! Continuing to learn something new one day at a time

[OSUblake 9,990 Likes (Superhero)]

Thanks!

 

And you probably don't need to create 50 different animations or eases like I did. I used a RoughEase in that demo, but I totally forgot about CustomWiggle. You can create a similar effect using a random wiggle type.

 

See the Pen wrrbZN?editors=0010 by osublake (@osublake) on CodePen