Examples Flash Animation using swishmax Effet moiré

Moiré effect

The goal is to show (using only a script) how to achieve a moiré effect.

Principle

First we create a group of fixed concentric circles.
Then we create the same group, in another place. It'll be translated to entirely cover the fixed goup.
Thus a moiré effect 'll appear. We 'll use a timer.
The different stages are gonna described right now.

Creating Objects

Set up general sizes 440x220. Background color : FFFFFF.
Frame rate = 200.
Create 4 black lines as outline of the scene.

Script

Enter the following script :

// circle point coordinates
function x (t) 
{     
    xpos = xcen + r * Math.cos(t);
    return ( xpos );    
    
}
function y (t) 
{     
    ypos = H / 2 - r * Math.sin(t)
    return ( ypos );  
}
// drawing a circle
function drawCircle( xd , yd )
{
    lineStyle(1 , 0x000000, 100);
    // first point
    moveTo( xd, yd );
    for (i=1; i < n+1; i++)     lineTo(x(i*dt) , y(i*dt));    
}
// drawing function of fixed circles (the biggest first)
function drawFixedCircles( )
{
    while ( r > 0 )
    {
        drawCircle( x(0) , y(0) );
        r = r - 4;
    } 
}
// drawing function of mobile circles
function drawMovedCircles( )
{
    j = 0; // init
   // drawing the widest circle then reduce r
    while ( r > 0 )
    {
        j++;
        mc[j] = createEmptyMovieClip("circ"+j, j);   
        with (mc[j])   
        {   //  drawing a circle
            lineStyle(1 , 0x000000, 100);
            // first point
            moveTo(  x(0) , y(0) );
            for (i=1; i < n+1; i++)     lineTo(x(i*dt) , y(i*dt));  
        }
        r = r - 4;       // r reduced by 4px
    } 
    return j;   // return amount of circles created
}
//   erasing a group of circles previously drawn
function erase( dernier )
{
    for (i = 1; i < dernier+1 ; i++)         mc[i].clear();  
}

onSelfEvent (load) 
{
    // height width of scene
    H = int(_root._height);
    W = int(_root._width);   
     // number of points to draw a circle
    n = 500;  
    // angular increment
    dt = 2 * Math.PI / n;
    // drawing fixed circles
    var r = 100;// rayon initial
    var xcen = 3 * W / 4;  //  init x center
    drawFixedCircles();
    
    // drawing mobile circles in init position
    mc = new Array();
    r = 100;            //  init r
    xcen = W / 4;   // init x center
    last = drawMovedCircles();  
}

// function called by timer to erase, then draw mobile circles
function new_position()
{
    xcen += 2;   // move x center towards right (2px)
    if (last) erase(last); // If mobiles circles have been drawn then erase them
    // we don't need to move further the center of fixed circles,
    //   so stop calling recursive function
    if (xcen >(3*W/4)) clearInterval( timer );
   // draw new group of moving circles
    r = 100;
    last = drawMovedCircles();      
}

onFrame (1) 
{      // define  call to function new_position every 5ms
            var timer = setInterval( new_position, 5 ); 
            new_position();     
}

Save and export naming the file moire. Enjoy !

Page de Jean-Paul Molina

Subjects

Resources

C.A.D.

Langages

Flash

Systems

Social Networks

Moiré effect