Wave

├── README.md ├── LICENSE ├── index.html ├── js ├── libs │ ├── signals.min.js │ └── CMControl.min.js └── Wave.js └── css └── cmcontrol.css /README.md: -------------------------------------------------------------------------------- 1 | # wave 2 | Javascript Wave animation 3 | 4 | 5 | [![alt text](https://cmiscm.github.io/wave/screenshot/wave.jpg)](http://cmiscm.github.com/wave/) 6 | 7 | 8 | ### Example 9 | [http://cmiscm.github.com/wave/](http://cmiscm.github.com/wave/) 10 | 11 | 12 | ### Questions 13 | If you have any questions, please feel free to ask on [my blog](http://blog.cmiscm.com/?p=5452) 14 | 15 | 16 | ### License 17 | Copyright (c) 2017 Jongmin Kim (http://cmiscm.com) 18 | 19 | Licensed under the MIT license. 20 | 21 | - http://www.opensource.org/licenses/mit-license.php 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Jongmin Kim 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Wave 6 | 7 | 8 | 9 | 10 | 24 | 25 | 26 | 27 | 28 |

29 | 30 | 31 | 32 | 33 | 36 | 37 | -------------------------------------------------------------------------------- /js/libs/signals.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | JS Signals 3 | Released under the MIT license 4 | Author: Miller Medeiros 5 | Version: 1.0.0 - Build: 268 (2012/11/29 05:48 PM) 6 | */ 7 | (function(i){function h(a,b,c,d,e){this._listener=b;this._isOnce=c;this.context=d;this._signal=a;this._priority=e||0}function g(a,b){if(typeof a!=="function")throw Error("listener is a required param of {fn}() and should be a Function.".replace("{fn}",b));}function e(){this._bindings=[];this._prevParams=null;var a=this;this.dispatch=function(){e.prototype.dispatch.apply(a,arguments)}}h.prototype={active:!0,params:null,execute:function(a){var b;this.active&&this._listener&&(a=this.params?this.params.concat(a): 8 | a,b=this._listener.apply(this.context,a),this._isOnce&&this.detach());return b},detach:function(){return this.isBound()?this._signal.remove(this._listener,this.context):null},isBound:function(){return!!this._signal&&!!this._listener},isOnce:function(){return this._isOnce},getListener:function(){return this._listener},getSignal:function(){return this._signal},_destroy:function(){delete this._signal;delete this._listener;delete this.context},toString:function(){return"[SignalBinding isOnce:"+this._isOnce+ 9 | ", isBound:"+this.isBound()+", active:"+this.active+"]"}};e.prototype={VERSION:"1.0.0",memorize:!1,_shouldPropagate:!0,active:!0,_registerListener:function(a,b,c,d){var e=this._indexOfListener(a,c);if(e!==-1){if(a=this._bindings[e],a.isOnce()!==b)throw Error("You cannot add"+(b?"":"Once")+"() then add"+(!b?"":"Once")+"() the same listener without removing the relationship first.");}else a=new h(this,a,b,c,d),this._addBinding(a);this.memorize&&this._prevParams&&a.execute(this._prevParams);return a}, 10 | _addBinding:function(a){var b=this._bindings.length;do--b;while(this._bindings[b]&&a._priority<=this._bindings[b]._priority);this._bindings.splice(b+1,0,a)},_indexOfListener:function(a,b){for(var c=this._bindings.length,d;c--;)if(d=this._bindings[c],d._listener===a&&d.context===b)return c;return-1},has:function(a,b){return this._indexOfListener(a,b)!==-1},add:function(a,b,c){g(a,"add");return this._registerListener(a,!1,b,c)},addOnce:function(a,b,c){g(a,"addOnce");return this._registerListener(a, 11 | !0,b,c)},remove:function(a,b){g(a,"remove");var c=this._indexOfListener(a,b);c!==-1&&(this._bindings[c]._destroy(),this._bindings.splice(c,1));return a},removeAll:function(){for(var a=this._bindings.length;a--;)this._bindings[a]._destroy();this._bindings.length=0},getNumListeners:function(){return this._bindings.length},halt:function(){this._shouldPropagate=!1},dispatch:function(a){if(this.active){var b=Array.prototype.slice.call(arguments),c=this._bindings.length,d;if(this.memorize)this._prevParams= 12 | b;if(c){d=this._bindings.slice();this._shouldPropagate=!0;do c--;while(d[c]&&this._shouldPropagate&&d[c].execute(b)!==!1)}}},forget:function(){this._prevParams=null},dispose:function(){this.removeAll();delete this._bindings;delete this._prevParams},toString:function(){return"[Signal active:"+this.active+" numListeners:"+this.getNumListeners()+"]"}};var f=e;f.Signal=e;typeof define==="function"&&define.amd?define(function(){return f}):typeof module!=="undefined"&&module.exports?module.exports=f:i.signals= 13 | f})(this); -------------------------------------------------------------------------------- /css/cmcontrol.css: -------------------------------------------------------------------------------- 1 | .sidebar { 2 | position: absolute; 3 | left: 20px; 4 | top: 20px; 5 | width: 200px; 6 | background-color: rgba(0,0,0,0.8); 7 | overflow: auto; 8 | padding: 12px 15px; 9 | border-radius: 6px; 10 | overflow: hidden; 11 | } 12 | .sidebar .container { 13 | 14 | } 15 | .sidebar .detail { 16 | clear: both; 17 | } 18 | 19 | .title-bar { 20 | position: relative; 21 | width: 200px; 22 | cursor: move; 23 | } 24 | .title { 25 | position: relative; 26 | font-family: 'Helvetica', sans-serif; 27 | font-size: 12px; 28 | font-weight: 400; 29 | color: #fff; 30 | margin: 2px 0 1px 0; 31 | } 32 | .title-s { 33 | position: relative; 34 | font-family: 'Helvetica', sans-serif; 35 | font-size: 8px; 36 | font-weight: 400; 37 | color: rgba(255,255,255,0.5); 38 | } 39 | 40 | .my-over { 41 | background-color: #555; 42 | color: #aaa; 43 | cursor: pointer; 44 | } 45 | .my-over:hover { 46 | background-color: #fb2600; 47 | color: #fff; 48 | } 49 | .my-bt { 50 | background-color: #444; 51 | padding: 5px 0; 52 | width: 80px; 53 | text-align: center; 54 | font-family: 'Helvetica', sans-serif; 55 | font-size: 9px; 56 | font-weight: 400; 57 | position: relative; 58 | border-radius: 2px; 59 | display: inline-block; 60 | margin: 0 10px 0 0; 61 | } 62 | 63 | .label { 64 | height: 15px; 65 | position: relative; 66 | font-family: 'Helvetica', sans-serif; 67 | font-size: 10px; 68 | font-weight: 400; 69 | color: rgba(255,255,255,0.6); 70 | padding: 16px 0 0 0; 71 | } 72 | 73 | .link { 74 | cursor: pointer; 75 | height: 15px; 76 | position: relative; 77 | font-family: 'Helvetica', sans-serif; 78 | font-size: 10px; 79 | font-weight: 400; 80 | padding: 16px 0 0 0; 81 | } 82 | .link > a { 83 | color: rgba(255,255,255,0.4); 84 | text-decoration: none; 85 | } 86 | .link > a:hover { 87 | color: #fb2600; 88 | } 89 | 90 | .slide { 91 | background-color: #222; 92 | width: 200px; 93 | height: 6px; 94 | position: relative; 95 | margin: 2px 0 7px 0; 96 | } 97 | .slide .handle { 98 | width: 16px; 99 | height:10px; 100 | position: absolute; 101 | left: 0; 102 | top: -2px; 103 | cursor: col-resize; 104 | border-radius: 2px; 105 | } 106 | 107 | 108 | 109 | .label-gap { 110 | padding-bottom: 10px; 111 | } 112 | 113 | .label-s { 114 | position: relative; 115 | clear: both; 116 | } 117 | 118 | .label-s-txt { 119 | width: 45px; 120 | position: relative; 121 | float: left; 122 | font-family: 'Helvetica', sans-serif; 123 | font-size: 9px; 124 | font-weight: 400; 125 | color: #555; 126 | height: 100%; 127 | margin-top: 2px; 128 | } 129 | 130 | .label-s-num { 131 | width: 45px; 132 | position: relative; 133 | font-family: 'Helvetica', sans-serif; 134 | font-size: 10px; 135 | font-weight: 400; 136 | margin-bottom: 6px; 137 | color: #888; 138 | } 139 | .name-input { 140 | width: 100px; 141 | height: 18px; 142 | font-family: 'Helvetica', sans-serif; 143 | font-size: 10px; 144 | font-weight: 400; 145 | color: #777; 146 | position: relative; 147 | display: block; 148 | float: left; 149 | margin: -4px 0 10px 0; 150 | padding: 0 0 0 5px; 151 | border: 1px #454545 solid; 152 | background: #1c1c1c; 153 | } 154 | 155 | 156 | 157 | 158 | .check { 159 | display: inline-block; 160 | position: relative; 161 | } 162 | .check .check-box { 163 | display: inline-block; 164 | margin-right: 4px; 165 | vertical-align: middle; 166 | } 167 | .check .check-text { 168 | font-family: 'Helvetica', sans-serif; 169 | font-size: 10px; 170 | font-weight: 400; 171 | color: rgba(255,255,255,0.4); 172 | display: inline-block; 173 | vertical-align: middle; 174 | margin: 0 12px 0 0; 175 | } 176 | .check-title-s { 177 | margin-top: 1px; 178 | } 179 | 180 | -------------------------------------------------------------------------------- /js/Wave.js: -------------------------------------------------------------------------------- 1 | var Wave = Wave || ( function () { 2 | 3 | var $canvas, _ctx, 4 | _stageWidth, _stageHeight, _stageWidthHalf, _stageHeightHalf, 5 | _maxWidth, _widthGap, 6 | _isDown = 0, _mouseX = 0, _mouseY = 0, 7 | _points = [], _isShowPoint = 0, 8 | _isColor = 0, 9 | 10 | FRICTION = 0.96, 11 | TOTAL_WAVE = 3, 12 | TOTAL_POINTS = 8, 13 | COLORS = [ 14 | [ 15 | {h:189, s:100, l:46}, 16 | {h:196, s:100, l:39}, 17 | {h:207, s:100, l:31} 18 | ], 19 | [ 20 | {h:0, s:100, l:50}, 21 | {h:60, s:100, l:50}, 22 | {h:180, s:100, l:50} 23 | ]], 24 | SPRING = [ 25 | .04, 26 | .06, 27 | .03 28 | ], 29 | _raf; 30 | 31 | function init() { 32 | $canvas = document.getElementsByTagName('canvas')[0]; 33 | 34 | window.addEventListener('resize', onResize, true); 35 | onResize(); 36 | 37 | start(); 38 | } 39 | 40 | function onResize() { 41 | _stageWidth = window.innerWidth; 42 | _stageHeight = window.innerHeight; 43 | 44 | _stageWidthHalf = _stageWidth >> 1; 45 | _stageHeightHalf = _stageHeight >> 1; 46 | 47 | _widthGap = _stageWidth / TOTAL_POINTS >> 1; 48 | _maxWidth = _stageWidth + (_widthGap * 2); 49 | 50 | $canvas.width = _stageWidth; 51 | $canvas.height = _stageHeight; 52 | _ctx = $canvas.getContext('2d'); 53 | 54 | build(); 55 | } 56 | 57 | function build() { 58 | var i, k, point; 59 | for (i=0; iBLOG.CMISCM.COM'); 199 | item.setClass('link'); 200 | labelCon.add(item); 201 | 202 | signalOpt.moveControl.add(function(object) { 203 | var tx = object.x; 204 | slidePoints.setGap(tx); 205 | }); 206 | 207 | document.body.appendChild(container.dom); 208 | } 209 | 210 | function animate(timestamp) { 211 | _raf = window.requestAnimationFrame(animate); 212 | loop(); 213 | } 214 | 215 | function loop() { 216 | _ctx.clearRect(0, 0, _stageWidth, _stageHeight); 217 | 218 | var i, arr = [0, 5, -5]; 219 | for (i=0; ie&&(f=e):f>d?f=d:f0;)this.dom.removeChild(this.dom.firstChild);for(var b in a){var c=document.createElement("option");c.value=b,c.innerHTML=a[b],this.dom.appendChild(c)}return this},CMControl.Select.prototype.getValue=function(){return this.dom.value},CMControl.Select.prototype.setValue=function(a){return this.dom.value=a,this},CMControl.Select.prototype.onChange=function(a){return this.onChangeCallback=a,this},CMControl.FancySelect=function(){CMControl.Element.call(this);var b=document.createElement("div");return b.className="FancySelect",b.style.background="#fff",b.style.border="1px solid #ccc",b.style.padding="0",b.style.cursor="default",b.style.overflow="auto",this.dom=b,this.onChangeCallback=null,this.options=[],this.selectedValue=null,this},CMControl.FancySelect.prototype=Object.create(CMControl.Element.prototype),CMControl.FancySelect.prototype.setOptions=function(a){for(var b=this;b.dom.children.length>0;)b.dom.removeChild(b.dom.firstChild);b.options=[];var c=function(a,c){return function(d){for(var e=0;e2&&(this.step=Math.pow(10,-(a-1))),this},CMControl.Number.prototype.onChange=function(a){return this.onChangeCallback=a,this},CMControl.Break=function(){CMControl.Element.call(this);var a=document.createElement("br");return a.className="Break",this.dom=a,this},CMControl.Break.prototype=Object.create(CMControl.Element.prototype),CMControl.HorizontalRule=function(){CMControl.Element.call(this);var a=document.createElement("hr");return a.className="HorizontalRule",this.dom=a,this},CMControl.HorizontalRule.prototype=Object.create(CMControl.Element.prototype),CMControl.Button=function(){CMControl.Element.call(this);var a=this,b=document.createElement("button");return b.className="Button",this.dom=b,this.onClickCallback=null,this.dom.addEventListener("click",function(b){a.onClickCallback()},!1),this},CMControl.Button.prototype=Object.create(CMControl.Element.prototype),CMControl.Button.prototype.setLabel=function(a){return this.dom.textContent=a,this},CMControl.Button.prototype.onClick=function(a){return this.onClickCallback=a,this},CMControl.Slide=function(a){CMControl.Element.call(this);var b=document.createElement("div");b.className="slide",b.style.userSelect="none",b.style.WebkitUserSelect="none",b.style.MozUserSelect="none",this.dom=b;var c=document.createElement("div");c.className="handle my-over",b.appendChild(c);var e,f,d=this,g=0,h=a,i=this;this.max=0,this.handle=c,this.gap=40,setTimeout(function(){g=c.offsetWidth,i.max=b.offsetWidth-g;var a=0|CMControl.getCurrent(h,0,1,0,i.max);c.style.left=a+"px",c.style.display="none",setTimeout(function(){c.style.display="block"},0)},0);var j=function(a){a.preventDefault(),e=0,f=parseFloat(b.value),document.addEventListener("touchmove",n,!1),document.addEventListener("touchend",o,!1)},k=function(a){a.preventDefault(),e=0,f=parseFloat(b.value),document.addEventListener("mousemove",l,!1),document.addEventListener("mouseup",m,!1)},l=function(a){p(a.pageX,a.pageY)},m=function(a){document.removeEventListener("mousemove",l,!1),document.removeEventListener("mouseup",m,!1)},n=function(a){var b=a.touches[0];p(b.pageX,b.pageY)},o=function(a){document.removeEventListener("touchmove",n,!1),document.removeEventListener("touchend",o,!1)},p=function(a,b){var e=a-i.gap;e<0?e=0:e>i.max&&(e=i.max),c.style.left=e+"px";var f=CMControl.getCurrent(e,0,i.max,0,1);d.onChangeCallback&&d.onChangeCallback(f)};return c.addEventListener("mousedown",k,!1),CMControl.isTouch&&c.addEventListener("touchstart",j,!1),this},CMControl.Slide.prototype=Object.create(CMControl.Element.prototype),CMControl.Slide.prototype.onChange=function(a){return this.onChangeCallback=a,this},CMControl.Slide.prototype.setGap=function(a){this.gap=a+20},CMControl.Slide.prototype.setHandlePos=function(a){var b=CMControl.getCurrent(a,0,1,0,this.max);this.handle.style.left=b+"px"}; --------------------------------------------------------------------------------