random() CSS3 - Wire Crypto.getRandomValues() into CSS - Similar to calc()

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

random() CSS3 - Wire Crypto.getRandomValues() into CSS - Similar to calc()

Dan Zulla
Hi,

Got a suggestion in regards to CSS3. Isabelle (CC) and I are currently attempting to wire @mozilla/.../random-generator (The thing in Crypto.getRandomValues()), into layout/style.
We started to make some samples like a sea of flowers or a sea with changing blue tones. See screenshots attached. Or clouds with random animation speeds, sizes, and grey tones.  
We saw that calc() is similarly usable in most CSS contexts, so we started to duplicate several header files and read through parser implementation of calc(), linear-gradiant(); looked into attr(). Recompiled with added random(), but it's not doing anything yet. We saw SCSS/Sass specifications, but it doesn't seem to be anywhere near implemented yet, and we would like random() now. 
 
What we would like it to do, simply (but not limited to) for the purpose of art, without the need for any JS, is this:
Up front said: With 5s or 2s we mean a time value like (or exactly, the same C++/Mozilla type used in animation-duration), like sampling rate, telling Firefox when to update color/height/etc. (any css attribute expecting anything that can easily be randomly generated, such as 5-100px or so, or a HEX color.)

// time in seconds [optional]; sampling rate or: time until next random pick happens and DOM gets automatically updated, similar to animation-duration

- cssattribute: random(selection1,selection2,selection3, [time in s])
- cssattribute: random(range1-range2, [time in s])

- color: random([hex color code / range part 1][-,][hex color code / range part 2], [time duration until the next update happens, like animation-duration second.]);
- color: random(#ff0-blue, [3s]); // time is optional
- color: random(#fff-blue, 3s);
- color: random(yellow-orange, 1s)  // - is a parsed delimiter, expressing: from 20px to 25px, not meant as sub(20px,25px)
- width: random(10px-50px, 4s)
- font-size: random(20px-25px, 3s)
- height: random(21px-50px)
- .some_i_tag { icon: (random(&#10047,&#10049,...));   } // selection of unicode flowers; we realize there is no icon: yet, but you get the point.
- color: random(#ffce0, #b11120, #5fd00b, #ad33cc, #ffa500)
- color: random(#ffce0, #b11120, #5fd00b, #ad33cc, #ffa500, 0.5s)

time (as in animation-duration, like 5s) (is a function argument of that type is available)
"-" is used as a delimiter if it is a range (from a light blue, to a dark blue; or from 50px-200px)
"," is used as a separator of n function parameters, as usual.

We were wondering whether there is a Python script that would allow addition of new CSS3 functions, adds the parser functions to files, and makes an empty C++ function wrapper. 
Thx!
Dan & Isabelle




_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout