3 ms·

Good job on this- very cool. I think it'd be a nice addition to have a "randomize settings" button, or perhaps allow a "travel" mode where the x/y positions ch

Good job on this- very cool. I think it'd be a nice addition to have a "randomize settings" button, or perhaps allow a "travel" mode where the x/y positions change in smaller increments (so the background changes a bit slower). I'd like to add something like this to: http://projects.skratchdot.com/infinite-gradients http://projects.skratchdot.com/infinite-gradients I'll at least add a link to https://github.com/tiborsaas/unique-gradient-generator https://github.com/tiborsaas/unique-gradient-generator in the README...

pygy_ 11y ago
The x/y increment resolution is a limit of the technique used. It uses overzoomed images, you scroll one source pixel at a time. Since it uses `background-size: cover;` for rendering, you cant scroll by fractions of pixels.
- BinaryBullet 11y ago
  Ah, that makes sense. I thought it was just that the dat.gui step was set to '1' not '0.01'. Didn't realize the step was set that way puposely due to a limitation of the technique being used.
kowdermeister 11y ago
Thanks, this will be a great addition. You can navigate with your arrow keys currently. Readme will improve and I'll certainly link to your project, I like it a lot.
- BinaryBullet 11y ago
  I just noticed that :) Was working on adding a randomize button, but having trouble building. Are you using gulp or webpack or a combination? I'll submit a PR after editing this (if you wanna accept it): https://github.com/tiborsaas/unique-gradient-generator/blob/gh-pages/js/controller.js https://github.com/tiborsaas/unique-gradient-generator/blob/... Trying to add a randomize() function that edits topX, topY, and sampleArea. Might add a button to dat.gui or maybe just call it based on pressing the 'r' key.
  - kowdermeister 11y ago
    Gulp for SASS and Webpack for ES6 transpilation. Dat.GUI button is a good way to go, I'll definitely accept a PR. Thanks in advance.

pygy_ 11y ago

The x/y increment resolution is a limit of the technique used. It uses overzoomed images, you scroll one source pixel at a time. Since it uses `background-size: cover;` for rendering, you cant scroll by fractions of pixels.

BinaryBullet 11y ago
Ah, that makes sense. I thought it was just that the dat.gui step was set to '1' not '0.01'. Didn't realize the step was set that way puposely due to a limitation of the technique being used.

kowdermeister 11y ago

Thanks, this will be a great addition. You can navigate with your arrow keys currently. Readme will improve and I'll certainly link to your project, I like it a lot.

BinaryBullet 11y ago
I just noticed that :) Was working on adding a randomize button, but having trouble building. Are you using gulp or webpack or a combination? I'll submit a PR after editing this (if you wanna accept it): https://github.com/tiborsaas/unique-gradient-generator/blob/gh-pages/js/controller.js https://github.com/tiborsaas/unique-gradient-generator/blob/... Trying to add a randomize() function that edits topX, topY, and sampleArea. Might add a button to dat.gui or maybe just call it based on pressing the 'r' key.
- kowdermeister 11y ago
  Gulp for SASS and Webpack for ES6 transpilation. Dat.GUI button is a good way to go, I'll definitely accept a PR. Thanks in advance.