ADOBE AFTER EFFECTS: Forum Expressions Tutorials Creative Cloud

Bouncing DVD Logo: How do I change the shape color when it changes direction?

COW Forums : Adobe After Effects Expressions

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Mason Hankins
Bouncing DVD Logo: How do I change the shape color when it changes direction?
on Aug 8, 2017 at 1:11:37 am

Hello all,

I am new to this forum and to after effects expressions. I thought an easy project to try using expressions on is the old bouncing DVD logo. Boy was I wrong. I learned to make the bouncing dvd logo expression from Dan Ebberts here: https://forums.creativecow.net/thread/227/1416

But what I am still missing is making the color of the shape layer change color every time it hits a wall and changes direction. I figured the best way would be to use the original expression and make the fill layer change color when the shape velocity hits 0 and changes direction, but I don't know how expression math works.



Is there a way to do this? Please let me know!

(also if anyone knows a website or book to learn basic expressions please point me in the right direction)

Thanks,

Mason

left = 100;
top = 100;
right = thisComp.width -100;
bottom = thisComp.height -100;

minSpeed = 200; //pixels per second
maxSpeed = 200;

minX = left;
maxX = right;
minY = top + 20;
maxY = bottom - 20;

minR = 5;
maxR = 85;

seedRandom(index,true);

// calc start position

pos = random([minX,minY],[maxX,maxY])
quadrent = Math.floor(random(4))*90;
angle = random(minR,maxR) + quadrent;
spd = random(minSpeed,maxSpeed);

// initialize time count;

t = 0;

while(t &lt;= time){
rads = degreesToRadians(angle);
xVel = spd*Math.cos(rads);
yVel = spd*Math.sin(rads);

// see if going up or down

if (yVel &lt; 0) yLim = top else yLim = bottom;

// see if going right or left

if (xVel &lt; 0) xLim = left else xLim = right;

timeX = (xLim - pos[0])/xVel;
timeY = (yLim - pos[1])/yVel;

if (timeX &lt; timeY){ //hit left or right wall
if (t + timeX >= time){
deltaT = time - t;
pos += [xVel,yVel]*deltaT;
break;
}else{
pos = [xLim,pos[1] + yVel*timeX];
angle = 180 - angle;
t += timeX;
}
}else{ //hit upper or lower wall
if (t + timeY >= time){
deltaT = time - t;
pos += [xVel,yVel]*deltaT;
break;
}else{
pos = [pos[0] + xVel*timeY,yLim];
angle = 360 - angle;
t += timeY;
}
}
}
pos



Return to posts index

Dan Ebberts
Re: Bouncing DVD Logo: How do I change the shape color when it changes direction?
on Aug 8, 2017 at 1:16:05 pm

What you're looking for in the way of color change seems a little vague. Maybe you could describe it a little better.

Dan



Return to posts index

Mason Hankins
Re: Bouncing DVD Logo: How do I change the shape color when it changes direction?
on Aug 8, 2017 at 6:28:35 pm

Hey Dan,

Thanks for responding. The best way for me to describe the color change is this:

Every time the logo hits a wall it's color changes to the next preselected color.

OR (if it's easier)

Every time the logo hits a wall it's color changes randomly to 1 of 6 preselected colors.

Here's an example of what I'm describing.

https://bouncingdvdlogo.com/

Thanks,

Mason


Return to posts index


Dan Ebberts
Re: Bouncing DVD Logo: How do I change the shape color when it changes direction?
on Aug 8, 2017 at 8:55:13 pm

OK. So the trick is that because two expressions (position and color) will depend on the same random calculations, you need to move those outside the position expression. Add a Point Control named "pos" with this expression:

left = 100;
top = 100;
right = thisComp.width -100;
bottom = thisComp.height -100;
minX = left;
maxX = right;
minY = top + 20;
maxY = bottom - 20;
seedRandom(index,true);
random([minX,minY],[maxX,maxY])

Add a slider named "quadrent" with this expression:

seedRandom(index,true);
Math.floor(random(4))*90;

Add a slider named "angle" with this expression:

minR = 5;
maxR = 85;
seedRandom(index,true);
quadrent = effect("quadrent")("Slider");
random(minR,maxR) + quadrent;

and a slider named "spd" with this expression:

minSpeed = 200; //pixels per second
maxSpeed = 200;
seedRandom(index,true);
random(minSpeed,maxSpeed);

Then modify the Position expression to this:


left = 100;
top = 100;
right = thisComp.width -100;
bottom = thisComp.height -100;

pos = effect("pos")("Point");
quadrent = effect("quadrent")("Slider");
angle = effect("angle")("Slider");
spd = effect("spd")("Slider");

// initialize time count;

t = 0;

while(t <= time){
rads = degreesToRadians(angle);
xVel = spd*Math.cos(rads);
yVel = spd*Math.sin(rads);

// see if going up or down

if (yVel < 0) yLim = top else yLim = bottom;

// see if going right or left

if (xVel < 0) xLim = left else xLim = right;

timeX = (xLim - pos[0])/xVel;
timeY = (yLim - pos[1])/yVel;

if (timeX < timeY){ //hit left or right wall
if (t + timeX >= time){
deltaT = time - t;
pos += [xVel,yVel]*deltaT;
break;
}else{
pos = [xLim,pos[1] + yVel*timeX];
angle = 180 - angle;
t += timeX;
}
}else{ //hit upper or lower wall
if (t + timeY >= time){
deltaT = time - t;
pos += [xVel,yVel]*deltaT;
break;
}else{
pos = [pos[0] + xVel*timeY,yLim];
angle = 360 - angle;
t += timeY;
}
}
}
pos


Finally, add A Fill effect with this expression for color:


colors = [[1,0,0,1],[0,1,0,1],[0,0,1,1],[1,1,0,1],[1,0,1,1],[0,1,1,1]];
bounces = -1;
left = 100;
top = 100;
right = thisComp.width -100;
bottom = thisComp.height -100;

pos = effect("pos")("Point");
quadrent = effect("quadrent")("Slider");
angle = effect("angle")("Slider");
spd = effect("spd")("Slider");

// initialize time count;

t = 0;

while(t <= time){
bounces++;
rads = degreesToRadians(angle);
xVel = spd*Math.cos(rads);
yVel = spd*Math.sin(rads);

// see if going up or down

if (yVel < 0) yLim = top else yLim = bottom;

// see if going right or left

if (xVel < 0) xLim = left else xLim = right;

timeX = (xLim - pos[0])/xVel;
timeY = (yLim - pos[1])/yVel;

if (timeX < timeY){ //hit left or right wall
if (t + timeX >= time){
deltaT = time - t;
pos += [xVel,yVel]*deltaT;
break;
}else{
pos = [xLim,pos[1] + yVel*timeX];
angle = 180 - angle;
t += timeX;
}
}else{ //hit upper or lower wall
if (t + timeY >= time){
deltaT = time - t;
pos += [xVel,yVel]*deltaT;
break;
}else{
pos = [pos[0] + xVel*timeY,yLim];
angle = 360 - angle;
t += timeY;
}
}
}
colors[bounces%colors.length]



Dan



Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]