Random Fixed Color Expression Andy Ford June 28, 2022
0 Comments
This tutorial expands upon my previous tutorial on creating a random color expression. That expression randomly changed color of your shape layer, but you achieved values that were in between the range of colors you selected. This tutorial features expressions to help you randomly change between fixed colors and not get the in-between values.
Some contents or functionalities here are not available due to your cookie preferences!
This happens because the functionality/content marked as Google Youtube uses cookies that you choosed to keep disabled. In order to view this content or use this functionality, please enable cookies: click here to open your cookie preferences.
First, we add color controls to our shape layer for each color that we want to appear. Then, we set an expression for our shape's fill color and create variables for each and add those variables to an array. We can control the value of the array by adding a slider control, and then return the value of the array (which is determined by the slider).
Once you add Math.floor to your slider value to eliminate complexities when your slider value is not a whole number, you can control the color shown based on your slider value.
var color1 = effect( Color Control 1 )( Color );
var color2 = effect( Color Control 2 )( Color );
var color3 = effect( Color Control 3 )( Color );
var color4 = effect( Color Control 4 )( Color );
var color5 = effect( Color Control 5 )( Color );
colors=[color1,color2,color3,color4,color5];
slider=Math.floor(effect( Slider Control )( Slider ));
colors[slider];
To automate this, we need to do more. We must make a variable that makes this whole expression go. For this, we create a variable that is equal to Math.floor(time/slider). This creates a whole number value that is always changing and makes your slider value act as a throttle or speed control.
This expression needs to work in conjunction with seedRandom. The seedRandom method allows you to replay the same random movements every time. The seed value is the variable we just created above, and then we need to complete the seedRandom method with a timeless argument that is either true or false. In this case, we want to use true because that makes this timeless. By that, I mean it stays the same on each frame but still chooses a random value. If you select false, everything changes each frame, which is not what is needed in this instance.
Now we need another value that helps choose the color. Set this to Math.floor(random(colors.length)). This adds the randomness into the equation, and sets the confines of the randomness to the number of values in your array. Finally, we return the value of the colors, which in the variable just created.
var color1 = effect( Color Control 1 )( Color );
var color2 = effect( Color Control 2 )( Color );
var color3 = effect( Color Control 3 )( Color );
var color4 = effect( Color Control 4 )( Color );
var color5 = effect( Color Control 5 )( Color );
colors=[color1,color2,color3,color4,color5];
slider=effect( Slider Control )( Slider );
engine=Math.floor(time/slider);
seedRandom(engine,true);
colorChoose=Math.floor(random(colors.length));
colors[colorChoose];
Speed of color change is regulated by the slider control value.
###
Enjoying this tutorial? Sign up now for the Creative COW Newsletter!
Sign up for the Creative COW newsletter and get weekly updates on industry news, forum highlights, inspirational tutorials, tips, burning questions, and more! Receive bulletins from the largest, longest-running community dedicated to supporting professionals working in film, video, and audio.
Enter your email address, a first and last name, and let us know what you'd like to see more of in the message!
.grecaptcha-badge{visibility:hidden}.meow-contact-form .meow-contact-form__header{display:flex;margin-bottom:10px}.meow-contact-form .meow-contact-form__header .meow-contact-form__header__content{flex:1;display:flex;flex-direction:column;justify-content:center}.meow-contact-form .meow-contact-form__header .meow-contact-form__header--image--left{margin-right:10px}.meow-contact-form .meow-contact-form__header .meow-contact-form__header--image--right{margin-left:10px}.meow-contact-form--editor input{color:gray}.meow-contact-form--default{font-size:18px}.meow-contact-form--default input:not([type=submit]),.meow-contact-form--default textarea{width:100%}.meow-contact-form--default input[type=submit]{padding:10px 40px;font-size:18px;line-height:18px}.meow-contact-form--default .meow-contact-form__info{margin-top:-10px;margin-bottom:10px;font-size:14px}.meow-contact-form--default .meow-contact-form-message{font-style:italic}.meow-contact-form--default .meow-contact-form__group{margin-bottom:15px;font-size:16px}.meow-contact-form--default .meow-contact-form__group .meow-contact-form__group-input,.meow-contact-form--default .meow-contact-form__group .meow-contact-form__group-textarea{margin-top:3px;padding:5px;font-size:14px}.meow-contact-form--default .meow-contact-form__header{margin-bottom:15px}.meow-contact-form--default .meow-contact-form__header__content--title{font-size:24px;line-height:24px}.meow-contact-form--default .meow-contact-form__header__content--text{margin-top:5px;font-size:16px;line-height:16px;color:gray}.meow-contact-form--default .meow-contact-form__group-button{padding:10px 20px;border:none;margin-top:10px;cursor:pointer}.meow-contact-form--default .meow-contact-form__group-button:hover{filter:brightness(1.05)}.meow-contact-form--meowapps{padding:20px;box-shadow:0 0 5px #d8d8d8;font-size:18px;background:#fff;color:#333}.meow-contact-form--meowapps input:not([type=submit]),.meow-contact-form--meowapps textarea{width:100%;border:#e7e7e7 solid 1px}.meow-contact-form--meowapps .meow-contact-form__info{margin-top:-10px;mar
