-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
115 lines (99 loc) · 3.05 KB
/
index.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
const copyToCanvas = image => {
const canvas = document.createElement('canvas');
canvas.width = image.naturalWidth || image.width;
canvas.height = image.naturalHeight || image.height;
canvas.ctx = canvas.getContext('2d');
canvas.ctx.drawImage(image, 0, 0);
return canvas;
};
const getNewChannelData = (channelName, data) => {
let newChannelData = data.map((element, index) => {
if (channelName === 'red' && (index % 4 === 1 || index % 4 === 2)) {
return (element = 0);
} else if (channelName === 'green' && (index % 4 === 0 || index % 4 === 2)) {
return (element = 0);
} else if (channelName === 'blue' && (index % 4 === 0 || index % 4 === 1)) {
return (element = 0);
} else {
return element;
}
});
return newChannelData;
};
const getChannel = (channelName, image) => {
const copy = copyToCanvas(image);
const ctx = copy.ctx;
const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
const data = imageData.data;
const newImageData = getNewChannelData(channelName, data);
data.set(newImageData);
ctx.putImageData(imageData, 0, 0);
return copy;
};
const channels = image => {
return {
red: getChannel('red', image),
green: getChannel('green', image),
blue: getChannel('blue', image),
};
};
const createCanvas = (w, h) => {
const canvas = document.createElement('canvas');
canvas.width = w - 6;
canvas.height = h - 6;
canvas.ctx = canvas.getContext('2d');
return canvas;
};
const image = document.querySelector('#source-image');
const output = document.querySelector('.output');
function loaded() {
const RGB = channels(image);
const newCanvas = createCanvas(RGB.red.width, RGB.red.height);
output.append(newCanvas);
const ctx = newCanvas.ctx;
const w = ctx.canvas.width;
const h = ctx.canvas.height;
ctx.globalCompositeOperation = 'screen';
let fps, fpsInterval, startTime, now, then, elapsed;
const animate = () => {
// calc elapsed time since last loop
now = Date.now();
elapsed = now - then;
// if enough time has elapsed, draw the next frame
if (elapsed > fpsInterval) {
// Get ready for next frame by setting then=now, but...
// Also, adjust for fpsInterval not being multiple of 16.67
then = now - elapsed % fpsInterval;
// draw stuff here
ctx.save();
ctx.clearRect(0, 0, w, h);
let angle = 0;
let cx = 6;
let cy = 6;
let radius = 3;
angle += 1;
let x = cx + radius * Math.cos(angle);
let y = cy + radius * Math.sin(angle);
ctx.drawImage(RGB.red, Math.floor(x * Math.random()), Math.floor(y * Math.random()));
ctx.drawImage(RGB.green, Math.floor(x * Math.random()), Math.floor(y * Math.random()));
ctx.drawImage(RGB.blue, Math.floor(x * Math.random()), Math.floor(y * Math.random()));
ctx.restore();
}
requestAnimationFrame(animate);
};
const startAnimating = fps => {
fpsInterval = 1000 / fps;
then = Date.now();
startTime = then;
animate();
};
startAnimating(8);
}
if (image.complete) {
loaded();
} else {
image.addEventListener('load', loaded);
image.addEventListener('error', function() {
alert('Error, image could not be loaded');
});
}