bubbles.jsx

'use strict';

var INTERVAL = 50;
class Bubble {
    constructor() {
        this.x = parseInt(window.innerWidth * Math.random(), 10);
        this.y = parseInt(window.innerHeight * Math.random(), 10);
        this.xDir = Math.random() > 0.5 ? 1 : -1;
        this.yDir = Math.random() > 0.5 ? 1 : -1;
        this.size = parseInt(Math.random() * 100) + 40;
        this.speed = parseInt(350 / this.size, 10);
        this.color = this.getColor();
        // console.log(this.color);
    }
    getColor() {
        var red = parseInt(Math.random() * 256, 10),
            green = parseInt(Math.random() * 256, 10),
            blue = parseInt(Math.random() * 256, 10);

        return (red * 0x10000 + green * 0x100 + blue).toString(16);
    }
    test(a, ...b) {
        console.log(a);
        console.log(b);
        console.log(`foo ${this.color} bar \n`);
    }
}

for (val of values) {
    console.log(val);
}

var App = React.createClass({

    getInitialState() {
        var bubbles = [];
        for (let i = 0; i < 500; i++) {
            bubbles.push(new Bubble());
        }
        return {bubbles: bubbles};
    },

    componentDidMount() {
       this.interval = setInterval(this.tick, INTERVAL);
    },

    componentWillUnmount() {
        clearInterval(this.interval);
    },

    tick() {
        var self = this;
            this.state.bubbles.map(function(model) {
                self.move(model);
            });
        this.setState({bubbles: this.state.bubbles});
    },

    move(model) {
        var x = model.speed * model.xDir,
            y = model.speed * model.yDir,
            target = {
                x: model.x + x,
                y: model.y + y
            },
            size = model.size;
        if (target.x <= 0) { target.x = 0; model.xDir = 1; }
        if (target.y <= 0) { target.y = 0; model.yDir = 1; }
        if (target.x + size >= window.innerWidth) { target.x = window.innerWidth - size; model.xDir = -1; }
        if (target.y + size >= window.innerHeight) { target.y = window.innerHeight - size; model.yDir = -1; }
        model.x = target.x;
        model.y = target.y;
    },

    render() {
        var bubbles = this.state.bubbles.map(function(model) {
            var style = {
                top: model.y,
                left: model.x,
                height: model.size,
                width: model.size,
                backgroundColor: model.color
            };
            return <div className="bubble" style={style} />;
        });

        return <div>{bubbles}</div>;
    }
});

React.render(<App model={Bubble} />, document.body);

React and ES6 required to run this.