-
Notifications
You must be signed in to change notification settings - Fork 306
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Transparent is not white #142
base: main
Are you sure you want to change the base?
Conversation
@mourner any chance to get this merged? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Overall the change looks great! Just let me understand the color logic better and I think it'll be good to merge.
index.js
Outdated
|
||
const rBackground = 48 + 159 * (k % 2); | ||
const gBackground = 48 + 159 * (Math.floor(k / 1.616) % 2); | ||
const bBackground = 48 + 159 * (Math.floor(k / 2.612) % 2); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hmm, left a comment here but it disappeared somewhere... Can you describe how these specific values / coefficients were picked, and maybe show a screenshot of how this looks?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think one of the tests shows that - for me it looked like how the color picker looks, and I guess the coefficients came from there...
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is what the background looks like:
There are a million choices for what the background image could look like. Here are my considerations when creating this background image:
- The background should not be a uniform color.
- The background should not contain large areas of uniform color.
- The background should have a large amount of perceptual variability.
- The background should be deterministic.
- The background color should be easy to compute.
- The background color should be a function of pixel index only (not x,y), because that is what was already available in
colorDelta()
. - The background should not contain "common colors" (particularly white and black).
- The background should not contain lines.
- The background image should not contain anything we would expect to appear in test images.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The 48
and 159
were picked to give large color variability, while avoiding white, black, and fully saturated colors.
The 1.616
and 2.612
were picked to keep the pattern from degenerating into lines at certain integer image widths. I've added some digits to make sure theses coefficients preserve their irrationality for very large images :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Amazing to see so much careful consideration going into this fix! Before we merge, the last thing left to do is to check whether and how much it affects performance — I don't expect there to be much overhead, but let's check just in case (JS perf can be weird sometimes).
Here's the time in milliseconds for each unit test, as an average of 10 runs:
|
@NathanMOlson a bit too variable to make a conclusion... e.g. could we try a median of 1000 runs after a warmup of 100 runs? |
Sure. Here you go. Another change I mage is to only profile the
|
Since this is quite a bit slower, I did a run after changing the background color to
Here's the results:
There is very little change between the variable background and the constant background, so I don't think we can expect performance gains from changing the background function. There's not much else changed in this PR, so my guess is that adding the third argument to |
@mourner You misunderstood the table. Each line is not a single test run, but an average of 10 runs for a single unit test. Each line is different because each unit test is different and takes a different amount of time. The variability is actually quite low. However, the new tables (median from 1000 runs after 100 runs warmup) are better both because they have more runs and because they exclude the parts of the unit tests other than |
@NathanMOlson I understood the table, just thought 10 runs aren't nearly enough to measure the difference reliably. OK, since the difference is significant, let me play with this PR a bit more before we can merge — curious to find the culprit / way to optimize this. |
Also, some of the tests don't even have semitransparent pixels, which makes it forego the blend calls altogether, which wouldn't produce such a difference, so this might be something with the benchmarking setup... |
I think this must be one of those cases. I've played around with it and haven't been able to improve it or get a clear understanding of what is causing the slowdown. |
@mourner Any more thoughts about this? |
@mourner Any update? |
Fixes #26, by blending transparent pixels with a color that varies with position (instead of always blending transparent pixels with white).