Conjure/event-clock
6
0
Fork 0
mirror of https://github.com/ConjureETS/event-clock.git synced 2026-03-23 19:40:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

adding dates and color

Browse Source
This commit is contained in:
Dmitri K 2018-11-17 12:25:31 -05:00
parent 60f5d442e7
commit cf4eaccf26
3 changed files with 61 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -9,6 +9,7 @@
</head>
<body>
<canvas></canvas>
<script src="script.js"></script>
</body>
</html>
</html>

65
script.js
View File

@ -4,13 +4,14 @@
this.drawables = [];
this.canvas = canvas;
this.context = context || canvas.getContext('2d');
this.timerId = -1;
};
draw(){
this.timerId = -1
this.canvas.width = this.context.width = window.innerWidth*2;
this.canvas.height = this.context.height = window.innerHeight*2;
this.context.clearRect(0, 0, window.innerWidth, window.innerHeight)
};
draw(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
for(var i of this.drawables){
i.draw(this.context);
}
@ -44,6 +45,7 @@
this.strokeColor = "rgba(17, 17, 17, 1)"
this.strokeStyle = "solid"
this.fillColor = "rgba(0, 0, 0, 0)"
this.scale=scale
}
draw(ctx){
@ -109,10 +111,29 @@
lastMonth = month
d.setDate(d.getDate()+1) // increment day by 1
}
for(var d of dates){
//do shit
var positionStart = +(d.dateStart - startOfYear) / (endOfYear - startOfYear) * Math.PI * 2 + Math.PI/2
var positionEnd = +(d.dateEnd - startOfYear) / (endOfYear - startOfYear) * Math.PI * 2 + Math.PI/2
var mx = Math.cos(positionStart)
var my = Math.sin(positionStart)
var thickness = 10 * this.scale
ctx.beginPath()
ctx.moveTo(this.center.x + mx * (this.radius + thickness), this.center.y + my * (this.radius + thickness))
//ctx.lineTo(this.center.x + mx * this.radius, this.center.y + my * this.radius);
ctx.arc(this.center.x, this.center.y, this.radius - thickness, positionStart, (d.dateEnd-startOfYear)/(endOfYear-startOfYear) * Math.PI * 2 + Math.PI/2, false);
ctx.arc(this.center.x, this.center.y, this.radius + thickness, (d.dateEnd-startOfYear)/(endOfYear-startOfYear) * Math.PI * 2 + Math.PI/2, positionStart, true);
ctx.closePath()
ctx.fillStyle = `hsla(${Math.floor(positionStart/Math.PI * 180)}, 100%, 50%, 0.5)`
ctx.strokeStyle = `hsla(${Math.floor(positionStart/Math.PI * 180)}, 25%, 50%, 1)`
ctx.fill();
ctx.stroke();
}
}
update(){
//this.center = {x:window.innerWidth / 2, y:window.innerHeight/2}
this.center = {x:window.innerWidth / 2*this.scale, y:window.innerHeight/2*this.scale}
}
}
@ -134,11 +155,41 @@
description: "",
dateStart: new Date(2018, 11, 9),
dateEnd: new Date(2018, 11, 11)
}
},{
name: "MEGA",
description: "",
dateStart: new Date(2018, 10, 9),
dateEnd: new Date(2018, 10, 11)
},{
name: "MEGA",
description: "",
dateStart: new Date(2018, 9, 9),
dateEnd: new Date(2018, 9, 11)
},{
name: "MEGA",
description: "",
dateStart: new Date(2018, 8, 9),
dateEnd: new Date(2018, 8, 11)
},{
name: "MEGA",
description: "",
dateStart: new Date(2018, 7, 1),
dateEnd: new Date(2018, 7, 31)
},{
name: "MEGA",
description: "",
dateStart: new Date(2018, 6, 9),
dateEnd: new Date(2018, 6, 21)
},{
name: "MEGA",
description: "",
dateStart: new Date(2018, 5, 9),
dateEnd: new Date(2018, 5, 17)
},
];
var a = new Animator(document.querySelector('canvas'))
a.drawables.push(new FullRect("#eeeeee"))
//a.drawables.push(new FullRect("#eeeeee"))
a.drawables.push(new Clock(1920/2+0.5, 1080/2+0.5, 2))
a.start()
window.canvas = a.context

3
style.css
View File

@ -1,5 +1,4 @@
html, body {
background-color: #000000;
margin: 0px;
overflow: hidden;
width: 100%;
@ -8,4 +7,4 @@ html, body {
canvas {
width: 100%;
height: 100%;
}
}