More than a colorful blinking "Hello" - Less than https://threejs.org/ or a Vertex Shader.
Shall be in Firefox, publicly added, of course. Here are the images: https://imgur.com/a/7HkA2 Dan Am 08. März 2017 um 19:54 schrieb Daniel Holbert <[email protected]>: Hi Dan & Isabelle, Firstly: I think you meant to include some screenshots, but they didn't make it into the final post. (perhaps because they were file-attachments and maybe this list doesn't accept attachments? not sure) Would you mind posting those screenshots somewhere on the web & including links to them here, to help get your proposal across? (maybe via https://imgur.com/ or anywhere) In any case -- if I understand correctly, you're saying you'd like to modify Firefox so that it'll accept syntax like... <div style="color: random(yellow-orange, 1s)">Hello</div> ...and you'd like that to make the text "Hello" change to a different random "color" value (between yellow and orange), every 1 second. (and hold that color for a second, and then snap to another random color value, etc.) Is that correct? That's a pretty complicated change, and I don't think it'd be easy to do. Especially the dynamically-changing-style parts (snapping between different random colors) would be hard to integrate cleanly. Our rendering engine basically assumes that the same CSS & content will always produce the same rendering -- and your random() proposal seems to violate that assumption. (CSS Animations are one sort-of exception to this rule, but CSS Animations are quite complex under the hood, and there'd be a very high bar to adding something brand-new with similar dynamic behavior to CSS Animations.) I suspect you'd find it's easier (and more maintainable) to implement this sort of thing in JavaScript, rather than by patching the browser internals itself. Even if your goal is to eventually get this into browsers, a JS version would be a good way to demonstrate the use-case and to (eventually, if it's successful) prompt browsers to standardize & integrate some version of the syntax down the line. (Also, on that topic -- is this proposal something you're hoping to see actually integrated as part of shipping Firefox browsers eventually, or just as a feature in your own locally-patched-and-compiled version of Firefox? Because: if you'd like to see it as a shipping feature, we'd ultimately want to see it standardized via the w3c's CSS Working Group -- though I suspect their response would be similar to what I said above, at this point.) Thanks for your interest! ~Daniel On 3/8/17 6:20 AM, Dan Zulla wrote: One more comparison of what code looks like when random() exists and one what it looks like, and how much work it is, when it doesn't. Dan & Isabelle Am 08. März 2017 um 15:17 schrieb Dan Zulla <[email protected]>: 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(✿,❁,...)); } // 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 [email protected] https://lists.mozilla.org/listinfo/dev-tech-layout _______________________________________________ dev-tech-layout mailing list [email protected] https://lists.mozilla.org/listinfo/dev-tech-layout
