using coords of points to mult effect of wiggle
Hi,
I've had a look and there's certainly info about this already, but I'm trying to make a christmas card for my girlfriend and i'm in a hurry so please accept my apology for being lazy :)
How can I use the y coords of a point to multiply with the offset for a wiggle of that point?
Basically I want to wiggle a shape according to a gradient; ie the points at the top of the shape will not wiggle at all, and the points at the bottom will wiggle the most.
Thanks in advance for any help, and merry christmas!
Keyboard shortcuts
Generic
| ? | Show this help |
|---|---|
| ESC | Blurs the current field |
Comment Form
| r | Focus the comment reply box |
|---|---|
| ^ + ↩ | Submit the comment |
You can use Command ⌘ instead of Control ^ on Mac
Support Staff 1 Posted by john on 22 Dec, 2015 01:39 PM
Hi Alex,
An interesting challenge. I don't know what shapes you are using or what overall effect you're hoping for, but I took a run at it using letters and a heart. If you don't like the way I wiggle, you can cannibalize my network until you get what you want.
To do the magic I created a subnetwork called y_wiggle that does most of the work. It takes in a shape, resamples it into points, does a lookup on "points" to get a list of coordinates, and grabs just the Y values. It then converts those values to a continuous range from 0 for points at the top to a "maximum disorder" value at the bottom. and raises those values to a power to allow for the option of a non-linear gradient; these values now represent the maximum amount of wiggle room for each point.
y_wiggle then translates each point a random amount up to plus or minus the max wiggle value. When playing I discovered that just letting the X values wiggle and leaving the Y values alone often produced a more pleasing result, so I did that for the letters and let both X and Y wiggle for the heart.
Once the values are wiggled, I just connect the dots and group it to form the modified shape. The main network re-colors the shape, stacks the letters into words (you can adjust the kerning if you want using the stack node's margin port), positions everything, then combines it all atop a white screen.
That's a quick overview. You can adjust the disorder, linearity, and resolution values to change how much it wiggles, how much faster it wiggles as it nears the bottom, and how smooth the overall shape should be drawn.
Feel free to poke around and ask me about anything you don't understand. There may be an easier way to wiggle on a gradient, but this approach seems to work well enough to get you started. With more effort you could fine tune the way the dots wiggle to make the overall effect less jagged. For more randomness you could expose a seed value as an additional parameter and feed it something different each time y_wiggle is called.
I am attaching the NodeBox network (Gradient Wiggle), the heart SVG I found on Wikipedia, a screenshot of the y_wiggle subnetwork, and a PNG of the final output.
Hope this helps you make Christmas Card in time. If you come up with something cool and don't mind sharing it, feel free to post your creation in the "Show Your Work" forum.
Merry Christmas to you and your girlfriend!
John
2 Posted by alex on 22 Dec, 2015 11:37 PM
Thanks for the very comprehensive response!
I'll post my design when it's done.
Merry Christmas!
Alex
3 Posted by alex on 23 Dec, 2015 06:25 AM
Ok it's done and printed!
Can't thank you enough for helping me out like that. I ended up staying up until 4 in the morning canibalizing your network, as you say.
I think nodebox is amazing. A bit like houdini for graphics, and free! It's shit like this that makes it miserable to go back to adobe products.
I'll post my thing, nothing special but a lot of fun to make.
Cheers
Alex