GithubHelp home page GithubHelp logo

rxlaboratory / dustroke Goto Github PK

View Code? Open in Web Editor NEW
3.0 2.0 0.0 40.13 MB

Advanced Strokes for After Effects

License: GNU General Public License v3.0

JavaScript 67.72% HTML 32.12% CSS 0.16%
after-effects stroke preset

dustroke's People

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar

dustroke's Issues

Issues and Suggestions from Testing

  • We could use a very tiny font size with a huge Scale Animator on it, to avoid the disappearing font issues.

The Stroke / Path alignment Propriety comes as "-18" by default.
I Don't know if expressions have access to the Font Size, a script probably has access to it.

Maybe, In the ideal scenario, the User should never touch the Font Panel when setting up his stroke, since is too easy to break the stroke through it.

So we could define all the Default Values to the Font inside the Script.
Like 1 for Font Size and 0.5 for Path Alignment


  • Is The flow propriety Random by Default?

I was messing with the flow propriety from Brush options, and was having issues with my stroke breaking into two parts.
Later i discovered that the Flow from Random Options was set to "50%" by default. Is that working as intended by default?

image


  • Is there a difference between these two path alignment?

image

Probably you wanted to have one for initial setup and other for controling from Zero.
So should the setup one be hidden in the backend of the expression then?


  • Maybe we can Unify the Custom and the Standard brush shape panels, to make it less convoluted, to something like this:

image

✅ I wrote a new sourceText engine based on the TextController suggestion, check here:
https://github.com/Rainbox-dev/DuStroke/tree/master/Pseudo%20Effects/DuStroke%20PrototypeTest


  • The Dynamic Flip could make use of some more options, like these:

image

With it, for example, a user could make Clouds or Spikes with the same Brush:
image

Something like this may do the trick of Odds / Even Dynamic Flip:
if (textIndex % 2) 100 else -100

And maybe something similar, to do the flop ( Mirror mode? )


  • Randomize mode for custom text Throws this error

image

The error points to this line:
ch = parseInt(c);

Maybe the solution is to change it to this:
ch = parseInt(ch);

Another problem with randomize is that it should work either in "Repeat" Mode (density*shape.length) or in "As Is" Mode (density).
Maybe we should transform it into a checkbox called "Random Order"

✅ The sourceText engine covers these issues, check here:
https://github.com/Rainbox-dev/DuStroke/tree/master/Pseudo%20Effects/DuStroke%20PrototypeTest


  • Speaking of the Randomize option, maybe it could have a random seed for the characters align or even the choice of the characters itself.

✅ The sourceText engine covers these issues, check here:
https://github.com/Rainbox-dev/DuStroke/tree/master/Pseudo%20Effects/DuStroke%20PrototypeTest

I put together this expressions to somehow test this idea, it goes on a custom Source Text:

 //Begin expression
numOfLetters = 10 ;  // Density
useSpaces = true ;
changeEveryFrame = true;
startCharacterCount = 0         // 0 is A
endCharacterCount =8      // 25 is Z

posterizeTime(12);

seedRandom(index, !changeEveryFrame);

//--
function genLetter( )
{
tempA = 65 + startCharacterCount;
tempB = 65 + endCharacterCount
r = random(tempA, tempB); // from a to z
return String.fromCharCode( r );
}
s = "";
for(i = 0; i < numOfLetters; i++)
{
s += genLetter();
if(useSpaces)
s += " ";
}
s
//End expression

  • The Random Proprieties inside Brush Options seems out of place...

Maybe we can Unify them, inside their proper panel, like these mockups:
image


  • Spacing between characters property

There is this big blank space on the smaller end of a tapered stroke:

image

Would it be less task heavy for AE to give more space to bigger characters and less to smaller, instead of multiplying the number of characters to fill these gaps?
With a Spacing in ramp mode, we could fix that.

image
I kinda found a workaround to solve the space between smaller characters.
I made a Position animator, and used these settings and code below:

var a = -(effect("DuStroke")("Enabled")) * (effect("DuStroke")("End"));  // -taperCheckbox * Stroke.endPosition
[a,0]

image

The problem with this solution is that i had to increase the End property until i had a similar spacing between both ends of the DuStroke.
And, when i turn the taper off, i have to decrease the End back to "0" too.

I think there's a better way to fix it, considering the scale of every character...


  • There's a better way do implement these brushes:

image

We can have a more dynamic way to do these brushes,
by Scaling the width from the characters and rotating them.

The advantage to do this is that it will work with any shape of brush, not only these.

The problem is that this solution will conflict with the Dynamic Flip and Rotation properties. Is there a way to deform the width and height of a character ignoring its rotation?

They tackle this propriety as "Roundness" in Photoshop:

image


  • I coudn't find an intuitive way to reverse any of the Ramp / Round / Smooth proprieties.

Every time i wanted to flip a stroke, i had to make the Taper Bigger than the Size.
And it changes every property, not only a specific one.

I can aways do a Taper like this:

image

but have a hard time, making something like this:

image

A solution could be attached to an Invert checkbox,
or by considering when the Start value is bigger than the End value:

image

Maybe the "Taper" value should be Absolute, not relative to the "Size" property
image


  • What if the Script had the option to create or connect the DuStroke Layer to a Shape Layer?

In my workflow, i always start creating a DuStroke, then a Shape Layer.
Next i have to connect the path from both layers, finally i have to connect all the transform
properties from the Shape to the DuStroke, so i can resize, rotate and move the Shape Layer with the Dustroke altogether.

I mean, that's not a big deal, but made me think about skipping
some of those steps using through the Script.


  • I coded an Animator that is driven by Path. We could make a Curve Controller for the Script with it.

