I have the following code from a codepen post that I have tried to re-create using a single html page. The design shows up fine, but the animation doesn't seem to work.
The codepen link is here:
https://codepen.io/MarcoGuglielmelli/pen/lLCxy
The code I have (copied from the above) and I have used the compiled CSS from codepen is here:
<html>
<head>
<style>
/* Header */
.large-header {
position: relative;
width: 100%;
background: #333;
overflow: hidden;
background-size: cover;
background-position: center center;
z-index: 1;
}
#large-header {
background-image: url("https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/img/demo-1-bg.jpg");
}
.main-title {
position: absolute;
margin: 0;
padding: 0;
color: #f9f1e9;
text-align: center;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.demo-1 .main-title {
text-transform: uppercase;
font-size: 4.2em;
letter-spacing: 0.1em;
}
.main-title .thin {
font-weight: 200;
}
#media only screen and (max-width: 768px) {
.demo-1 .main-title {
font-size: 3em;
}
}
</style>
</head>
<body>
<div id="large-header" class="large-header">
<canvas id="demo-canvas"></canvas>
<h1 class="main-title"><span class="thin">TitleGoes <span class="thin">.here</span></h1>
</div>
<script>
(function() {
var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true;
// Main
initHeader();
initAnimation();
addListeners();
function initHeader() {
width = window.innerWidth;
height = window.innerHeight;
target = {x: width/2, y: height/2};
largeHeader = document.getElementById('large-header');
largeHeader.style.height = height+'px';
canvas = document.getElementById('demo-canvas');
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext('2d');
// create points
points = [];
for(var x = 0; x < width; x = x + width/20) {
for(var y = 0; y < height; y = y + height/20) {
var px = x + Math.random()*width/20;
var py = y + Math.random()*height/20;
var p = {x: px, originX: px, y: py, originY: py };
points.push(p);
}
}
// for each point find the 5 closest points
for(var i = 0; i < points.length; i++) {
var closest = [];
var p1 = points[i];
for(var j = 0; j < points.length; j++) {
var p2 = points[j]
if(!(p1 == p2)) {
var placed = false;
for(var k = 0; k < 5; k++) {
if(!placed) {
if(closest[k] == undefined) {
closest[k] = p2;
placed = true;
}
}
}
for(var k = 0; k < 5; k++) {
if(!placed) {
if(getDistance(p1, p2) < getDistance(p1, closest[k])) {
closest[k] = p2;
placed = true;
}
}
}
}
}
p1.closest = closest;
}
// assign a circle to each point
for(var i in points) {
var c = new Circle(points[i], 2+Math.random()*2, 'rgba(255,255,255,0.3)');
points[i].circle = c;
}
}
// Event handling
function addListeners() {
if(!('ontouchstart' in window)) {
window.addEventListener('mousemove', mouseMove);
}
window.addEventListener('scroll', scrollCheck);
window.addEventListener('resize', resize);
}
function mouseMove(e) {
var posx = posy = 0;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
target.x = posx;
target.y = posy;
}
function scrollCheck() {
if(document.body.scrollTop > height) animateHeader = false;
else animateHeader = true;
}
function resize() {
width = window.innerWidth;
height = window.innerHeight;
largeHeader.style.height = height+'px';
canvas.width = width;
canvas.height = height;
}
// animation
function initAnimation() {
animate();
for(var i in points) {
shiftPoint(points[i]);
}
}
function animate() {
if(animateHeader) {
ctx.clearRect(0,0,width,height);
for(var i in points) {
// detect points in range
if(Math.abs(getDistance(target, points[i])) < 4000) {
points[i].active = 0.3;
points[i].circle.active = 0.6;
} else if(Math.abs(getDistance(target, points[i])) < 20000) {
points[i].active = 0.1;
points[i].circle.active = 0.3;
} else if(Math.abs(getDistance(target, points[i])) < 40000) {
points[i].active = 0.02;
points[i].circle.active = 0.1;
} else {
points[i].active = 0;
points[i].circle.active = 0;
}
drawLines(points[i]);
points[i].circle.draw();
}
}
requestAnimationFrame(animate);
}
function shiftPoint(p) {
TweenLite.to(p, 1+1*Math.random(), {x:p.originX-50+Math.random()*100,
y: p.originY-50+Math.random()*100, ease:Circ.easeInOut,
onComplete: function() {
shiftPoint(p);
}});
}
// Canvas manipulation
function drawLines(p) {
if(!p.active) return;
for(var i in p.closest) {
ctx.beginPath();
ctx.moveTo(p.x, p.y);
ctx.lineTo(p.closest[i].x, p.closest[i].y);
ctx.strokeStyle = 'rgba(156,217,249,'+ p.active+')';
ctx.stroke();
}
}
function Circle(pos,rad,color) {
var _this = this;
// constructor
(function() {
_this.pos = pos || null;
_this.radius = rad || null;
_this.color = color || null;
})();
this.draw = function() {
if(!_this.active) return;
ctx.beginPath();
ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'rgba(156,217,249,'+ _this.active+')';
ctx.fill();
};
}
// Util
function getDistance(p1, p2) {
return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
}
})();
</script>
</body>
</html>
Can someone point to the error (why is there no animation?) and how can I fix it?
This codepen has a number of external resources listed. Try clicking on the 'cog' icon to the top left of each of the three windows, and you will see the external resources:
Try adding this to your <head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200,400,800" />
<link rel="stylesheet" href="https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/css/demo.css" />
<script src="https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/EasePack.min.js"></script>
<script src="https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/rAF.js"></script>
<script src="https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/TweenLite.min.js"></script>
I use this SVG Pie Chart on my website. It has a pretty animation on load (as you can see by running the snippet below) but I don't want it to be visible by default. I want it show up with its animation on a button click after the page is loaded.
Its probably controlled by triggerAnimation(); function in pie.js but it gets called automatically when the page is loaded as the script is external.
<!-- Pie chart JS-->
<script src="js/pie.js"></script>
How can I control the function from a button click? Help would be appreciated.
Below is a live snippet of the pie chart :
PIE.js, PIE.css and PIE.html
$(function(){
$("#pieChart").drawPieChart([
{ title: "Tokyo", value : 180, color: "#02B3E7" },
{ title: "San Francisco", value: 60, color: "#CFD3D6" },
{ title: "London", value : 50, color: "#736D79" },
{ title: "New York", value: 30, color: "#776068" },
{ title: "Sydney", value : 20, color: "#EB0D42" },
{ title: "Berlin", value : 20, color: "#FFEC62" },
{ title: "Osaka", value : 7, color: "#04374E" }
]);
});
/*!
* jquery.drawPieChart.js
* Version: 0.3(Beta)
* Inspired by Chart.js(http://www.chartjs.org/)
*
* Copyright 2013 hiro
* https://github.com/githiro/drawPieChart
* Released under the MIT license.
*/
;(function($, undefined) {
$.fn.drawPieChart = function(data, options) {
var $this = this,
W = $this.width(),
H = $this.height(),
centerX = W/2,
centerY = H/2,
cos = Math.cos,
sin = Math.sin,
PI = Math.PI,
settings = $.extend({
segmentShowStroke : true,
segmentStrokeColor : "#fff",
segmentStrokeWidth : 1,
baseColor: "#fff",
baseOffset: 15,
edgeOffset: 30,//offset from edge of $this
pieSegmentGroupClass: "pieSegmentGroup",
pieSegmentClass: "pieSegment",
lightPiesOffset: 12,//lighten pie's width
lightPiesOpacity: .3,//lighten pie's default opacity
lightPieClass: "lightPie",
animation : true,
animationSteps : 90,
animationEasing : "easeInOutExpo",
tipOffsetX: -15,
tipOffsetY: -45,
tipClass: "pieTip",
beforeDraw: function(){ },
afterDrawed : function(){ },
onPieMouseenter : function(e,data){ },
onPieMouseleave : function(e,data){ },
onPieClick : function(e,data){ }
}, options),
animationOptions = {
linear : function (t){
return t;
},
easeInOutExpo: function (t) {
var v = t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t;
return (v>1) ? 1 : v;
}
},
requestAnimFrame = function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
}();
var $wrapper = $('<svg width="' + W + '" height="' + H + '" viewBox="0 0 ' + W + ' ' + H + '" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>').appendTo($this);
var $groups = [],
$pies = [],
$lightPies = [],
easingFunction = animationOptions[settings.animationEasing],
pieRadius = Min([H/2,W/2]) - settings.edgeOffset,
segmentTotal = 0;
//Draw base circle
var drawBasePie = function(){
var base = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
var $base = $(base).appendTo($wrapper);
base.setAttribute("cx", centerX);
base.setAttribute("cy", centerY);
base.setAttribute("r", pieRadius+settings.baseOffset);
base.setAttribute("fill", settings.baseColor);
}();
//Set up pie segments wrapper
var pathGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
var $pathGroup = $(pathGroup).appendTo($wrapper);
$pathGroup[0].setAttribute("opacity",0);
//Set up tooltip
var $tip = $('<div class="' + settings.tipClass + '" />').appendTo('body').hide(),
tipW = $tip.width(),
tipH = $tip.height();
for (var i = 0, len = data.length; i < len; i++){
segmentTotal += data[i].value;
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
g.setAttribute("data-order", i);
g.setAttribute("class", settings.pieSegmentGroupClass);
$groups[i] = $(g).appendTo($pathGroup);
$groups[i]
.on("mouseenter", pathMouseEnter)
.on("mouseleave", pathMouseLeave)
.on("mousemove", pathMouseMove)
.on("click", pathClick);
var p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
p.setAttribute("stroke-width", settings.segmentStrokeWidth);
p.setAttribute("stroke", settings.segmentStrokeColor);
p.setAttribute("stroke-miterlimit", 2);
p.setAttribute("fill", data[i].color);
p.setAttribute("class", settings.pieSegmentClass);
$pies[i] = $(p).appendTo($groups[i]);
var lp = document.createElementNS('http://www.w3.org/2000/svg', 'path');
lp.setAttribute("stroke-width", settings.segmentStrokeWidth);
lp.setAttribute("stroke", settings.segmentStrokeColor);
lp.setAttribute("stroke-miterlimit", 2);
lp.setAttribute("fill", data[i].color);
lp.setAttribute("opacity", settings.lightPiesOpacity);
lp.setAttribute("class", settings.lightPieClass);
$lightPies[i] = $(lp).appendTo($groups[i]);
}
settings.beforeDraw.call($this);
//Animation start
triggerAnimation();
function pathMouseEnter(e){
var index = $(this).data().order;
$tip.text(data[index].title + ": " + data[index].value).fadeIn(200);
if ($groups[index][0].getAttribute("data-active") !== "active"){
$lightPies[index].animate({opacity: .8}, 180);
}
settings.onPieMouseenter.apply($(this),[e,data]);
}
function pathMouseLeave(e){
var index = $(this).data().order;
$tip.hide();
if ($groups[index][0].getAttribute("data-active") !== "active"){
$lightPies[index].animate({opacity: settings.lightPiesOpacity}, 100);
}
settings.onPieMouseleave.apply($(this),[e,data]);
}
function pathMouseMove(e){
$tip.css({
top: e.pageY + settings.tipOffsetY,
left: e.pageX - $tip.width() / 2 + settings.tipOffsetX
});
}
function pathClick(e){
var index = $(this).data().order;
var targetGroup = $groups[index][0];
for (var i = 0, len = data.length; i < len; i++){
if (i === index) continue;
$groups[i][0].setAttribute("data-active","");
$lightPies[i].css({opacity: settings.lightPiesOpacity});
}
if (targetGroup.getAttribute("data-active") === "active"){
targetGroup.setAttribute("data-active","");
$lightPies[index].css({opacity: .8});
} else {
targetGroup.setAttribute("data-active","active");
$lightPies[index].css({opacity: 1});
}
settings.onPieClick.apply($(this),[e,data]);
}
function drawPieSegments (animationDecimal){
var startRadius = -PI/2,//-90 degree
rotateAnimation = 1;
if (settings.animation) {
rotateAnimation = animationDecimal;//count up between0~1
}
$pathGroup[0].setAttribute("opacity",animationDecimal);
//draw each path
for (var i = 0, len = data.length; i < len; i++){
var segmentAngle = rotateAnimation * ((data[i].value/segmentTotal) * (PI*2)),//start radian
endRadius = startRadius + segmentAngle,
largeArc = ((endRadius - startRadius) % (PI * 2)) > PI ? 1 : 0,
startX = centerX + cos(startRadius) * pieRadius,
startY = centerY + sin(startRadius) * pieRadius,
endX = centerX + cos(endRadius) * pieRadius,
endY = centerY + sin(endRadius) * pieRadius,
startX2 = centerX + cos(startRadius) * (pieRadius + settings.lightPiesOffset),
startY2 = centerY + sin(startRadius) * (pieRadius + settings.lightPiesOffset),
endX2 = centerX + cos(endRadius) * (pieRadius + settings.lightPiesOffset),
endY2 = centerY + sin(endRadius) * (pieRadius + settings.lightPiesOffset);
var cmd = [
'M', startX, startY,//Move pointer
'A', pieRadius, pieRadius, 0, largeArc, 1, endX, endY,//Draw outer arc path
'L', centerX, centerY,//Draw line to the center.
'Z'//Cloth path
];
var cmd2 = [
'M', startX2, startY2,
'A', pieRadius + settings.lightPiesOffset, pieRadius + settings.lightPiesOffset, 0, largeArc, 1, endX2, endY2,//Draw outer arc path
'L', centerX, centerY,
'Z'
];
$pies[i][0].setAttribute("d",cmd.join(' '));
$lightPies[i][0].setAttribute("d", cmd2.join(' '));
startRadius += segmentAngle;
}
}
var animFrameAmount = (settings.animation)? 1/settings.animationSteps : 1,//if settings.animationSteps is 10, animFrameAmount is 0.1
animCount =(settings.animation)? 0 : 1;
function triggerAnimation(){
if (settings.animation) {
requestAnimFrame(animationLoop);
} else {
drawPieSegments(1);
}
}
function animationLoop(){
animCount += animFrameAmount;//animCount start from 0, after "settings.animationSteps"-times executed, animCount reaches 1.
drawPieSegments(easingFunction(animCount));
if (animCount < 1){
requestAnimFrame(arguments.callee);
} else {
settings.afterDrawed.call($this);
}
}
function Max(arr){
return Math.max.apply(null, arr);
}
function Min(arr){
return Math.min.apply(null, arr);
}
return $this;
};
})(jQuery);
.chart {
position: absolute;
width: 250px;
height: 250px;
top: 100%;
left: 50%;
margin: -225px 0 0 -225px;
}
.pieTip {
position: absolute;
float: left;
min-width: 30px;
max-width: 300px;
padding: 5px 18px 6px;
border-radius: 2px;
background: rgba(255,255,255,.97);
color: #444;
font-size: 19px;
text-shadow: 0 1px 0 #fff;
text-transform: uppercase;
text-align: center;
line-height: 1.3;
letter-spacing: .06em;
box-shadow: 0 0 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.5);
-webkit-transform: all .3s;
-moz-transform: all .3s;
-ms-transform: all .3s;
-o-transform: all .3s;
transform: all .3s;
pointer-events: none;
}
.pieTip:after {
position: absolute;
left: 50%;
bottom: -6px;
content: "";
height: 0;
margin: 0 0 0 -6px;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-top: 6px solid rgba(255,255,255,.95);
line-height: 0;
}
.chart path { cursor: pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pieChart" class="chart"></div>
Call .drawPieChart() on button click event:
$(function() {
$('button').click(function() {
// Clean up old chart contents
$("#pieChart").empty();
// Clean up Tooltips created by chart
$('.pieTip').remove();
// Draw a new chart
$("#pieChart").drawPieChart([{
title: "Tokyo",
value: 180,
color: "#02B3E7"
}, {
title: "San Francisco",
value: 60,
color: "#CFD3D6"
}, {
title: "London",
value: 50,
color: "#736D79"
}, {
title: "New York",
value: 30,
color: "#776068"
}, {
title: "Sydney",
value: 20,
color: "#EB0D42"
}, {
title: "Berlin",
value: 20,
color: "#FFEC62"
}, {
title: "Osaka",
value: 7,
color: "#04374E"
}]);
});
});
/*!
* jquery.drawPieChart.js
* Version: 0.3(Beta)
* Inspired by Chart.js(http://www.chartjs.org/)
*
* Copyright 2013 hiro
* https://github.com/githiro/drawPieChart
* Released under the MIT license.
*/
;
(function($, undefined) {
$.fn.drawPieChart = function(data, options) {
var $this = this,
W = $this.width(),
H = $this.height(),
centerX = W / 2,
centerY = H / 2,
cos = Math.cos,
sin = Math.sin,
PI = Math.PI,
settings = $.extend({
segmentShowStroke: true,
segmentStrokeColor: "#fff",
segmentStrokeWidth: 1,
baseColor: "#fff",
baseOffset: 15,
edgeOffset: 30, //offset from edge of $this
pieSegmentGroupClass: "pieSegmentGroup",
pieSegmentClass: "pieSegment",
lightPiesOffset: 12, //lighten pie's width
lightPiesOpacity: .3, //lighten pie's default opacity
lightPieClass: "lightPie",
animation: true,
animationSteps: 90,
animationEasing: "easeInOutExpo",
tipOffsetX: -15,
tipOffsetY: -45,
tipClass: "pieTip",
beforeDraw: function() {},
afterDrawed: function() {},
onPieMouseenter: function(e, data) {},
onPieMouseleave: function(e, data) {},
onPieClick: function(e, data) {}
}, options),
animationOptions = {
linear: function(t) {
return t;
},
easeInOutExpo: function(t) {
var v = t < .5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t;
return (v > 1) ? 1 : v;
}
},
requestAnimFrame = function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
}();
var $wrapper = $('<svg width="' + W + '" height="' + H + '" viewBox="0 0 ' + W + ' ' + H + '" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>').appendTo($this);
var $groups = [],
$pies = [],
$lightPies = [],
easingFunction = animationOptions[settings.animationEasing],
pieRadius = Min([H / 2, W / 2]) - settings.edgeOffset,
segmentTotal = 0;
//Draw base circle
var drawBasePie = function() {
var base = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
var $base = $(base).appendTo($wrapper);
base.setAttribute("cx", centerX);
base.setAttribute("cy", centerY);
base.setAttribute("r", pieRadius + settings.baseOffset);
base.setAttribute("fill", settings.baseColor);
}();
//Set up pie segments wrapper
var pathGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
var $pathGroup = $(pathGroup).appendTo($wrapper);
$pathGroup[0].setAttribute("opacity", 0);
//Set up tooltip
var $tip = $('<div class="' + settings.tipClass + '" />').appendTo('body').hide(),
tipW = $tip.width(),
tipH = $tip.height();
for (var i = 0, len = data.length; i < len; i++) {
segmentTotal += data[i].value;
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
g.setAttribute("data-order", i);
g.setAttribute("class", settings.pieSegmentGroupClass);
$groups[i] = $(g).appendTo($pathGroup);
$groups[i]
.on("mouseenter", pathMouseEnter)
.on("mouseleave", pathMouseLeave)
.on("mousemove", pathMouseMove)
.on("click", pathClick);
var p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
p.setAttribute("stroke-width", settings.segmentStrokeWidth);
p.setAttribute("stroke", settings.segmentStrokeColor);
p.setAttribute("stroke-miterlimit", 2);
p.setAttribute("fill", data[i].color);
p.setAttribute("class", settings.pieSegmentClass);
$pies[i] = $(p).appendTo($groups[i]);
var lp = document.createElementNS('http://www.w3.org/2000/svg', 'path');
lp.setAttribute("stroke-width", settings.segmentStrokeWidth);
lp.setAttribute("stroke", settings.segmentStrokeColor);
lp.setAttribute("stroke-miterlimit", 2);
lp.setAttribute("fill", data[i].color);
lp.setAttribute("opacity", settings.lightPiesOpacity);
lp.setAttribute("class", settings.lightPieClass);
$lightPies[i] = $(lp).appendTo($groups[i]);
}
settings.beforeDraw.call($this);
//Animation start
triggerAnimation();
function pathMouseEnter(e) {
var index = $(this).data().order;
$tip.text(data[index].title + ": " + data[index].value).fadeIn(200);
if ($groups[index][0].getAttribute("data-active") !== "active") {
$lightPies[index].animate({
opacity: .8
}, 180);
}
settings.onPieMouseenter.apply($(this), [e, data]);
}
function pathMouseLeave(e) {
var index = $(this).data().order;
$tip.hide();
if ($groups[index][0].getAttribute("data-active") !== "active") {
$lightPies[index].animate({
opacity: settings.lightPiesOpacity
}, 100);
}
settings.onPieMouseleave.apply($(this), [e, data]);
}
function pathMouseMove(e) {
$tip.css({
top: e.pageY + settings.tipOffsetY,
left: e.pageX - $tip.width() / 2 + settings.tipOffsetX
});
}
function pathClick(e) {
var index = $(this).data().order;
var targetGroup = $groups[index][0];
for (var i = 0, len = data.length; i < len; i++) {
if (i === index) continue;
$groups[i][0].setAttribute("data-active", "");
$lightPies[i].css({
opacity: settings.lightPiesOpacity
});
}
if (targetGroup.getAttribute("data-active") === "active") {
targetGroup.setAttribute("data-active", "");
$lightPies[index].css({
opacity: .8
});
} else {
targetGroup.setAttribute("data-active", "active");
$lightPies[index].css({
opacity: 1
});
}
settings.onPieClick.apply($(this), [e, data]);
}
function drawPieSegments(animationDecimal) {
var startRadius = -PI / 2, //-90 degree
rotateAnimation = 1;
if (settings.animation) {
rotateAnimation = animationDecimal; //count up between0~1
}
$pathGroup[0].setAttribute("opacity", animationDecimal);
//draw each path
for (var i = 0, len = data.length; i < len; i++) {
var segmentAngle = rotateAnimation * ((data[i].value / segmentTotal) * (PI * 2)), //start radian
endRadius = startRadius + segmentAngle,
largeArc = ((endRadius - startRadius) % (PI * 2)) > PI ? 1 : 0,
startX = centerX + cos(startRadius) * pieRadius,
startY = centerY + sin(startRadius) * pieRadius,
endX = centerX + cos(endRadius) * pieRadius,
endY = centerY + sin(endRadius) * pieRadius,
startX2 = centerX + cos(startRadius) * (pieRadius + settings.lightPiesOffset),
startY2 = centerY + sin(startRadius) * (pieRadius + settings.lightPiesOffset),
endX2 = centerX + cos(endRadius) * (pieRadius + settings.lightPiesOffset),
endY2 = centerY + sin(endRadius) * (pieRadius + settings.lightPiesOffset);
var cmd = [
'M', startX, startY, //Move pointer
'A', pieRadius, pieRadius, 0, largeArc, 1, endX, endY, //Draw outer arc path
'L', centerX, centerY, //Draw line to the center.
'Z' //Cloth path
];
var cmd2 = [
'M', startX2, startY2,
'A', pieRadius + settings.lightPiesOffset, pieRadius + settings.lightPiesOffset, 0, largeArc, 1, endX2, endY2, //Draw outer arc path
'L', centerX, centerY,
'Z'
];
$pies[i][0].setAttribute("d", cmd.join(' '));
$lightPies[i][0].setAttribute("d", cmd2.join(' '));
startRadius += segmentAngle;
}
}
var animFrameAmount = (settings.animation) ? 1 / settings.animationSteps : 1, //if settings.animationSteps is 10, animFrameAmount is 0.1
animCount = (settings.animation) ? 0 : 1;
function triggerAnimation() {
if (settings.animation) {
requestAnimFrame(animationLoop);
} else {
drawPieSegments(1);
}
}
function animationLoop() {
animCount += animFrameAmount; //animCount start from 0, after "settings.animationSteps"-times executed, animCount reaches 1.
drawPieSegments(easingFunction(animCount));
if (animCount < 1) {
requestAnimFrame(arguments.callee);
} else {
settings.afterDrawed.call($this);
}
}
function Max(arr) {
return Math.max.apply(null, arr);
}
function Min(arr) {
return Math.min.apply(null, arr);
}
return $this;
};
})(jQuery);
.chart {
position: absolute;
width: 250px;
height: 250px;
top: 100%;
left: 50%;
margin: -225px 0 0 -225px;
}
.pieTip {
position: absolute;
float: left;
min-width: 30px;
max-width: 300px;
padding: 5px 18px 6px;
border-radius: 2px;
background: rgba(255, 255, 255, .97);
color: #444;
font-size: 19px;
text-shadow: 0 1px 0 #fff;
text-transform: uppercase;
text-align: center;
line-height: 1.3;
letter-spacing: .06em;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5);
-webkit-transform: all .3s;
-moz-transform: all .3s;
-ms-transform: all .3s;
-o-transform: all .3s;
transform: all .3s;
pointer-events: none;
}
.pieTip:after {
position: absolute;
left: 50%;
bottom: -6px;
content: "";
height: 0;
margin: 0 0 0 -6px;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-top: 6px solid rgba(255, 255, 255, .95);
line-height: 0;
}
.chart path {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pieChart" class="chart"></div>
<button>Animate</button>
Background: I'm working on a library for creating "low resolution" display.
Now I wanted to test it with a simple demo - it should draw a radial gradient around cursor.
I think I got the math right and it is working, except when you move your mouse into the bottom left corner.
I tried printing the numbers, changing order and all, but can't find the cause.
Here is also a Fiddle: https://jsfiddle.net/to5qfk7o/
var size = 16; // number of pixels
var lo = new Lores('#board', size, size);
// DRAWING FUNCTION
setInterval(function () {
// Mouse coords
var m_x = lo.mouse.x;
var m_y = lo.mouse.y;
// print where is mouse - for debug
console.log(m_x + "," + m_y);
// for all pixels on screen
for (var x = 0; x < size; x++) {
for (var y = 0; y < size; y++) {
// mouse distance from this pixel
var distance = (Math.sqrt((m_x - x) * (m_x - x) + (m_y - y) * (m_y - y)));
// convert: 0..255, "size"..0
var color = 255 - Math.floor((255 / size) * distance);
// set color
if (color < 0) {
lo.set(y, x, 'black');
} else {
lo.set(x, y, 'rgb(' + color + ', 0, 0)');
}
}
}
}, 100);
// ---- LIBRARY CODE -----
function Lores(selector, width, height) {
this.boardElem = document.querySelector(selector);
this.boardElem.className += ' lores-screen';
this.grid = [];
this.mouse = {
inside: false,
x: 0,
y: 0 // position rounded to nearest board "pixel"
};
this.width = width;
this.height = height;
if (this.boardElem === null) {
console.error('No such element!');
return;
}
if (width <= 0 || height <= 0) {
console.error('Dimensions must be positive!');
return;
}
// Inject a style block for the sizes
var css = selector + ' > div {height:' + (100 / height) + '%}';
css += selector + ' > div > div {width:' + (100 / width) + '%}';
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
document.head.appendChild(style);
var frag = document.createDocumentFragment();
// Create the grid
for (var i = height; i > 0; i--) {
var rowElem = document.createElement('div');
rowElem.dataset.y = i;
var row = [];
for (var j = width; j > 0; j--) {
var cellElem = document.createElement('div');
cellElem.dataset.x = j;
rowElem.appendChild(cellElem);
row.push(cellElem);
}
frag.appendChild(rowElem);
this.grid.push(row);
}
this.boardElem.appendChild(frag);
console.log('yo');
var self = this;
// add mouse listener
document.addEventListener('mousemove', function (e) {
var rect = self.boardElem.getBoundingClientRect();
var x = (self.width * (e.clientX - rect.left)) / rect.width;
var y = (self.height * (e.clientY - rect.top)) / rect.height;
self.mouse.x = Math.floor(x);
self.mouse.y = Math.floor(y);
self.mouse.inside = (x >= 0 && x < self.width && y >= 0 && y < self.height);
}, false);
}
Lores.prototype.set = function (x, y, color) {
if (x < 0 || x >= this.width || y < 0 || y >= this.height) return;
this.grid[y][x].style.backgroundColor = color;
};
#board {
margin: 0 auto;
width: 128px;
height: 128px;
outline: 1px solid black;
}
#board > div:nth-child(odd) > div:nth-child(odd) {
background: #eee
}
#board > div:nth-child(even) > div:nth-child(even) {
background: #eee
}
.lores-screen {
display: block;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.lores-screen, .lores-screen * {
white-space: nowrap;
padding: 0;
}
.lores-screen * {
margin: 0
}
.lores-screen > div {
display: block;
}
.lores-screen > div > div {
display: inline-block;
vertical-align: top;
height: 100%;
}
<div id="board"></div>
It could be something trivial, I really don't know. Thanks!
The problem is a simple typo in your if statement. You have x and y mixed up in the set of your first branch. Having said that, we can eliminate the branch entirely. A simple Math.max(0, ...) will default it to black.
Change the following:
var color = 255 - Math.floor((255 / size) * distance);
// set color
if (color < 0) {
lo.set(y, x, 'black');
} else {
lo.set(x, y, 'rgb(' + color + ', 0, 0)');
}
to
var color = Math.max(0, 255-Math.floor((255 / size) * distance));
lo.set(x, y, 'rgb(' + color + ', 0, 0)');
jsfiddle
change
// set color
if (color < 0) {
lo.set(y, x, 'black');
} else {
lo.set(x, y, 'rgb(' + color + ', 0, 0)');
}
to
// set color
lo.set(x, y, 'rgb(' + Math.max(color, 0) + ', 0, 0)');
https://jsfiddle.net/hrvqa457/
I am having issues trying to place an image as an object for an "asteroid avoidance" game. I was able to get the game itself to work based on what was written in my book "Foundation: HTML5 Canvas for Games and Entertainment". I want to go one step beyond what was written in the book. I want to replace the triangle shaped ship with that of an image. However, I am unable to figure out where to put the code for this.draw. My professor showed us a way to do it. When I try to implement it into my code it doesn't want to work properly. May I ask for some advice on how to place the image as the ship?
Here is my working code from the book, before I made any this.draw edits:(http://jsbin.com/tukejopofo/1/)
$(document).ready(function() {
var canvas = $("#gameCanvas");
var context = canvas.get(0).getContext("2d");
//canvas dimensions
var canvasWidth = canvas.width();
var canvasHeight = canvas.height();
var playGame;
var asteroids;
var numAsteroids;
var player;
var score;
var scoreTimeout;
var arrowUp = 38;
var arrowRight = 39;
var arrowDown = 40;
var arrowLeft = 37;
//game UI
var ui = $("#gameUI");
var uiIntro = $("#gameIntro");
var uiStats = $("#gameStats");
var uiComplete = $("#gameComplete");
var uiPlay = $("#gamePlay");
var uiReset = $(".gameReset");
var uiScore = $(".gameScore");
var soundBackground = $("#gameSoundBackground").get(0);
var soundThrust = $("#gameSoundThrust").get(0);
var soundDeath = $("#gameSoundDeath").get(0);
var Asteroid = function(x, y, radius, vX) {
this.x = x;
this.y = y;
this.radius = radius;
this.vX = vX;
};
var Player = function(x, y) {
this.x = x;
this.y = y;
this.width = 24;
this.height = 24;
this.halfWidth = this.width / 2;
this.halfHeight = this.height / 2;
this.flameLength1 = 20;
this.flameLength2 = 20;
this.vX = 0;
this.vY = 0;
this.moveRight = false;
this.moveUp = false;
this.moveDown = false;
this.moveLeft = false;
};
//Reset and start the game
function startGame() {
//Reset game stats
uiScore.html("0");
uiStats.show();
//set up initial game settings
playGame = false;
asteroids = new Array();
numAsteroids = 10;
score = 0;
player = new Player(150, canvasHeight / 2, 50, 50);
for (var i = 0; i < numAsteroids; i++) {
var radius = 5 + (Math.random() * 10);
var x = canvasWidth + radius + Math.floor(Math.random() * canvasWidth);
var y = Math.floor(Math.random() * canvasHeight);
var vX = -5 - (Math.random() * 5);
asteroids.push(new Asteroid(x, y, radius, vX));
};
$(window).keydown(function(e) {
var keyCode = e.keyCode;
if (!playGame) {
playGame = true;
soundBackground.currentTime = 0;
soundBackground.play();
animate();
timer();
};
if (keyCode == arrowRight) {
player.moveRight = true;
if (soundThrust.paused) {
soundThrust.currentTime = 0;
soundThrust.play();
}
} else if (keyCode == arrowLeft) {
player.moveLeft = true;
} else if (keyCode == arrowUp) {
player.moveUp = true;
} else if (keyCode == arrowDown) {
player.moveDown = true;
}
});
$(window).keyup(function(e) {
var keyCode = e.keyCode;
if (!playGame) {
playGame = true;
animate();
};
if (keyCode == arrowRight) {
player.moveRight = false;
if (keyCode == arrowRight) {
player.moveRight = false;
soundThrust.pause();
}
} else if (keyCode == arrowUp) {
player.moveUp = false;
} else if (keyCode == arrowDown) {
player.moveDown = false;
} else if (keyCode == arrowLeft) {
player.moveLeft = false;
}
});
//start the animation loop
animate();
};
//initialize the game environment
function init() {
uiStats.hide();
uiComplete.hide();
uiPlay.click(function(e) {
e.preventDefault();
uiIntro.hide();
startGame();
});
uiReset.click(function(e) {
e.preventDefault();
uiComplete.hide();
$(window).unbind("keyup");
$(window).unbind("keydown");
soundThrust.pause();
soundBackground.pause();
clearTimeout(scoreTimeout);
startGame();
});
};
function timer() {
if (playGame) {
scoreTimeout = setTimeout(function() {
uiScore.html(++score);
if (score % 5 == 0) {
numAsteroids += 5;
}
timer();
}, 1000);
};
};
//Animation loop that does all the fun stuff
function animate() {
//Clear
context.clearRect(0, 0, canvasWidth, canvasHeight);
var asteroidsLength = asteroids.length;
for (var i = 0; i < asteroidsLength; i++) {
var tmpAsteroid = asteroids[i];
tmpAsteroid.x += tmpAsteroid.vX;
if (tmpAsteroid.x + tmpAsteroid.radius < 0) { //creates bounderies to prevent player from leaving the canvas
tmpAsteroid.radius = 5 + (Math.random() * 10);
tmpAsteroid.x = canvasWidth + tmpAsteroid.radius;
tmpAsteroid.y = Math.floor(Math.random() * canvasHeight);
tmpAsteroid.vX = -5 - (Math.random() * 5);
}
var dX = player.x - tmpAsteroid.x;
var dY = player.y - tmpAsteroid.y;
var distance = Math.sqrt((dX * dX) + (dY * dY));
if (distance < player.halfWidth + tmpAsteroid.radius) { //checks for collision
soundThrust.pause()
soundDeath.currentTime = 0;
soundDeath.play();
//Game over
playGame = false;
clearTimeout(scoreTimeout);
uiStats.hide();
uiComplete.show();
soundBackground.pause();
$(window).unbind("keyup"); //unbinds keys to stop player movement at the end of the game
$(window).unbind("keydown");
};
context.fillStyle = "rgb(255, 255, 255)";
context.beginPath();
context.arc(tmpAsteroid.x, tmpAsteroid.y, tmpAsteroid.radius, 0, Math.PI * 2, true);
context.fill();
};
player.vX = 0;
player.vY = 0;
if (player.moveRight) {
player.vX = 3;
};
if (player.moveLeft) {
player.vX = -3;
};
if (player.moveUp) {
player.vY = -3;
};
if (player.moveDown) {
player.vY = 3;
};
player.x += player.vX;
player.y += player.vY;
if (player.x - player.halfWidth < 20) {
player.x = 20 + player.halfWidth;
} else if (player.x + player.halfWidth > canvasWidth - 20) {
player.x = canvasWidth - 20 - player.halfWidth;
}
if (player.y - player.halfHeight < 20) {
player.y = 20 + player.halfHeight;
} else if (player.y + player.halfHeight > canvasHeight - 20) {
player.y = canvasHeight - 20 - player.halfHeight;
}
if (player.moveRight) {
context.save();
context.translate(player.x - player.halfWidth, player.y);
if (player.flameLength1 == 20) {
player.flameLength1 = 15;
(player.flameLength2 == 20)
player.flameLength2 = 15;
} else {
player.flameLength1 = 20;
player.flameLength2 = 20;
};
context.fillStyle = "orange";
context.beginPath();
context.moveTo(0, -12);
context.lineTo(-player.flameLength1, -7);
context.lineTo(0, -5);
context.closePath();
context.fill();
context.fillStyle = "orange";
context.beginPath();
context.moveTo(0, 12);
context.lineTo(-player.flameLength2, 7);
context.lineTo(0, 5);
context.closePath();
context.fill();
context.restore();
};
//draw ship
context.fillStyle = "rgb(255, 0, 0)";
context.beginPath();
context.moveTo(player.x + player.halfWidth, player.y);
context.lineTo(player.x - player.halfWidth, player.y - player.halfHeight);
context.lineTo(player.x - player.halfWidth, player.y + player.halfHeight);
context.closePath();
context.fill();
while (asteroids.length < numAsteroids) { //adds asteroids as the difficulty increases
var radius = 5 + (Math.random() * 10)
var x = Math.floor(Math.random() * canvasWidth) + canvasWidth + radius;
var y = Math.floor(Math.random() * canvasHeight);
var vX = -5 - (Math.random() * 5);
asteroids.push(new Asteroid(x, y, radius, vX));
}
if (playGame) {
//run the animation loop again in 33 milliseconds
setTimeout(animate, 24);
};
};
init();
});
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
canvas {
display: block;
}
body {
background: #000;
color: #fff;
font-family: Verdana, Arial, sans-serif;
font-size: 18px;
}
h1 {
font-size: 30px;
}
h6 {
font-size: 15px;
}
p {
margin: 0 20px;
}
a {
color: #fff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a.button {
background: #185da8;
border-radius: 5px;
display: block;
font-size: 30px;
margin: 40px 0 0 350px;
padding: 10px;
width: 200px;
text-align: center;
}
a.button:hover {
background: #2488f5;
color: #fff;
text-decoration: none;
}
#game {
height: 600px;
left: 50%;
margin: -250px 0 0 -500px;
position: relative;
top: 50%;
width: 980px;
}
#gameCanvas {
background: #001022;
border: 5px solid green;
background-image: url(../images/space.jpg);
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}
#gameUI {
height: 600px;
position: absolute;
width: 980px;
}
#gameIntro,
#gameComplete {
background: rgba(0, 0, 0, 0.5);
margin: 100px 0 0 10px;
padding: 40px 0;
text-align: center;
}
#gameStats {
font-size: 14px;
margin: 20px 0;
}
#gameStats .gameReset {
margin: 20px 20px 0 0;
position: absolute;
right: 0;
top: 0;
}
<body>
<div id="game">
<div id="gameUI">
<div id="gameIntro">
<h1>Debris Fields of Spiral Galaxy</h1>
<h6>A <i>Galaxy Smuggler's Run</i> Game</h6>
<hr>
<p>You are Captain Amadaeus delivering goods to a dependent planet on the other side of a debris field</p>
<p>Click <i>"Play"</i> and then press any key to start.</p>
<p><a id="gamePlay" class="button" href="">Play!</a>
</p>
</div>
<div id="gameStats">
<p><b>Time: </b><span class="gameScore"></span> seconds</p>
<p><a class="gameReset" href="">Reset</a>
</p>
</div>
<div id="gameComplete">
<h1>Game Over!</h1>
<p>You survived for <span class="gameScore"></span> seconds.</p>
<p>Would you like to give it another go?</p>
<p><a class="gameReset button" href="">Play Again?</a>
</p>
</div>
</div>
<canvas id="gameCanvas" width="980" height="600">
</canvas>
<audio id="gameSoundBackground" loop>
<source src="sounds/background.ogg">
<source src="sounds/background.mp3">
</audio>
<audio id="gameSoundThrust" loop>
<source src="sounds/thrust.ogg">
<source src="sounds/thrust.mp3">
</audio>
<audio id="gameSoundDeath">
<source src="sounds/death.ogg">
<source src="sounds/death.mp3">
</audio>
</div>
</body>
and here is my Professor's code for drawing an image:(http://jsbin.com/rapayufafe/1/)
// JS file for the ship
function Ship() {
this.x = 100;
this.y = 100;
this.color = "yellow";
this.fillStyle = "white";
this.vx = 0;
this.vy = 0;
this.ax = 1;
this.ay = 1;
//function "move" that will add velocity to the position of the ship
this.move = function() {
this.x += this.vx;
this.y += this.vy;
}//end move function
//draw the ship
this.draw=function () {
//ship var
var imageObj = new Image();
imageObj.src = "images/ship.png";
//save the current state of the canvas
context.save();
//moving the point of origin (0,0) to the ships x and y coordinates
context.translate(this.x,this.y);
context.lineStyle = this.color;
context.fillStyle = this.fillStyle;
/*context.beginPath();
context.moveTo(25,0);
context.lineTo(-25,25)
context.lineTo(-25,-25)*/
//draw ship
context.drawImage(imageObj,-25,-25,50,50);
context.closePath();
context.stroke();
context.fill();
context.restore();
}//end of draw ship
}//end ship function
/*var asteroidsLength = asteroids.length;
for (var i = 0; i < asteroidsLength; i++) {
var tmpAsteroid = asteroids[i];
context.fillStyle = "gray";
context.beginPath();
context.arc(tmpAsteroid.x, tmpAsteroid.y, tmpAsteroid.radius, 0, Math.PI*2, true);
context.closePath();
context.fill();
};*/
As you can see in your starting code, you have a section looking like this:
//draw ship
context.fillStyle = "rgb(255, 0, 0)";
context.beginPath();
context.moveTo(player.x + player.halfWidth, player.y);
context.lineTo(player.x - player.halfWidth, player.y - player.halfHeight);
context.lineTo(player.x - player.halfWidth, player.y + player.halfHeight);
context.closePath();
context.fill();
Just replace that code with the code for drawing an image.
var imageObj = new Image();
imageObj.src = "images/ship.png";
context.drawImage(imageObj,player.x,player.y);
Although, I'd recommend declaring the imageObj and setting the source at the top of your code where you declare the rest of your variables so that you don't load the image every time you want to draw the ship.