forked from CrowdCurio/audio-annotator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
hidden_image.js
149 lines (128 loc) · 5.44 KB
/
hidden_image.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
'use strict';
/*
* Purpose:
* Create a img with a canvas over it, so you can slowly show random
* parts of the image
* Dependencies:
* None
*/
function HiddenImg(container, height, width) {
this.container = document.querySelector(container);
this.canvas = null;
this.height = height;
this.width = this.container.offsetWidth;
this.shuffleTitles = [];
}
HiddenImg.prototype = {
// Create image, image container and canva elements
create: function() {
this.canvas = document.createElement('canvas');
this.canvas.style.zIndex = 1;
this.canvas.style.position = 'relative';
this.cover = this.canvas.getContext('2d');
this.cover.canvas.height = this.height;
this.cover.canvas.width = this.width;
this.imageContainer = document.createElement('div');
this.imageContainer.style.height = this.height + 'px';
this.imageContainer.style.width = this.width + 'px';
this.imageContainer.style.position = 'absolute';
this.imageContainer.style.top = 0;
this.imageContainer.style.overflow = 'hidden';
this.image = document.createElement('img');
this.image.style.width = '100%';
this.image.style.height = '100%';
this.image.style.position = 'absolute';
},
// Appends the image, image container and canvas html elements to the container on
// the page. Also modifies the container's style.
append: function(url) {
this.container.style.position = 'relative';
this.container.style.overflowX = 'auto';
this.container.style.border = '1px dashed black';
this.container.style.boxSizing = 'content-box';
this.container.appendChild(this.canvas);
this.container.appendChild(this.imageContainer);
this.imageContainer.appendChild(this.image);
this.reset(url);
},
// Removes the image, image container and canvas elements from the container and resets
// the containers style.
remove: function() {
this.container.removeAttribute('style');
this.container.removeChild(this.canvas);
this.container.removeChild(this.imageContainer);
this.imageContainer.removeChild(this.image);
},
// Reset the canvas element to cover the whole image and
// add back the blur style to the image element
resetCover: function() {
this.cover.fillStyle = 'white';
this.cover.fillRect(0, 0, this.width, this.height);
this.cover.fillStyle = 'black';
this.cover.font = 'italic 30px Arial';
this.image.style['filter'] = 'blur(2px)';
this.image.style['-webkit-filter'] = 'blur(2px)';
},
// Add text in the middle of the canvas to prompt the user to complete the task
resetText: function () {
this.cover.textAlign = 'center';
this.cover.textBaseline = 'middle';
this.cover.fillText('Find all the sounds to reveal what city this clip comes from.', this.width / 2, this.height / 2);
},
// Reset the cover, text and image source. It also re shuffles
// what parts of the canvas will be cleared
reset: function(url) {
this.resetCover();
this.resetText();
this.image.src = url;
var tiles = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
this.shuffleTitles = this.shuffle(tiles);
},
// Remove blur style from image and clear the canva colour to display the image hidden behind it
showImage: function() {
this.image.style['filter'] = 'blur(0px)';
this.image.style['-webkit-filter'] = 'blur(0px)';
this.cover.clearRect(0, 0, this.width, this.height);
},
// Write a city's name in the middle of the canvas
writeMessage: function(city) {
this.cover.textAlign = 'center';
this.cover.font = 'italic 50px Arial';
this.cover.strokeStyle = 'black';
this.cover.lineWidth = 5;
this.cover.strokeText(city, this.width / 2, this.height / 2);
this.cover.fillStyle = 'white';
this.cover.fillText(city, this.width / 2, this.height / 2);
},
// The canva is broken into 10 parts. The percent is the number of those parts will be uncovered
showRandomParts: function(percent) {
// Get integer values
var numTilesToShow = Math.floor(percent * 10);
var tileWidth = this.width / this.shuffleTitles.length;
// Clear random sections of the canvas
for (var i = 0; i < numTilesToShow; i++) {
// shuffleTitles is an array of shuffled integers that correspond to what parts of the canva to clear
var left = this.shuffleTitles[i] * tileWidth;
this.cover.clearRect(left, 0, tileWidth, this.height);
}
},
// Randomize the order of elements in an array
shuffle: function(array) {
// Algorithm to shuffle an array
// http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
var currentIndex = array.length;
var temporaryValue = 0;
var randomIndex = 0;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
};