0

I'm pretty new to JavaScript, I'm trying to recreate this code here:

The Effect: http://www.clicktorelease.com/code/css3dclouds/

Tutorial: http://www.clicktorelease.com/tutorials/css3dclouds/#creating_a_world_and_a_camera

Uncaught SyntaxError: Unexpected identifier

For some reason something is wrong on my line 25, and I'm not sure what it is:

    /*
        Clears the DOM of previous clouds bases 
        and generates a new set of cloud bases
    */
    function generate() {
        objects = [];
        layers = [];
        if ( world.hasChildNodes() ) {
            while ( world.childNodes.length >= 1 ) {
                world.removeChild( world.firstChild );       
            }
        }
        for( var j = 0; j <; 5; j++ ) {
            objects.push( createCloud() );
        }
    }

Full JavaScript:

(function() {

window.onload = function() {


    /*
        objects is an array of cloud bases
        layers is an array of cloud layers
    */
    var objects = [],
        layers = [];

    /*
        Clears the DOM of previous clouds bases 
        and generates a new set of cloud bases
    */
    function generate() {
        objects = [];
        layers = [];
        if ( world.hasChildNodes() ) {
            while ( world.childNodes.length >= 1 ) {
                world.removeChild( world.firstChild );       
            }
        }
        for( var j = 0; j <; 5; j++ ) {
            objects.push( createCloud() );
        }
    }

    /*
        Creates a single cloud base and adds several cloud layers.
        Each cloud layer has random position ( x, y, z ), rotation (a)
        and rotation speed (s). layers[] keeps track of those divs.
    */
    function createCloud() {

        var div = document.createElement( 'div'  );
        div.className = 'cloudBase';
        var t = 'translateX( ' + random_x + 'px ) \
            translateY( ' + random_y + 'px ) \
            translateZ( ' + random_z + 'px )';
        div.style.transform = t;
        world.appendChild( div );

        for( var j = 0; j < 5 + Math.round( Math.random() * 10 ); j++ ) {
            var cloud = document.createElement( 'div' );
            cloud.className = 'cloudLayer';

            cloud.data = { 
                x: random_x,
                y: random_y,
                z: random_z,
                a: random_a,
                s: random_s
            };
            var t = 'translateX( ' + random_x + 'px ) \
                translateY( ' + random_y + 'px ) \
                translateZ( ' + random_z + 'px ) \
                rotateZ( ' + random_a + 'deg ) \
                scale( ' + random_s + ' )';
            cloud.style.transform = t;

            div.appendChild( cloud );
            layers.push( cloud );
        }

        return div;
    }

    /*
        Iterate layers[], update the rotation and apply the
        inverse transformation currently applied to the world.
        Notice the order in which rotations are applied.
    */
    function update (){

        for( var j = 0; j < layers.length; j++ ) {
            var layer = layers[ j ];
            layer.data.a += layer.data.speed;
            var t = 'translateX( ' + layer.data.x + 'px ) \
                translateY( ' + layer.data.y + 'px ) \
                translateZ( ' + layer.data.z + 'px ) \
                rotateY( ' + ( - worldYAngle ) + 'deg ) \
                rotateX( ' + ( - worldXAngle ) + 'deg ) \
                scale( ' + layer.data.s + ')';
            layer.style.transform = t;
        }

        requestAnimationFrame( update );

    }


}; //-window.onload

}());

1 Answer 1

5

You're missing a value in your loop (i.e. you have an extra ;):

for (var j = 0; j < ; 5; j++)

Probably should be

for (var j = 0; j < 5; j++)
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.