Check it out:
https://github.com/Rainbox-dev/DuStroke/blob/master/Demo/Mauro_Demos/DuStroke_CurveController_test.aep

image

I had to hardcode the Selector Range Layers, probably there is a dynamic way to do them, and even break them into more segments than i did.


  • I made a Pseudo Effect MatchNamed "TextController", that drives the text inside the DuStroke by editting it's own name:

image
Proof of Concept: https://github.com/Rainbox-dev/DuStroke/tree/master/Pseudo%20Effects/TextController
(The main code is inside the TextInput Layer)

It isn't as flexible as a custom text from another Text Layer, but it could be an alternative to the A to Z combobox, and a helper to anyone that needs self-contained brush presets.

i coded "Tags" to determine the Start and End caps too, like:
<sc AAA/> ABBCA <ec CCC/>
and made some other tags that breaks the lines and inserts white spaces between specific characters.
AAAABAA <br> AAACCAA <tab> AAA <tab> AA <tab> A

image
(Text FPS property shouldn't be = 0, After Effects crashes when PosterizeTime is 0);

We could consider it only when the Custom Text/Text Source layer property points to the DuStroke Itself, "None" or invalid layers.

The script Panel could handle all this renaming workaround in a better-looking way, like on that old mockup thingy that we discussed earlier:
image

(I included the "break line" tag after testing how duStroke handles text with multiple lines,
it could be further implemented, but it's too laggy and out of DuStroke main focus).
image

Reworking the DuStroke's Pseudo Effect

Hey @Nico-Duduf , I gave some thought about the DuStroke Pseudo Effect and uploaded a custom version of it, feel free to use or discard any ideas from it.

This is how it looks:

image
https://github.com/Rainbox-dev/DuStroke/tree/master/Pseudo%20Effects/DuStroke%20PrototypeTest


Setup Tab

image

I added a "Brush" Tab, just to suggest for the user to check the ScriptUi instead of the Font Pannel.
Don't know if is it useful at all.

I removed the "as is/ repeat / randomize" from the brush Density, since we will work with the Text Controller and "As is" vs "repeat" options are the same as "Density = 1" vs more Density.
The Randomize option should respect the Caps from the Text Controller.

Maybe the Start Size / End Size Values should work as absolute values, instead of that Taper setting from the current version. That way will be easier to invert values and remember all other settings that are named "Start ______" or "End ______" equally.

The "Start Locator" and "End Locator" are the old "Start" and "End" Properties.
I had to give this name to them because i started repeating "Start" and "End" through other properties.

"Path Offset" and "Path Alignment" are the same as the older version. The difference is that
the frontend of the "Path Alignment" works better as "0" instead of "-18" or any property we setup as the font needs. We should leave this Alignment Setup hidden from the Effect Tab.

.

image

Setup Tab / Color Settings

For the colors i added a Settings Tab, it works as the older color Tab, with the Invert option added and a "Curve Controller" Selector.
The "Controller Density" determines how precise the Curve Controller is.


Dynamics Tab

image
I removed the "Dynamic Blur" and the "Blending Opacity" properties.
We can get the same result through the "Transform Tab -> Opacity Settings -> Mode: Absolute" property.

"Dynamic Spacing" will change the white space between characters,
giving more space to the bigger and less space to the smaller characters.

"Flip Mode" and "Mirror Mode" will control the Flip and the Flop from each character.
.


Blending Tab

image
I put a "Blend Mode" visualizer to incentive the User to test out the script possibilites.
Not sure if is it useful at all.

Changed the "Random Color" to "Tint" too.
It probably will share the same code as the Flip property + the "Color Influence" controller, aka "Random Color" from the Current version.


Transform Tab

image

I Tried to cover all the properties that were used with the current DuStroke.
Probably there are more properties that can be animated in a Text Layer, but the controller is at it's limit. every time i try to add more properties it glitches.

Should we create a "Selector/Animator Controller" to help people that want to stack more properties like this?

.

image
Transform Tab / Scale Settings

Every property inside the Transform Tab work the same way.
That's why all the "Settings" tabs are pretty much the same.

I removed the "Enabled" checkbox, and used "Mode: Absolute" Setting Instead, it could consider the "Invert" Checkbox only, to determine wich value to pickup.

I Also Included the "Randomizer Influence" and "Randomizer Mode" to the main Settings.
When the "Influence" is 0, the randomizer should be "Off".

I also added and a "Curve Controller" Selector.
The "Controller Density" determines how precise the Curve Controller is.


Options and Text Controller Tabs

image

The options Tab have the Randomizer Settings.
And the Text Controller Tab, is there so people can select a Controller from another Layer.

image
I even tried to move those Settings from the main Text Controller to the DuStroke,
but the Pseudo Effect Maker glitches with more properties, and they should be contained inside the Controller Itself, to work through different layers.

Script specs

DuStroke creation

  • Sets the font
  • Sets the path alignment to font size/2
  • Gets any path selection to recreate the same
  • Quick presets

Edit

  • Change font (with preview)
  • Change brush (with preview)
  • Change characters blending mode

Converting DuStrokes to DuShapes

I just saw a taper preset made by School of Motion:
image
https://www.schoolofmotion.com/tutorials/free-tapered-stroke-after-effects/

It's basically a group of strokes with different thickness stretched inside a path.

That gave me the idea of doing the same with any shape object, through Satoru Yonekura's shapeOnPath expressions.

image

That could give us a powerful (and probably slower) variation of DuStroke, that can distort and stretch multiple brushes, instead of just placing and transforming them.

Comp_Shape_on_path
part of a DuStroke brush, converted to Shape Layer, then duplicated two times along a path.

We could even make use of the "Create Shape from Text" command to convert DuStroke's brushes to this format.

image

And so, brushes could have tons of hold-keyframes that cycles through different brushes...

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.