forked from isuttell/sine-waves
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'gh-pages' of https://github.com/isuttell/sine-waves
- Loading branch information
Showing
5 changed files
with
452 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="chrome=1"> | ||
| <title>SineWaves by isuttell</title> | ||
|
|
||
| <link rel="stylesheet" href="stylesheets/styles.css"> | ||
| <link rel="stylesheet" href="stylesheets/pygment_trac.css"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> | ||
| <!--[if lt IE 9]> | ||
| <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> | ||
| <![endif]--> | ||
| </head> | ||
| <body> | ||
| <div class="wrapper"> | ||
| <header> | ||
| <h1>SineWaves</h1> | ||
| <p>Generate multiple configurable sine waves</p> | ||
|
|
||
| <p class="view"><a href="https://github.com/isuttell/sine-waves">View the Project on GitHub <small>isuttell/sine-waves</small></a></p> | ||
|
|
||
|
|
||
| <ul> | ||
| <li><a href="https://github.com/isuttell/sine-waves/zipball/master">Download <strong>ZIP File</strong></a></li> | ||
| <li><a href="https://github.com/isuttell/sine-waves/tarball/master">Download <strong>TAR Ball</strong></a></li> | ||
| <li><a href="https://github.com/isuttell/sine-waves">View On <strong>GitHub</strong></a></li> | ||
| </ul> | ||
| </header> | ||
| <section> | ||
| <h1> | ||
| <a id="sine-wavesjs" class="anchor" href="#sine-wavesjs" aria-hidden="true"><span class="octicon octicon-link"></span></a>sine-waves.js</h1> | ||
|
|
||
| <p>Generator multiple configurable sine waves</p> | ||
|
|
||
| <p><a href="https://travis-ci.org/isuttell/sine-waves"><img src="http://img.shields.io/travis/isuttell/sine-waves.svg?style=flat" alt="Build Status"></a> | ||
| <a href="https://coveralls.io/r/isuttell/sine-waves"><img src="https://img.shields.io/coveralls/isuttell/sine-waves.svg?style=flat" alt="Coverage Status"></a> | ||
| <a href="https://www.codacy.com/public/isuttell/sine-waves"><img src="https://www.codacy.com/project/badge/a52fd69032474c0ca88dc06ab69a9839" alt="Codacy Badge"></a> | ||
| <a href="https://david-dm.org/isuttell/sine-waves#info=devDependencies"><img src="http://img.shields.io/david/dev/isuttell/sine-waves.svg?style=flat" alt="Dev Dependencies"></a> | ||
| <a href="https://github.com/isuttell/sine-waves/tarball/master"><img src="http://img.shields.io/github/release/isuttell/sine-waves.svg?style=flat" alt="Release"></a></p> | ||
|
|
||
| <h2> | ||
| <a id="basic-usage" class="anchor" href="#basic-usage" aria-hidden="true"><span class="octicon octicon-link"></span></a>Basic Usage</h2> | ||
|
|
||
| <div class="highlight highlight-js"><pre><span class="pl-s">var</span> waves <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">SineWaves</span>({ | ||
| el<span class="pl-k">:</span> <span class="pl-s3">document</span>.<span class="pl-s3">getElementById</span>(<span class="pl-s1"><span class="pl-pds">'</span>waves<span class="pl-pds">'</span></span>), | ||
|
|
||
| speed<span class="pl-k">:</span> <span class="pl-c1">8</span>, | ||
|
|
||
| waves<span class="pl-k">:</span> [ | ||
| { | ||
| timeModifier<span class="pl-k">:</span> <span class="pl-c1">1</span>, | ||
| lineWidth<span class="pl-k">:</span> <span class="pl-c1">3</span>, | ||
| amplitude<span class="pl-k">:</span> <span class="pl-c1">150</span>, | ||
| wavelength<span class="pl-k">:</span> <span class="pl-c1">200</span>, | ||
| segmentLength<span class="pl-k">:</span> <span class="pl-c1">20</span>, | ||
| strokeStyle<span class="pl-k">:</span> <span class="pl-s1"><span class="pl-pds">'</span>rgba(255, 255, 255, 0.5)<span class="pl-pds">'</span></span> | ||
| }, | ||
| { | ||
| timeModifier<span class="pl-k">:</span> <span class="pl-c1">1</span>, | ||
| lineWidth<span class="pl-k">:</span> <span class="pl-c1">2</span>, | ||
| amplitude<span class="pl-k">:</span> <span class="pl-c1">150</span>, | ||
| wavelength<span class="pl-k">:</span> <span class="pl-c1">100</span>, | ||
| strokeStyle<span class="pl-k">:</span> <span class="pl-s1"><span class="pl-pds">'</span>rgba(255, 255, 255, 0.3)<span class="pl-pds">'</span></span> | ||
| } | ||
| ], | ||
|
|
||
| <span class="pl-c">// Perform any additional initializations here</span> | ||
| <span class="pl-en">initialize</span>: <span class="pl-st">function</span> (){ | ||
|
|
||
| }, | ||
|
|
||
| <span class="pl-c">// This function is called whenver the window is resized</span> | ||
| <span class="pl-en">resizeEvent</span>: <span class="pl-st">function</span>() { | ||
|
|
||
| <span class="pl-c">// Here is an example on how to create a gradient stroke</span> | ||
| <span class="pl-s">var</span> gradient <span class="pl-k">=</span> <span class="pl-v">this</span>.ctx.createLinearGradient(<span class="pl-c1">0</span>, <span class="pl-c1">0</span>, <span class="pl-v">this</span>.<span class="pl-sc">width</span>, <span class="pl-c1">0</span>); | ||
| gradient.addColorStop(<span class="pl-c1">0</span>,<span class="pl-s1"><span class="pl-pds">"</span>rgba(0, 0, 0, 0)<span class="pl-pds">"</span></span>); | ||
| gradient.addColorStop(<span class="pl-c1">0.5</span>,<span class="pl-s1"><span class="pl-pds">"</span>rgba(255, 255, 255, 0.5)<span class="pl-pds">"</span></span>); | ||
| gradient.addColorStop(<span class="pl-c1">1</span>,<span class="pl-s1"><span class="pl-pds">"</span>rgba(0, 0, 0, 0)<span class="pl-pds">"</span></span>); | ||
|
|
||
| <span class="pl-s">var</span> index <span class="pl-k">=</span> <span class="pl-k">-</span><span class="pl-c1">1</span>; | ||
| <span class="pl-s">var</span> length <span class="pl-k">=</span> <span class="pl-v">this</span>.waves.<span class="pl-sc">length</span>; | ||
| <span class="pl-k">while</span>(<span class="pl-k">++</span>index <span class="pl-k"><</span> length){ | ||
| <span class="pl-v">this</span>.waves[index].strokeStyle <span class="pl-k">=</span> gradient; | ||
| } | ||
| } | ||
| });</pre></div> | ||
|
|
||
| <h2> | ||
| <a id="license" class="anchor" href="#license" aria-hidden="true"><span class="octicon octicon-link"></span></a>License</h2> | ||
|
|
||
| <p>SineWaves is open-sourced software licensed under the MIT license</p> | ||
|
|
||
| <h2> | ||
| <a id="release-histort" class="anchor" href="#release-histort" aria-hidden="true"><span class="octicon octicon-link"></span></a>Release Histort</h2> | ||
|
|
||
| <ul> | ||
| <li>v0.1.0 - Initial Release</li> | ||
| </ul> | ||
| </section> | ||
| <footer> | ||
| <p>This project is maintained by <a href="https://github.com/isuttell">isuttell</a></p> | ||
| <p><small>Hosted on GitHub Pages — Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p> | ||
| </footer> | ||
| </div> | ||
| <script src="javascripts/scale.fix.js"></script> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| var metas = document.getElementsByTagName('meta'); | ||
| var i; | ||
| if (navigator.userAgent.match(/iPhone/i)) { | ||
| for (i=0; i<metas.length; i++) { | ||
| if (metas[i].name == "viewport") { | ||
| metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0"; | ||
| } | ||
| } | ||
| document.addEventListener("gesturestart", gestureStart, false); | ||
| } | ||
| function gestureStart() { | ||
| for (i=0; i<metas.length; i++) { | ||
| if (metas[i].name == "viewport") { | ||
| metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6"; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| {"name":"SineWaves","tagline":"Generate multiple configurable sine waves","body":"# sine-waves.js\r\n\r\nGenerator multiple configurable sine waves\r\n\r\n[](https://travis-ci.org/isuttell/sine-waves)\r\n[](https://coveralls.io/r/isuttell/sine-waves)\r\n[](https://www.codacy.com/public/isuttell/sine-waves)\r\n[](https://david-dm.org/isuttell/sine-waves#info=devDependencies)\r\n[](https://github.com/isuttell/sine-waves/tarball/master)\r\n\r\n## Basic Usage\r\n```js\r\nvar waves = new SineWaves({\r\n el: document.getElementById('waves'),\r\n\r\n speed: 8,\r\n\r\n waves: [\r\n {\r\n timeModifier: 1,\r\n lineWidth: 3,\r\n amplitude: 150,\r\n wavelength: 200,\r\n segmentLength: 20,\r\n strokeStyle: 'rgba(255, 255, 255, 0.5)'\r\n },\r\n {\r\n timeModifier: 1,\r\n lineWidth: 2,\r\n amplitude: 150,\r\n wavelength: 100,\r\n strokeStyle: 'rgba(255, 255, 255, 0.3)'\r\n }\r\n ],\r\n\r\n // Perform any additional initializations here\r\n initialize: function (){\r\n\r\n },\r\n\r\n // This function is called whenver the window is resized\r\n resizeEvent: function() {\r\n\r\n // Here is an example on how to create a gradient stroke\r\n var gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);\r\n gradient.addColorStop(0,\"rgba(0, 0, 0, 0)\");\r\n gradient.addColorStop(0.5,\"rgba(255, 255, 255, 0.5)\");\r\n gradient.addColorStop(1,\"rgba(0, 0, 0, 0)\");\r\n\r\n var index = -1;\r\n var length = this.waves.length;\r\n while(++index < length){\r\n this.waves[index].strokeStyle = gradient;\r\n }\r\n }\r\n});\r\n```\r\n\r\n## License\r\nSineWaves is open-sourced software licensed under the MIT license\r\n\r\n## Release Histort\r\n- v0.1.0 - Initial Release\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| .highlight { background: #ffffff; } | ||
| .highlight .c { color: #999988; font-style: italic } /* Comment */ | ||
| .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ | ||
| .highlight .k { font-weight: bold } /* Keyword */ | ||
| .highlight .o { font-weight: bold } /* Operator */ | ||
| .highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ | ||
| .highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ | ||
| .highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ | ||
| .highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ | ||
| .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ | ||
| .highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ | ||
| .highlight .ge { font-style: italic } /* Generic.Emph */ | ||
| .highlight .gr { color: #aa0000 } /* Generic.Error */ | ||
| .highlight .gh { color: #999999 } /* Generic.Heading */ | ||
| .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ | ||
| .highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ | ||
| .highlight .go { color: #888888 } /* Generic.Output */ | ||
| .highlight .gp { color: #555555 } /* Generic.Prompt */ | ||
| .highlight .gs { font-weight: bold } /* Generic.Strong */ | ||
| .highlight .gu { color: #800080; font-weight: bold; } /* Generic.Subheading */ | ||
| .highlight .gt { color: #aa0000 } /* Generic.Traceback */ | ||
| .highlight .kc { font-weight: bold } /* Keyword.Constant */ | ||
| .highlight .kd { font-weight: bold } /* Keyword.Declaration */ | ||
| .highlight .kn { font-weight: bold } /* Keyword.Namespace */ | ||
| .highlight .kp { font-weight: bold } /* Keyword.Pseudo */ | ||
| .highlight .kr { font-weight: bold } /* Keyword.Reserved */ | ||
| .highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ | ||
| .highlight .m { color: #009999 } /* Literal.Number */ | ||
| .highlight .s { color: #d14 } /* Literal.String */ | ||
| .highlight .na { color: #008080 } /* Name.Attribute */ | ||
| .highlight .nb { color: #0086B3 } /* Name.Builtin */ | ||
| .highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ | ||
| .highlight .no { color: #008080 } /* Name.Constant */ | ||
| .highlight .ni { color: #800080 } /* Name.Entity */ | ||
| .highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ | ||
| .highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ | ||
| .highlight .nn { color: #555555 } /* Name.Namespace */ | ||
| .highlight .nt { color: #000080 } /* Name.Tag */ | ||
| .highlight .nv { color: #008080 } /* Name.Variable */ | ||
| .highlight .ow { font-weight: bold } /* Operator.Word */ | ||
| .highlight .w { color: #bbbbbb } /* Text.Whitespace */ | ||
| .highlight .mf { color: #009999 } /* Literal.Number.Float */ | ||
| .highlight .mh { color: #009999 } /* Literal.Number.Hex */ | ||
| .highlight .mi { color: #009999 } /* Literal.Number.Integer */ | ||
| .highlight .mo { color: #009999 } /* Literal.Number.Oct */ | ||
| .highlight .sb { color: #d14 } /* Literal.String.Backtick */ | ||
| .highlight .sc { color: #d14 } /* Literal.String.Char */ | ||
| .highlight .sd { color: #d14 } /* Literal.String.Doc */ | ||
| .highlight .s2 { color: #d14 } /* Literal.String.Double */ | ||
| .highlight .se { color: #d14 } /* Literal.String.Escape */ | ||
| .highlight .sh { color: #d14 } /* Literal.String.Heredoc */ | ||
| .highlight .si { color: #d14 } /* Literal.String.Interpol */ | ||
| .highlight .sx { color: #d14 } /* Literal.String.Other */ | ||
| .highlight .sr { color: #009926 } /* Literal.String.Regex */ | ||
| .highlight .s1 { color: #d14 } /* Literal.String.Single */ | ||
| .highlight .ss { color: #990073 } /* Literal.String.Symbol */ | ||
| .highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ | ||
| .highlight .vc { color: #008080 } /* Name.Variable.Class */ | ||
| .highlight .vg { color: #008080 } /* Name.Variable.Global */ | ||
| .highlight .vi { color: #008080 } /* Name.Variable.Instance */ | ||
| .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ | ||
|
|
||
| .type-csharp .highlight .k { color: #0000FF } | ||
| .type-csharp .highlight .kt { color: #0000FF } | ||
| .type-csharp .highlight .nf { color: #000000; font-weight: normal } | ||
| .type-csharp .highlight .nc { color: #2B91AF } | ||
| .type-csharp .highlight .nn { color: #000000 } | ||
| .type-csharp .highlight .s { color: #A31515 } | ||
| .type-csharp .highlight .sc { color: #A31515 } |
Oops, something went wrong.