aparler/RosettaCodeData
1
0
Fork 0
Code Issues 12 Pull requests 3 Projects Releases Packages Wiki Activity Actions

June 2018 Update

Browse source
This commit is contained in:
Ingy döt Net 2018-06-22 20:57:24 +00:00
parent ba8067c3b7
commit 22f33d4004
5278 changed files with 84726 additions and 14379 deletions
Download patch file Download diff file Expand all files Collapse all files

84
Task/Draw-a-clock/JavaScript/draw-a-clock-2.js
View file

@ -1,69 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
canvas {
background-color: black;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
var canvas = document.querySelector("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.addEventListener("click", function () {
colorIndex = (colorIndex + 1) % colors.length;
});
var g = canvas.getContext("2d");
var colors = [
{ on: "#00FF00", off: "#002200" },
{ on: "#FF0000", off: "#220000" },
{ on: "#0000FF", off: "#000033" }
];
// which leds are on or off for each digit
var masks = ["1110111", "0010010", "1011101", "1011011", "0111010",
"1101011", "1101111", "1010010", "1111111", "1111011"];
// 0, 0 is upper left; these relative units are multiplied by the size value later
var startingPoints = [
[0, 0], [0, 0], [8, 0], [0, 8], [0, 8], [8, 8], [0, 16]
];
var isHorizontal = [1, 0, 0, 1, 0, 0, 1]; // bool
// horizontal and vertical layouts in scalable units
var vertices = [
[
// horizontal
[0, 0], [1, 1], [7, 1], [8, 0], [7, -1], [1, -1]
],
[
// vertical
[0, 0], [-1, 1], [-1, 7], [0, 8], [1, 7], [1, 1]
]
];
// pixel values, to create small gaps between the elements (leds)
var offsets = [
[0, -1], [-1, 0], [1, 0], [0, 1], [-1, 2], [1, 2], [0, 3]
]
function Led(x, y, idx, ox, oy) {
// starting points in scalable units
this.x = x;
this.y = y;
var onColor, offColor, colorIndex = 0;
// horizontal or vertical layout
this.idx = idx;
function drawDigitalClock(x, y, size) {
// pixel values to create small gaps between the leds
this.offset_x = ox;
this.offset_y = oy;
}
onColor = colors[colorIndex].on;
offColor = colors[colorIndex].off;
var leds = [];
leds.push(new Led(0, 0, 0, 0, -1));
leds.push(new Led(0, 0, 1, -1, 0));
leds.push(new Led(8, 0, 1, 1, 0));
leds.push(new Led(0, 8, 0, 0, 1));
leds.push(new Led(0, 8, 1, -1, 2));
leds.push(new Led(8, 8, 1, 1, 2));
leds.push(new Led(0, 16, 0, 0, 3));
var onColor, offColor;
function drawDigitalClock(color1, color2, size) {
var clockWidth = (6 * 15 + 2 * 10) * size;
var clockHeight = 20 * size;
var x = (canvas.width - clockWidth) / 2;
var y = (canvas.height - clockHeight) / 2;
onColor = color1;
offColor = color2;
g.clearRect(0, 0, canvas.width, canvas.height);
@ -83,8 +83,8 @@
var digit1 = Math.floor(timeUnit / 10);
var digit2 = timeUnit % 10;
x = drawElements(x, y, size, masks[digit1]);
x = drawElements(x, y, size, masks[digit2]);
x = drawLeds(x, y, size, masks[digit1]);
x = drawLeds(x, y, size, masks[digit2]);
return x;
}
@ -98,23 +98,22 @@
return x + size * 10;
}
function drawElements(x, y, size, mask) {
function drawLeds(x, y, size, mask) {
startingPoints.forEach(function (point, i) {
leds.forEach(function (led, i) {
g.fillStyle = mask[i] == '1' ? onColor : offColor;
var xx = x + point[0] * size + offsets[i][0];
var yy = y + point[1] * size + offsets[i][1];
var idx = isHorizontal[i] ? 0 : 1;
var xx = x + led.x * size + led.offset_x;
var yy = y + led.y * size + led.offset_y;
drawElement(xx, yy, size, vertices[idx]);
drawLed(xx, yy, size, vertices[led.idx]);
});
return x + size * 15;
}
function drawElement(x, y, size, vertices) {
function drawLed(x, y, size, vertices) {
g.beginPath();
g.moveTo(x, y);
@ -127,9 +126,8 @@
g.fill();
}
setInterval(drawDigitalClock, 1000, 140, 200, 12);
setInterval(drawDigitalClock, 1000, "#00FF00", "#002200", 12);
</script>
</body>
</html>