Make Wave

by greentec 25 Dec 2015

• Related works: 1

Talk

Glidias at 14 Dec 2015 07:31
i saw this on a facebook post before. My first thought was, "So, that is how the fragment shader for (old-school-Quake-distortion) water wave effect works". Just sample offseted UV by cos/sin over constant time input over a 2PI cycle multiplied by a constant scale input that determines the amount of distortion. At least, circular waves usually work fine for small bodies of water.

Tags

circular movement
Embed

/**
 * Copyright greentec ( http://wonderfl.net/user/greentec )
 * MIT License ( http://www.opensource.org/licenses/mit-license.php )
 * Downloaded from: http://wonderfl.net/c/cxLf
 */

package {
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.KeyboardEvent;
    
    public class FlashTest extends Sprite {
        public var _width:int = 465;
        public var _height:int = 465;
        
        public var numCircleWidth:int = 18;
        public var numCircleHeight:int = 18;
        
        public var circleArray:Array;
        
        public var switch1:Boolean = true;
        

        public function FlashTest() {
            // write as3 code here..
            stage.scaleMode = "noScale";
            
            var shape:Shape;
            shape = new Shape();
            shape.graphics.beginFill(0x69D2E7);
            shape.graphics.drawRect(0, 0, _width, _height);
            shape.graphics.endFill();
            addChild(shape);
            
            var i:int;
            var j:int;
            var circle:Circle;
            var xWidth:int = _width / (numCircleWidth - 2);
            var yHeight:int = _height / (numCircleHeight - 2);
            
            circleArray = [];
            
            for (i = -1; i < numCircleHeight; i += 1)
            {
                for (j = -1; j < numCircleWidth; j += 1)
                {
                    circle = new Circle(xWidth * 5 / 4, yHeight * 5 / 4, Math.sin((i + j) * 180 / Math.PI) * 7);
                    circle.x = j * xWidth + xWidth / 2;
                    circle.y = i * yHeight + yHeight / 2;
                    addChild(circle);
                    circleArray.push(circle);
                }
            }
            
            addEventListener(Event.ENTER_FRAME, onLoop);
            stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
            
        }
        
        private function onLoop(e:Event):void
        {
            var i:int;
            var circle:Circle;
            var len:int;
            len = circleArray.length;
            
            for (i = 0; i < len; i += 1)
            {
                circle = circleArray[i];
                circle.move();
            }
        }
        
        public function onKeyDown(e:KeyboardEvent):void
        {
            switch1 = !switch1;
            
            var i:int;
            var circle:Circle;
            var len:int;
            len = circleArray.length;
            
            for (i = 0; i < len; i += 1)
            {
                circle = circleArray[i];
                circle.baseCircle.visible = switch1;
            }
        }
    }
}

Class 
{
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.events.Event;
    /**
     * ...
     * @author ypc
     */
    class Circle extends Sprite
    {
        public var baseCircle:Shape;
        public var mover:Shape;
        public var time:int;
        public var radius:int;
        public var color:uint = 0xffffff;
        
        public function Circle(w:int, h:int, time:int = 0) 
        {
            this.radius = w / 2;
            this.time = time;
            
            baseCircle = new Shape();
            baseCircle.graphics.lineStyle(0, color, 1);
            baseCircle.graphics.drawCircle(0, 0, w / 2);
            addChild(baseCircle);
            
            mover = new Shape();
            mover.graphics.lineStyle(0, color, 1);
            mover.graphics.beginFill(color);
            mover.graphics.drawCircle(0, 0, w / 8);
            mover.x = Math.cos(time * 6 * Math.PI / 180) * radius;
            mover.y = Math.sin(time * 6 * Math.PI / 180) * radius;
            addChild(mover);
            
            
        }
        
        public function move():void
        {
            time += 1;
            time %= 60;
            
            mover.x = Math.cos(time * 6 * Math.PI / 180) * radius;
            mover.y = Math.sin(time * 6 * Math.PI / 180) * radius;
            
        }        
    }

}