├── README.md ├── clock floyd ├── img │ ├── run.gif │ ├── sun.png │ └── run-frames │ │ ├── run-1.png │ │ ├── run-2.png │ │ ├── run-3.png │ │ ├── run-4.png │ │ ├── run-5.png │ │ ├── run-6.png │ │ ├── run-7.png │ │ ├── run-8.png │ │ └── run-9.png ├── css │ ├── clock.css │ └── stylesheet.css ├── clock.html ├── index.html └── js │ └── script.js └── clock ├── css ├── clock.css └── stylesheet.css ├── clock.html ├── index.html └── js └── script.js /README.md: -------------------------------------------------------------------------------- 1 | # ClockJS 2 | -------------------------------------------------------------------------------- /clock floyd/img/run.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoR/ClockJS/master/clock floyd/img/run.gif -------------------------------------------------------------------------------- /clock floyd/img/sun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoR/ClockJS/master/clock floyd/img/sun.png -------------------------------------------------------------------------------- /clock floyd/img/run-frames/run-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoR/ClockJS/master/clock floyd/img/run-frames/run-1.png -------------------------------------------------------------------------------- /clock floyd/img/run-frames/run-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoR/ClockJS/master/clock floyd/img/run-frames/run-2.png -------------------------------------------------------------------------------- /clock floyd/img/run-frames/run-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoR/ClockJS/master/clock floyd/img/run-frames/run-3.png -------------------------------------------------------------------------------- /clock floyd/img/run-frames/run-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoR/ClockJS/master/clock floyd/img/run-frames/run-4.png -------------------------------------------------------------------------------- /clock floyd/img/run-frames/run-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoR/ClockJS/master/clock floyd/img/run-frames/run-5.png -------------------------------------------------------------------------------- /clock floyd/img/run-frames/run-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoR/ClockJS/master/clock floyd/img/run-frames/run-6.png -------------------------------------------------------------------------------- /clock floyd/img/run-frames/run-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoR/ClockJS/master/clock floyd/img/run-frames/run-7.png -------------------------------------------------------------------------------- /clock floyd/img/run-frames/run-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoR/ClockJS/master/clock floyd/img/run-frames/run-8.png -------------------------------------------------------------------------------- /clock floyd/img/run-frames/run-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoR/ClockJS/master/clock floyd/img/run-frames/run-9.png -------------------------------------------------------------------------------- /clock/css/clock.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font-family: Helvetica; 3 | } 4 | 5 | body { 6 | background-color: white; 7 | margin: 0; 8 | } 9 | 10 | canvas { 11 | display: block; 12 | margin: 0 auto; 13 | } 14 | 15 | -------------------------------------------------------------------------------- /clock/css/stylesheet.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font-family: Helvetica; 3 | } 4 | 5 | body { 6 | background-color: white; 7 | margin: 0; 8 | } 9 | 10 | canvas { 11 | display: block; 12 | margin: 0 auto; 13 | } 14 | 15 | -------------------------------------------------------------------------------- /clock floyd/css/clock.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font-family: Helvetica; 3 | } 4 | 5 | body { 6 | background-color: white; 7 | margin: 0; 8 | } 9 | 10 | canvas { 11 | display: block; 12 | margin: 0 auto; 13 | } 14 | 15 | -------------------------------------------------------------------------------- /clock floyd/css/stylesheet.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font-family: Helvetica; 3 | } 4 | 5 | body { 6 | background-color: #323232; 7 | margin: 0; 8 | } 9 | 10 | canvas { 11 | display: block; 12 | margin: 0 auto; 13 | } 14 | 15 | -------------------------------------------------------------------------------- /clock/clock.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | -------------------------------------------------------------------------------- /clock floyd/clock.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | -------------------------------------------------------------------------------- /clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | -------------------------------------------------------------------------------- /clock floyd/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | -------------------------------------------------------------------------------- /clock/js/script.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById("canvas"); 2 | var context = canvas.getContext("2d"); 3 | 4 | // multiply with an angle in degrees to get an angle in radians 5 | var degreesToRadians = Math.PI / 180 6 | 7 | canvas.height = 1000; 8 | canvas.width = canvas.height; 9 | 10 | var canvasRadius = canvas.height / 2 11 | var clockRadius = canvasRadius * 0.75 12 | 13 | // dictionary containing length, color, time and rotation values of pointers 14 | var pointers = { 15 | hour: { 16 | length: { 17 | start: 0.07, 18 | end: 0.7 19 | }, 20 | color: "black", 21 | width: 5, 22 | currentTimeValue: 0, 23 | getTimeRotation: function() { 24 | return this.currentTimeValue * 30 * degreesToRadians; 25 | } 26 | }, 27 | minute: { 28 | length: { 29 | start: 0.07, 30 | end: 0.9, 31 | }, 32 | color: "black", 33 | width: 5, 34 | currentTimeValue: 0, 35 | getTimeRotation: function() { 36 | return this.currentTimeValue * 6 * degreesToRadians; 37 | } 38 | }, 39 | second: { 40 | length: { 41 | start: 0.07, 42 | end: 0.9 43 | }, 44 | color: "red", 45 | width: 2, 46 | currentTimeValue: 0, 47 | getTimeRotation: function() { 48 | return this.currentTimeValue * 6 * degreesToRadians; 49 | } 50 | } 51 | } 52 | 53 | var secondsPointerValue = 0; 54 | var minutesPointerValue = 0; 55 | var hoursPointerValue = 0; 56 | 57 | // change the anchorpoint to the center 58 | context.translate(canvasRadius, canvasRadius); 59 | 60 | window.addEventListener('resize', resizeCanvas, false); 61 | 62 | function resizeCanvas() { 63 | canvas.width = document.body.clientWidth 64 | canvas.height = document.body.clientHeight 65 | 66 | canvasRadius = canvas.width > canvas.height ? canvas.height / 2: canvas.width / 2; 67 | clockRadius = canvasRadius * 0.8 68 | 69 | context.translate(canvas.width / 2, canvas.height / 2); 70 | } 71 | 72 | function drawFrame() { 73 | /* start clock frame */ 74 | context.beginPath(); 75 | context.arc(0, 0, clockRadius, 0, 2 * Math.PI, false); 76 | context.lineWidth = 5; 77 | context.fillStyle = "white"; 78 | context.fill(); 79 | context.strokeStyle = "black"; 80 | context.lineWidth = 5; 81 | context.stroke(); 82 | /* end clock frame */ 83 | 84 | // draw hour lines 85 | for (var i = 0; i < 12; i++) { 86 | context.save(); 87 | context.rotate(i * 30 * degreesToRadians ); 88 | context.beginPath(); 89 | context.moveTo(0, clockRadius); 90 | context.lineTo(0, clockRadius * 0.9); 91 | context.stroke(); 92 | context.closePath(); 93 | context.restore(); 94 | }; 95 | 96 | // draw minute lines 97 | for (var i = 0; i < 60; i++) { 98 | context.save(); 99 | context.rotate(i * 6 * degreesToRadians ); 100 | context.beginPath(); 101 | context.lineWidth = 0.5 102 | context.moveTo(0, clockRadius); 103 | context.lineTo(0, clockRadius * 0.95); 104 | context.stroke(); 105 | context.closePath(); 106 | context.restore(); 107 | }; 108 | } 109 | 110 | // draw any pointer, the pointerType must be a key of the pointers dictionary 111 | function drawPointer(pointerType) { 112 | 113 | context.save(); 114 | context.rotate(pointers[pointerType].getTimeRotation()); 115 | context.lineWidth = pointers[pointerType].width; 116 | context.beginPath(); 117 | context.strokeStyle = pointers[pointerType].color; 118 | context.moveTo(0, pointers[pointerType].length.start * clockRadius) 119 | context.lineTo(0, -clockRadius * pointers[pointerType].length.end) 120 | context.stroke(); 121 | context.closePath(); 122 | context.restore(); 123 | 124 | } 125 | 126 | function tick() { 127 | 128 | var currentTime = new Date() 129 | pointers.second.currentTimeValue = currentTime.getSeconds() + (currentTime.getMilliseconds() / 1000) 130 | pointers.minute.currentTimeValue = currentTime.getMinutes() + (pointers.second.currentTimeValue / 60) 131 | pointers.hour.currentTimeValue = currentTime.getHours() + (pointers.minute.currentTimeValue / 60) 132 | 133 | drawFrame(); 134 | drawPointer("hour"); 135 | drawPointer("minute"); 136 | drawPointer("second"); 137 | 138 | requestAnimationFrame(tick); 139 | } 140 | 141 | resizeCanvas(); 142 | tick(); 143 | -------------------------------------------------------------------------------- /clock floyd/js/script.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById("canvas"); 2 | var context = canvas.getContext("2d"); 3 | 4 | // multiply with an angle in degrees to get an angle in radians 5 | var degreesToRadians = Math.PI / 180 6 | 7 | canvas.height = 800; 8 | canvas.width = canvas.height; 9 | 10 | var canvasRadius = canvas.height / 2 11 | var clockRadius = canvasRadius * 0.75 12 | var pointerCircleRadius = 8; 13 | 14 | var clockFrameColor = "#F7FCE7"; 15 | 16 | // dictionary containing length, color, time and rotation values of pointers 17 | var pointers = { 18 | hour: { 19 | length: { 20 | start: 0.1, 21 | end: 0.7 22 | }, 23 | color: "black", 24 | width: 5, 25 | currentTimeValue: 0, 26 | getTimeRotation: function() { 27 | return this.currentTimeValue * 30 * degreesToRadians; 28 | } 29 | }, 30 | minute: { 31 | length: { 32 | start: 0.1, 33 | end: 0.9, 34 | }, 35 | color: "black", 36 | width: 5, 37 | currentTimeValue: 0, 38 | getTimeRotation: function() { 39 | return this.currentTimeValue * 6 * degreesToRadians; 40 | } 41 | }, 42 | second: { 43 | length: { 44 | start: 0.1, 45 | end: 0.9 46 | }, 47 | color: "red", 48 | width: 2, 49 | currentTimeValue: 0, 50 | getTimeRotation: function() { 51 | return this.currentTimeValue * 6 * degreesToRadians; 52 | } 53 | } 54 | } 55 | 56 | var manImg; 57 | 58 | function drawMan(strDataURI, context, coords) { 59 | if (!manImg) { 60 | var img = new window.Image(); 61 | img.addEventListener("load", function () { 62 | manImg = img; 63 | context.drawImage(manImg, coords.x, coords.y); 64 | }); 65 | img.setAttribute("src", strDataURI); 66 | } else { 67 | context.drawImage(manImg, coords.x, coords.y); 68 | } 69 | } 70 | 71 | var sunImg; 72 | 73 | function drawSun(strDataURI, context, coords) { 74 | if (!sunImg) { 75 | var img = new window.Image(); 76 | img.addEventListener("load", function () { 77 | sunImg = img; 78 | context.drawImage(sunImg, coords.x, coords.y); 79 | }); 80 | img.setAttribute("src", strDataURI); 81 | } else { 82 | context.drawImage(sunImg, coords.x, coords.y); 83 | } 84 | } 85 | 86 | var numberCoords = [ 87 | 88 | { x: 100, y: -200 }, 89 | { x: 180, y: -120 }, 90 | { x: 200, y: 10 }, 91 | { x: 180, y: 130 }, 92 | { x: 110, y: 230 }, 93 | { x: -30, y: 270 }, 94 | { x: -160, y: 220 }, 95 | { x: -230, y: 140 }, 96 | { x: -260, y: 20 }, 97 | { x: -230, y: -120 }, 98 | { x: -140, y: -200 }, 99 | { x: -40, y: -240 } 100 | 101 | ]; 102 | 103 | var numberSymbols = [ 104 | 105 | "I", 106 | "II", 107 | "III", 108 | "IV", 109 | "V", 110 | "VI", 111 | "VII", 112 | "VIII", 113 | "IX", 114 | "X", 115 | "XI", 116 | "XII", 117 | ] 118 | 119 | var numberSymbols = [ 120 | 121 | "I", 122 | "II", 123 | "III", 124 | "IV", 125 | "V", 126 | "VI", 127 | "VII", 128 | "VIII", 129 | "IX", 130 | "X", 131 | "XI", 132 | "XII", 133 | ] 134 | 135 | var secondsPointerValue = 0; 136 | var minutesPointerValue = 0; 137 | var hoursPointerValue = 0; 138 | 139 | // change the anchorpoint to the center 140 | context.translate(canvasRadius, canvasRadius); 141 | 142 | 143 | function drawFrame() { 144 | /* start clock frame */ 145 | context.beginPath(); 146 | context.arc(0, 0, clockRadius, 0, 2 * Math.PI, false); 147 | context.lineWidth = 5; 148 | context.fillStyle = clockFrameColor; 149 | context.fill(); 150 | context.strokeStyle = "black"; 151 | context.lineWidth = 5; 152 | context.stroke(); 153 | /* end clock frame */ 154 | 155 | // Draw time 156 | context.fillStyle = "black"; 157 | context.font = "20px Georgia"; 158 | context.fillText("TIME", -20, -120); 159 | context.fillText("PINK FLOYD", -50, -90); 160 | 161 | context.fillText("So you run", -40, 80); 162 | context.fillText("And you run", -45, 110); 163 | context.fillText("To catch up with the sun", -100, 140); 164 | 165 | 166 | // draw hour lines 167 | for (var i = 0; i < 12; i++) { 168 | context.save(); 169 | context.rotate(i * 30 * degreesToRadians - (60 * degreesToRadians)); 170 | context.beginPath(); 171 | context.moveTo(0, clockRadius); 172 | context.lineTo(0, clockRadius * 0.95); 173 | 174 | 175 | context.stroke(); 176 | context.closePath(); 177 | context.restore(); 178 | 179 | }; 180 | 181 | // draw minute lines 182 | for (var i = 0; i < 60; i++) { 183 | context.save(); 184 | context.rotate(i * 6 * degreesToRadians ); 185 | context.beginPath(); 186 | context.lineWidth = 0.5 187 | context.moveTo(0, clockRadius); 188 | context.lineTo(0, clockRadius * 0.95); 189 | context.stroke(); 190 | context.closePath(); 191 | context.restore(); 192 | }; 193 | } 194 | 195 | // draw any pointer, the pointerType must be a key of the pointers dictionary 196 | function drawPointer(pointerType) { 197 | 198 | context.save(); 199 | context.arc(0, 0, pointerCircleRadius, 0, 2 * Math.PI, false); 200 | context.lineWidth = 5; 201 | context.fillStyle = pointers[pointerType].color; 202 | context.strokeStyle = pointers[pointerType].color; 203 | context.fill(); 204 | context.restore(); 205 | 206 | context.save(); 207 | context.rotate(pointers[pointerType].getTimeRotation()); 208 | context.lineWidth = pointers[pointerType].width; 209 | context.beginPath(); 210 | context.strokeStyle = pointers[pointerType].color; 211 | context.moveTo(0, pointers[pointerType].length.start * clockRadius) 212 | context.lineTo(0, -clockRadius * pointers[pointerType].length.end) 213 | context.stroke(); 214 | context.closePath(); 215 | 216 | context.restore(); 217 | 218 | } 219 | 220 | function drawImages() { 221 | drawMan("../img/run-frames/run-1.png", context, { x: -240, y: -80}); 222 | drawSun("../img/sun.png", context, { x: 30, y: -80}); 223 | } 224 | 225 | function drawNumbers() { 226 | 227 | // text 228 | for (var i = 0; i < 12; i++) { 229 | context.save(); 230 | context.fillStyle = "black"; 231 | context.font = "50px Georgia"; 232 | context.fillText(numberSymbols[i], numberCoords[i].x, numberCoords[i].y); 233 | context.restore(); 234 | } 235 | 236 | } 237 | 238 | function tick() { 239 | 240 | var currentTime = new Date() 241 | pointers.second.currentTimeValue = currentTime.getSeconds(); 242 | pointers.minute.currentTimeValue = currentTime.getMinutes() + (pointers.second.currentTimeValue / 60); 243 | pointers.hour.currentTimeValue = currentTime.getHours() + (pointers.minute.currentTimeValue / 60); 244 | 245 | drawFrame(); 246 | drawImages(); 247 | drawNumbers(); 248 | drawPointer("hour"); 249 | drawPointer("minute"); 250 | drawPointer("second"); 251 | 252 | requestAnimationFrame(tick); 253 | } 254 | 255 | tick(); 256 | --------------------------------------------------------------------------------