mochi tutorial archive

UPDATE: It’s 2018 and this post is like 4 years old. This is an updated and simplified line of code to catch errors when going past zero, work for scaled parents and for non-uniform scale:

value / length(toComp([0,0]), toComp([0.7071,0.7071])) || 0.001;

This code measures will measure the onscreen size of 1 pixel diagonally then use that as a divisor of the Stroke Width. This means that it doesn’t matter how many parents the layer has, it will always measure a single pixel. 

the last part || 0.001 is to catch errors because you never want to divide by zero. If the size if a pixel is zero, this will evaluate as false and use a near-zero 0.001 value. Really close to zero, but no errors. Continue reading for a look at back at the original post.

Someone on Vimeo recently asked about the specifics of an effect I built with (really simple) expressions for maintaining a shape’s stroke width when scaling. This can be achieved by either:

Keyframing the path shape(s) themselves so strokes are rendered the same

Or increasing/decreasing the stroke width inverse to the layer’s scale (whaaaaa?)

Option one is by far simpler if you only have one path to control by quickly becomes unmanageable with multiple paths or layers and all their corresponding keys.  Option two is to write a short little expression and apply it to each

Stroke Width

value that will be scaled. With only a couple layers or paths I’d absolutely recommend doing the work by hand, but as things get more complicated it can be easier and provide more flexibility to set up a procedural scaling system. 

s = transform.scale[0];  scaleFactor = 100/s; value*scaleFactor;

Looking beyond copy and paste and learning what this short bit of code is doing will help you customize it and hopefully help you think a little different about expressions.  The first line takes a scale value (the X value of the scale data) and assigns it to a variable so we can more clearly use it in the next line. This scale data could come an individual shape layer itself, with other layers parented to it, or from a master scale null used to control the whole scene (pickwhip the value to save some typing).  Skipping ahead to the third and final line we are going to multiply the unaffected

value

of the Stroke Width by a variable called scaleFactor that will be defined in line two. It’s important to note that we are using

value

rather than typing out a number. This allows us to tweak the scale width on the layer (without adjusting code) and the expression updates based on this value.  Line two is where we define our scaleFactor. This is where we are converting the scale data into something useful for adjusting the Stroke Width. It can sometimes be helpful to write or draw out on a sheet of paper what you’re trying to make the math do to determine the most effective formula. Let’s say our unchanged Stroke Width is 10px. 

When S (scale) is 100% SW (stroke width) is 10 ( value*1 )

When S is 50% SW should be 20

Scale down to half and double the width to compensate ( value*2 )

When S is 25% SW should be 40

Scale down to a quarter and quadruple the width to compensate ( value*4 )

When S is 10% SW should be 100

Scale down to a tenth and multiply the width by 10 to compensate ( value*10 )

When S is 200% SW should be 5

Scale up to double and reduce the width by half ( value*0.5 )

Looking at what we’re trying to talk the math into doing for us we start to notice some patterns in the numbers ( 100%/25% = 4, 100%/200% = 0.5 ). So by setting

scaleFactor = 100/s;