-
-
Notifications
You must be signed in to change notification settings - Fork 624
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
Option to eliminate randomness #27
Comments
This would be useful. // returns instance of rectangle
const rec = rc.generate.rectangle(120, 15, 80, 80, { roughness: 2.8, fill: 'blue' })
// draws rectangle using above instance, will always be same no randomness
rc.draw(rec) |
Yep, something like that would be great 👍 |
This is great. In fact underneath the main API, there are already methods to do this; and my version 1 of this lib already supported this - it was more object oriented and a lot of people preferred the current simpler api. Having said that that I'm planning an update that creates a raw SVG renderer along with the current Canvas render. So, any API change has to be forward compatible, and this is right along the lines with where I'm going. I'll add this in in the next couple of days. |
@pshihn Would definitely appreciate having this feature. I made a snake game using roughjs, and it looks great. However, it currently updates the drawings too fast, and having control over the randomness would help me fix it. Thanks a lot for making the library! |
@AriaFallah This is really cool! I think I should create a gallery page where people submit creations using Rough.js |
Not sure this warrants a new issue, so I'm adding here. I suggest using a seedable RNG to support 'squigglevision' allowing the coder to limit the change in randomness to just a few iterations. For example: setting to seed A, drawing a square; setting to seed B, redrawing the same square; now back to seed A, etc. I suppose the same functionality can be gained with the generator function - I'd just need to generate two or more instances of an object with the same settings, then alternate which is placed on-screen. |
@ShonFrazier That's exactly what I had in mind :) |
Here you go: https://github.com/pshihn/rough/wiki/RoughGenerator Regarding the 'squigglevision', @ShonFrazier, I suppose it could be written on top of roughjs/generators easily. |
I meant "support others' efforts to use roughjs when animating" - I wouldn't expect any kind of animation helpers to be provided by this lib. Just giving more control to the consumer of your API is all that's required. I think generators gives me exactly the control I'd expect. thanks! |
@pshihn with this new API is there any way to have roughCanvas.rectangle(0, 0, 25, 25);
roughCanvas.rectangle(10, 10, 25, 25); the two above calls, draw the same exact shape? Basically, have the library draw the same thing even when the |
@AriaFallah It does not directly solve your scenario, but you can use generator in combination with context.translate/setTransform |
@AriaFallah I ran into this yesterday too. The best solution I've found is to generate the shapes anchored around 0,0 and then translate each shape into place using your Still not sure what to do for curves (such as an edge between two nodes that are allowed to move independently). |
When RoughSVG renderer is in place, you can get a SVG node with the shape - would be much easier to animate without re-rendering using CSS/Style transform |
Generators were added in #36 Closing issue |
In my project, I needed the ability to have a custom seed in order to have a stable rendering across serialization boundaries. Since it's not going to be supported directly by roughjs, I had to workaround by overriding Math.random with a pseudo random number generator that supports a seed before calling roughjs. Here's the code if you want to replicate it on your use case. // Before
const shape = generator.rectangle(10, 10, 50, 50);
// After
const shape = withCustomMathRandom(123456 /* seed */, () =>
generator.rectangle(10, 10, 50, 50)
); // https://stackoverflow.com/questions/521295/seeding-the-random-number-generator-in-javascript/47593316#47593316
const LCG = seed => () =>
((2 ** 31 - 1) & (seed = Math.imul(48271, seed))) / 2 ** 31;
// Unfortunately, roughjs doesn't support a seed attribute (https://github.com/pshihn/rough/issues/27).
// We can achieve the same result by overriding the Math.random function with a
// pseudo random generator that supports a random seed and swapping it back after.
function withCustomMathRandom(seed, cb) {
const random = Math.random;
Math.random = LCG(seed);
const result = cb();
Math.random = random;
return result;
} @pshihn, I would encourage to make it part of the official API. I don't believe that generators are solving this use case of serializing and deserializing the shapes. |
@vjeux do you imagine seeding each shape or a global seed or both? |
My use case us each generate command would have an individual seed managed by the caller. I don’t have a use case for a global seed |
Resolved by #121 |
It would be great if there was an option to eliminate randomness when drawing shapes. So basically that the first time it would be random, and then the same shape would be drawn again.
For example drawing lines on canvas and then redrawing the entire canvas causes the lines to flicker due to randomness.
I would be willing to work on this as a PR, if you think it's a good idea.
The text was updated successfully, but these errors were encountered: