Hi everyone! These h1 have two different files that animate them, one that randomly generates their color and another that changes the BG-Color and adjusts the padding dynamically!

Using gsap3 and D3.js together with prior knowledge of SVG drawing and manipulation as well as being well versed in CSS3, has really increased my motivation and creating ability!!

Just refresh the page to see the random colored h1s change.

Oh, I almost forgot, I was able to make EVERY svg on the page Draggable so try clicking on ANY of them and play around, leave them wherever you'd like lol.

I will be documenting all of my learning in small projects and seeing what it leads to.

For instance this is an example of D3.js randomly generating different font colors for all of my h1s

And then gsap takes those SAME h1s and transforms them further to have padding and a border radius. ALL properties and values are subjest to my complete manipulation hahaha

I decided to put the notes inside of a textarea because then I can document things and still have room to see and show what I am building.

Also, in doing this I have discovered the correct way (overflow:scroll) to stop that annoying effect of having all my animations making the page go haywire until I can figure out how to implement ScrollTrigger!

I don't have a super great setup yet as I am using my Television to watch tutorials and coding on my laptop which is not that big. Working on it lol

Is the GPU The graphics card?
            GPU stands for graphics processing unit. You'll also see GPUs commonly referred
             to as graphics cards or video cards. Every PC uses a GPU to render images, video 
             and 2D or 3D animations for display.
             Arbitrariness
             Arbitrariness is the quality of being "determined by chance, whim, or impulse, and not by necessity, reason, 
             or principle". It is also used to refer to a choice made without any specific criterion or restraint. 
             Arbitrary decisions are not necessarily the same as random decisions. Wikipedia
            
             HSL (hue, saturation, lightness) and HSV (hue, saturation, value, also known as HSB or hue, saturation, brightness) are alternative representations of the RGB color model, designed in the 1970s
              by computer graphics
              researchers to more closely align with the way human vision perceives color-making attributes

------------   THESE NOTES  REFER TO THE D3.js Chart library ----
            D3 does not introduce a new visual representation. Unlike Processing or Protovis, D3’s vocabulary of graphical marks comes directly from web standards: HTML, SVG, and CSS. For example, you can create SVG elements using D3 and style them with external stylesheets. You can use composite filter effects, dashed strokes and clipping. If browser vendors introduce new features tomorrow, you’ll be able to use them immediately—no toolkit update required. And, if you decide in the future to use a toolkit other than D3, you can take your knowledge of standards with you!

Best of all, D3 is easy to debug using the browser’s built-in element inspector: the nodes that you manipulate with D3 are exactly those that the browser understands natively.
             One of the most common things that I say to myself daily: Ok that's connected and that means this, is that correct.

While going through the SCrollTrigger tutorial I stumbled upon D3.js and remember that I wanted to return to this library but here I am nearly half a year later and have found myself right where I need to be.

This will give me a bounce in out ball that is blue with a border of black ->

Next will be a rectangle that shifts 45 degrees and also floats up on the Y axis

This would be similar to what I would need if I wanted to simulate hitting a home run or something with a similar type of velocity and bounce. Wow!