Skip to content

Commit

Permalink
Added rotation ability
Browse files Browse the repository at this point in the history
  • Loading branch information
Isaac Suttell committed Dec 1, 2014
1 parent 63a0130 commit 02a14fd
Showing 4 changed files with 182 additions and 3 deletions.
119 changes: 119 additions & 0 deletions examples/rotate.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>SineWaves</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>
@import url(http://fonts.googleapis.com/css?family=Raleway:100,300);
body {
background-color: #222;
background-image: -moz-linear-gradient(top, #111111 0%, #222222 50%, #111111 100%);
background-image: -webkit-linear-gradient(top, #111111 0%, #222222 50%, #111111 100%);
background-image: linear-gradient(to bottom, #111111 0%, #222222 50%, #111111 100%);
font-family: 'Raleway', sans-serif;
font-weight: 100;
color: rgba(255, 255, 255, 0.5);
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
}

#waves {
width: 100%;
height: 100%;
}

#title {
position: fixed;
top: 10px;
left: 10px;
font-size: 20px;
letter-spacing: 0.1em;
z-index: 100;
margin: 0;
padding: 0;
}

</style>
</head>
<body>
<h1 id="title">SineWaves</h1>
<canvas id="waves"></canvas>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="../sine-waves.js"></script>
<script>
$(function(){
var waves = new SineWaves({
el: document.getElementById('waves'),

speed: 8,

width: function() {
return $(window).width();
},

height: function() {
return $(window).height();
},

rotate: 90,

waves: [
{
timeModifier: 1,
lineWidth: 3,
amplitude: 150,
wavelength: 200,
segmentLength: 20
},
{
timeModifier: 1,
lineWidth: 2,
amplitude: 150,
wavelength: 100,
},
{
timeModifier: 1,
lineWidth: 1,
amplitude: -150,
wavelength: 50,
segmentLength: 10,
},
{
timeModifier: 1,
lineWidth: 0.5,
amplitude: -100,
wavelength: 100,
segmentLength: 10,
}
],

initialize: function (){

},

resizeEvent: function() {
var gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
gradient.addColorStop(0,"rgba(0, 0, 0, 0)");
gradient.addColorStop(0.5,"rgba(255, 255, 255, 0.5)");
gradient.addColorStop(1,"rgba(0, 0, 0, 0)");

var index = -1;
var length = this.waves.length;
while(++index < length){
this.waves[index].strokeStyle = gradient;
}

// Clean Up
index = void 0;
length = void 0;
gradient = void 0;
}
});
});
</script>
</body>
</html>
46 changes: 45 additions & 1 deletion sine-waves.js
Original file line number Diff line number Diff line change
@@ -152,6 +152,9 @@
this.loop();
}

/**
* Sets up the user resize event and the initialize event
*/
SineWaves.prototype.setupUserFunctions = function() {
// User Resize Function
if (isType(this.options.resizeEvent, 'function')) {
@@ -171,7 +174,8 @@
* @type {Object}
*/
SineWaves.prototype.options = {
speed: 10
speed: 10,
rotate: 0
};

/**
@@ -273,12 +277,23 @@
var index = -1;
var length = this.waves.length;

this.ctx.save();

var rotation = this.rotation();
if (rotation > 0) {
this.ctx.translate(this.width / 2, this.height / 2);
this.ctx.rotate(this.rotation());
this.ctx.translate(-this.width / 2, -this.height / 2);
}

// Draw each line
while (++index < length) {
var timeModifier = this.waves[index].timeModifier || 1;
this.drawSine(time * timeModifier, this.waves[index]);
}

this.ctx.restore();

index = void 0;
length = void 0;
};
@@ -337,6 +352,35 @@
};
};

/**
* For radian conversion
*
* @constant
* @type {Number}
*/
var PI180 = Math.PI / 180;

/**
* Convert degress to radians for rotation function
*
* @param {Number} degrees
*
* @return {Number}
*/
SineWaves.prototype.degreesToRadians = function(degrees) {
if (!isType(degrees, 'number')) { throw new TypeError('Degrees is not a number'); }
return degrees * PI180;
};

/**
* Returns in radians the amount to rotate all of the lines
*
* @return {Number}
*/
SineWaves.prototype.rotation = function() {
return this.degreesToRadians(this.options.rotate);
};

/**
* Draws one line on the canvas
*
4 changes: 2 additions & 2 deletions sine-waves.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 16 additions & 0 deletions tests/specs/SineWaves-spec.js
Original file line number Diff line number Diff line change
@@ -143,4 +143,20 @@ describe('sine-waves.js', function() {
});
});

describe('degreesToRadians', function() {
it('should convert radians to degrees' , function() {
expect(SineWaves.prototype.degreesToRadians(0)).toBeCloseTo(0);
expect(SineWaves.prototype.degreesToRadians(90)).toBeCloseTo(Math.PI * 0.5);
expect(SineWaves.prototype.degreesToRadians(180)).toBeCloseTo(Math.PI);
expect(SineWaves.prototype.degreesToRadians(270)).toBeCloseTo(Math.PI * 1.5);
expect(SineWaves.prototype.degreesToRadians(360)).toBeCloseTo(Math.PI * 2);
});

it('should throw a TypeError if the input is not a number', function() {
expect(function() {
SineWaves.prototype.degreesToRadians({});
}).toThrow(new TypeError('Degrees is not a number'));
})
});

});

0 comments on commit 02a14fd

Please sign in to comment.