1const canvas = document.getElementById("livestream_of_a_mountain_rebuilding_itself_canvas");
2const ctx = canvas.getContext("2d", { willReadFrequently: true });
3const initial_time = new Date();
4
5ctx.canvas.width = window.innerWidth * 0.28;
6ctx.canvas.height = window.innerHeight * 0.28;
7
8var offset_magnitude = -0.4;
9var framesSinceTap = 0;
10var framesTapLasts = 4;
11var x_tap_position = Math.floor(ctx.canvas.width / 2.0);
12var y_tap_position = Math.floor(ctx.canvas.height / 2.0);
13
14function getCursorPosition(canvas, e) {
15    const rect = canvas.getBoundingClientRect();
16    const x = event.clientX - rect.left;
17    const y = event.clientY - rect.top;
18    x_tap_position = Math.floor((x / rect.right) * ctx.canvas.width);
19    y_tap_position = Math.floor((y / rect.bottom) * ctx.canvas.height);
20}
21
22canvas.addEventListener('mousemove', function(e) {
23    framesSinceTap = 0;
24    getCursorPosition(canvas, e);
25})
26
27function startDrawing() {
28
29    var date = Date.now();
30    date = date / 2000.0;
31    
32    var frame = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
33    var frame_original = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
34    var edge_fade_distance = (6 * (Math.sin((Date.now() / 6400)) + 1)) + 8;
35
36    function setPixel(x, y, red, green, blue, alpha) {
37        var index_position = (x + (y * ctx.canvas.width)) * 4;
38        frame.data[index_position] = red;
39        frame.data[index_position + 1] = green;
40        frame.data[index_position + 2] = blue;
41        frame.data[index_position + 3] = alpha;
42    }
43
44    var center_x = Math.floor(ctx.canvas.width * 0.5);
45    var center_y = Math.floor(ctx.canvas.height * 0.5);
46    center_y = Math.floor(center_y + (offset_magnitude * 0.2));
47
48    /* Feedback loop on noise */
49    for (let i = 0; i < ctx.canvas.width; i++) {
50        for (let j = 0; j < ctx.canvas.height; j++) {
51        
52            var x_position = i;
53
54            if (center_x < i) {
55                x_position = Math.max(i - 2, 0);
56            } else if (center_x > i) {
57                x_position = Math.min(i + 2, ctx.canvas.width)
58            }
59            
60            var y_position = j;
61            
62            if (center_y < j) {
63                y_position = Math.max(j - 2 - (offset_magnitude * 0.00004), 0);
64            } else if (center_y > j) {
65                y_position = Math.min(j + 2 + (offset_magnitude * 0.00004), ctx.canvas.height);
66            }
67
68            var index_position = Math.floor((x_position + (y_position * ctx.canvas.width)) * 4);
69
70            var getRed = frame_original.data[index_position];
71            var getGreen = frame_original.data[index_position + 1];
72            var getBlue = frame_original.data[index_position + 2];
73            var getAlpha = frame_original.data[index_position + 3];
74
75            setPixel(i, j, getRed, getGreen, getBlue, getAlpha);
76        }
77    }
78
79    /* Add pixel wherever user touched */
80    if (framesSinceTap < framesTapLasts) {
81        var getRed = Math.ceil((Math.sin(Date.now() * 0.0021) + 1.0) * 32.0) * 8;
82        var getGreen = Math.ceil((Math.sin(Date.now() * 0.0004) + 1.0) * 32.0) * 8;
83        var getBlue = 256;
84        
85        setPixel(x_tap_position, y_tap_position, 0, 0, 0, 256);
86        setPixel(x_tap_position + 1, y_tap_position, 0, 0, 0, 256);
87        setPixel(x_tap_position + 1, y_tap_position - 1, getRed, getGreen, getBlue, 256);
88        setPixel(x_tap_position - 1, y_tap_position, getRed, getGreen, getBlue, 256);
89        setPixel(x_tap_position - 1, y_tap_position + 1, getRed, getGreen, getBlue, 256);
90        setPixel(x_tap_position - 2, y_tap_position, getRed, getGreen, getBlue, 256);
91        setPixel(x_tap_position - 2, y_tap_position + 2, getRed, getGreen, getBlue, 256);
92        setPixel(x_tap_position - 3, y_tap_position + 3, getRed, getGreen, getBlue, 256);
93        
94        setPixel((ctx.canvas.width - x_tap_position), y_tap_position, 0, 0, 0, 256);
95        setPixel((ctx.canvas.width - x_tap_position - 1), y_tap_position, 0, 0, 0, 256);
96        setPixel((ctx.canvas.width - x_tap_position - 3), y_tap_position + 2, 256, 256, 256, 256);
97        setPixel((ctx.canvas.width - x_tap_position + 1), y_tap_position, getRed, getGreen, getBlue, 256);
98        setPixel((ctx.canvas.width - x_tap_position + 2), y_tap_position + 2, getRed, getGreen, getBlue, 256);
99    }
100
101    /* Generate noise in center */
102    var x_width = Math.floor((1 + Math.sin(Date.now() * 0.00008)) * 4)
103    var y_width = Math.floor(((1 + Math.sin(Date.now() * 0.00028)) * 25) + Math.abs(offset_magnitude * 0.04))
104    var y_noise_offset = Math.floor(((1 + Math.sin(Date.now() * 0.00005)) * 29) + Math.abs(offset_magnitude * 0.09))
105
106    // Fix: If it's the first few seconds, make sure there is something on the screen
107    var current_time = new Date();
108
109    if (current_time - initial_time < 1600) {
110        x_width = Math.max(x_width, 1)
111        y_width = Math.max(y_width, 1);
112        y_noise_offset = Math.floor(y_noise_offset * 0.25)
113    }
114
115    for (let i = center_x - x_width; i < center_x + x_width; i++) {
116        for (let j = center_y - y_width; j < center_y + y_width; j++) {
117            var thisdate = Date.now();
118            var splitseconds = thisdate * 0.0004;
119            var getRed = Math.ceil((Math.sin(splitseconds + i + j + i + j) + 1.0) * 32.0) * 8;
120            var getGreen = Math.ceil((Math.sin(splitseconds + 1.1 - i - j - j) + 1.0) * 32.0) * 8;
121            var getBlue = 256;
122
123            // If it's the first 4800 milliseconds, do black/white
124            if (current_time - initial_time < 4800) {
125                var getRG = (getRed + getGreen);
126                if (getRG > 256) {
127                    getRG = 256;
128                } else {
129                    getRG = 0;
130                }
131                getRed = getRG;
132                getGreen = getRG;
133                getBlue = getRG;
134            }
135            setPixel(i, Math.min(j + y_noise_offset, ctx.canvas.height), getRed, getGreen, getBlue, 256);
136        }
137    }
138    framesSinceTap = framesSinceTap + 1;
139    ctx.putImageData(frame, 0, 0)
140}
141
142let startAnim = setInterval(startDrawing, 80);

1// Find the <canvas> element, then save it as a variable named "canvas"
2const canvas = document.getElementById("canvas_element_241229");
3
4// Initialize the canvas
5// Since we are animating the canvas and constantly refreshing it,
6// we'll set willReadFrequently to true.
7const ctx = canvas.getContext("2d", { willReadFrequently: true });
8
9// Set the canvas width and height (in pixels)
10ctx.canvas.width = 320;
11ctx.canvas.height = 120;
12
13// This function updates the <canvas> element with a new image
14function updateCanvas() {
15  
16  // Get the current system time and save it in a variable.
17  // Date.now() is a built-in Javascript function that returns
18  // the number of milliseconds since January 1, 1970.
19  // For more info, see https://en.wikipedia.org/wiki/Unix_time
20  var unix_time_in_milliseconds = Date.now();
21
22  // Save the prior frame in a variable -- we *will not* modify prior_frame
23  var prior_frame = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
24
25  // Save the new frame in a variable -- we *will* modify new_frame
26  var new_frame = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
27  
28  // This function takes an x and y position, 
29  // and turns it into an index of the image array.
30  // Example: getPixelIndex(5, 3) returns 3092
31  function getPixelIndex(x_position, y_position) {
32    return (x_position + y_position * ctx.canvas.width) * 4;
33  }
34
35  // This function sets a pixel at a given x and y position
36  // to a color given as RGBA values -- red, green, blue, alpha
37  // We don't need this function, but it helps make the code
38  // we'll write later easier to read and write.
39  function setPixel(
40    x_position,
41    y_position,
42    red_channel,
43    green_channel,
44    blue_channel,
45    alpha_channel
46  ) {
47    var index_position = getPixelIndex(x_position, y_position);
48    new_frame.data[index_position] = red_channel;
49    new_frame.data[index_position + 1] = green_channel;
50    new_frame.data[index_position + 2] = blue_channel;
51    new_frame.data[index_position + 3] = alpha_channel;
52  }
53
54  var i_minimum_range = 0; // Default: 0
55  var i_maximum_range = ctx.canvas.width;
56  var i_increment = 1; // Default: 1
57
58  var j_minimum_range = 0;
59  var j_maximum_range = ctx.canvas.height;
60  var j_increment = 1; // Default: 1
61 
62  var midpoint_x = ctx.canvas.width / 2.0;
63  var midpoint_y = ctx.canvas.height / 2.0;
64
65  for (i = i_minimum_range; i < i_maximum_range; i = i + i_increment) {
66    for (j = j_minimum_range; j < j_maximum_range; j = j + j_increment) {
67      
68      var lfo_min = (((Math.sin(unix_time_in_milliseconds * 0.0017) + 1.0) * 0.5) / 3.0) + 0.4;
69      var lfo_max = 1.0 - lfo_min;
70      
71      var lfo_factorial = ((Math.sin(unix_time_in_milliseconds * 0.001)) + 1.2) + 1.0;
72      
73      var new_luminance_value = (i > ctx.canvas.width * lfo_min) * (i < ctx.canvas.width * lfo_max) * (j > ctx.canvas.height * lfo_min) * (j < ctx.canvas.height * lfo_max) * (Math.sin(unix_time_in_milliseconds * 0.0012) * 300.0);
74        
75      new_luminance_value = new_luminance_value + ((prior_frame.data[getPixelIndex(i+1-((i>midpoint_x) * 2.0), j+1-(j>midpoint_y) * 3.0)] * (j % lfo_factorial)) * 1.8);
76      
77      var new_red_value = new_luminance_value * lfo_factorial * 1.5;
78      var new_green_value = new_luminance_value;
79      var new_blue_value = new_luminance_value;
80      var new_alpha_value = new_luminance_value;
81
82      setPixel(i, j, new_red_value, new_green_value, new_blue_value, new_alpha_value);
83    }
84  }
85
86  // Now that we're done calculating the new image,
87  // we can insert it into the <canvas> element
88  ctx.putImageData(new_frame, 0, 0);
89}
90
91// Now that all the functions are written, we can set a timer
92// to call on the updateCanvas() function every 80 milliseconds.
93let startAnimation = setInterval(updateCanvas, 60);

1// Find the <canvas> element, then save it as a variable named "canvas"
2const canvas = document.getElementById("canvas_element_250105");
3
4// Initialize the canvas
5// Since we are animating the canvas and constantly refreshing it,
6// we'll set willReadFrequently to true.
7const ctx = canvas.getContext("2d", { willReadFrequently: true });
8
9// Set the canvas width and height (in pixels)
10ctx.canvas.width = 240;
11ctx.canvas.height = 120;
12
13// This function updates the <canvas> element with a new image
14function updateCanvas() {
15  
16  // Get the current system time and save it in a variable.
17  // Date.now() is a built-in Javascript function that returns
18  // the number of milliseconds since January 1, 1970.
19  // For more info, see https://en.wikipedia.org/wiki/Unix_time
20  var unix_time_in_milliseconds = Date.now();
21
22  // Save the prior frame in a variable -- we *will not* modify prior_frame
23  var prior_frame = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
24
25  // Save the new frame in a variable -- we *will* modify new_frame
26  var new_frame = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
27  
28  // This function takes an x and y position, 
29  // and turns it into an index of the image array.
30  // Example: getPixelIndex(5, 3) returns 3092
31  function getPixelIndex(x_position, y_position) {
32    return (x_position + y_position * ctx.canvas.width) * 4;
33  }
34
35  // This function sets a pixel at a given x and y position
36  // to a color given as RGBA values -- red, green, blue, alpha
37  // We don't need this function, but it helps make the code
38  // we'll write later easier to read and write.
39  function setPixel(
40    x_position,
41    y_position,
42    red_channel,
43    green_channel,
44    blue_channel,
45    alpha_channel
46  ) {
47    var index_position = getPixelIndex(x_position, y_position);
48    new_frame.data[index_position] = red_channel;
49    new_frame.data[index_position + 1] = green_channel;
50    new_frame.data[index_position + 2] = blue_channel;
51    new_frame.data[index_position + 3] = alpha_channel;
52  }
53
54
55  for (i = 0; i < ctx.canvas.width; i = i + 1) {
56    for (j = 0; j < ctx.canvas.height; j = j + 1) {
57      
58      var polarity = ((i < ctx.canvas.width / 2) * 2) - 1;
59      
60      var slow_sin_wave = Math.floor(Math.sin(unix_time_in_milliseconds * 0.0004) * 9.6) * 1.0;
61      
62      var new_luminance_value = (Math.sin(((i) + (j) + 1) + (prior_frame.data[getPixelIndex(j + polarity, (j) + slow_sin_wave) * 0.5] * 0.011 * polarity)) * 256);
63      
64      var new_red_value = (Math.sin(((1) + (j / 2) - 2) + (prior_frame.data[getPixelIndex(j - polarity, j) + slow_sin_wave] * 0.014 * polarity)) * 256);
65      var new_green_value = new_luminance_value;
66      var new_blue_value = 128 - new_red_value;
67      var new_alpha_value = new_luminance_value * 1.8;
68
69      setPixel(i, j, new_red_value, new_green_value, new_blue_value, new_alpha_value);
70    }
71  }
72
73  // Now that we're done calculating the new image,
74  // we can insert it into the <canvas> element
75  ctx.putImageData(new_frame, 0, 0);
76}
77
78// Now that all the functions are written, we can set a timer
79// to call on the updateCanvas() function every 80 milliseconds.
80let startAnimation = setInterval(updateCanvas, 60);

1// Find the <canvas> element, then save it as a variable named "canvas"
2const canvas = document.getElementById("canvas_element_250109");
3
4// Initialize the canvas
5// Since we are animating the canvas and constantly refreshing it,
6// we'll set willReadFrequently to true.
7const ctx = canvas.getContext("2d", { willReadFrequently: true });
8
9// Set the canvas width and height (in pixels)
10ctx.canvas.width = 240;
11ctx.canvas.height = 120;
12
13// This function updates the <canvas> element with a new image
14function updateCanvas() {
15  
16  // Get the current system time and save it in a variable.
17  // Date.now() is a built-in Javascript function that returns
18  // the number of milliseconds since January 1, 1970.
19  // For more info, see https://en.wikipedia.org/wiki/Unix_time
20  var unix_time_in_milliseconds = Date.now();
21
22  // Save the prior frame in a variable -- we *will not* modify prior_frame
23  var prior_frame = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
24
25  // Save the new frame in a variable -- we *will* modify new_frame
26  var new_frame = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
27  
28  // This function takes an x and y position, 
29  // and turns it into an index of the image array.
30  // Example: getPixelIndex(5, 3) returns 3092
31  function getPixelIndex(x_position, y_position) {
32    return (x_position + y_position * ctx.canvas.width) * 4;
33  }
34
35  // This function sets a pixel at a given x and y position
36  // to a color given as RGBA values -- red, green, blue, alpha
37  // We don't need this function, but it helps make the code
38  // we'll write later easier to read and write.
39  function setPixel(
40    x_position,
41    y_position,
42    red_channel,
43    green_channel,
44    blue_channel,
45    alpha_channel
46  ) {
47    var index_position = getPixelIndex(x_position, y_position);
48    new_frame.data[index_position] = red_channel;
49    new_frame.data[index_position + 1] = green_channel;
50    new_frame.data[index_position + 2] = blue_channel;
51    new_frame.data[index_position + 3] = alpha_channel;
52  }
53
54
55  for (i = 0; i < ctx.canvas.width; i = i + 1) {
56    for (j = 0; j < ctx.canvas.height; j = j + 1) {
57      var new_red_value = Math.floor(Math.sin(i + unix_time_in_milliseconds * 0.00017 * (j + 10)) * 2) * 256;
58      var new_green_value = new_red_value;
59      var new_blue_value = 256;
60      var new_alpha_value = 256;
61
62      setPixel(i, j, new_red_value, new_green_value, new_blue_value, new_alpha_value);
63    }
64  }
65
66  // Now that we're done calculating the new image,
67  // we can insert it into the <canvas> element
68  ctx.putImageData(new_frame, 0, 0);
69}
70
71// Now that all the functions are written, we can set a timer
72// to call on the updateCanvas() function every 80 milliseconds.
73let startAnimation = setInterval(updateCanvas, 60);

1const canvas = document.getElementById("canvas_element_250128");
2const ctx = canvas.getContext("2d", { willReadFrequently: true });
3const initial_time = new Date();
4
5ctx.canvas.width = window.innerWidth * 0.3;
6ctx.canvas.height = window.innerHeight * 0.3;
7
8var offset_magnitude = -0.4;
9var framesSinceTap = 0;
10var framesTapLasts = 4;
11var x_tap_position = Math.floor(ctx.canvas.width / 2.0);
12var y_tap_position = Math.floor(ctx.canvas.height / 2.0);
13
14function getCursorPosition(canvas, e) {
15    const rect = canvas.getBoundingClientRect();
16    const x = event.clientX - rect.left;
17    const y = event.clientY - rect.top;
18    x_tap_position = Math.floor((x / rect.right) * ctx.canvas.width);
19    y_tap_position = Math.floor((y / rect.bottom) * ctx.canvas.height);
20}
21
22canvas.addEventListener('mousemove', function(e) {
23    framesSinceTap = 0;
24    getCursorPosition(canvas, e);
25})
26
27function startDrawing() {
28
29    var date = Date.now();
30    date = date / 2000.0;
31    
32    var frame = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
33    var frame_original = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
34    var edge_fade_distance = (6 * (Math.sin((Date.now() / 6400)) + 1)) + 8;
35
36    function setPixel(x, y, red, green, blue, alpha) {
37        var index_position = (x + (y * ctx.canvas.width)) * 4;
38        frame.data[index_position] = red;
39        frame.data[index_position + 1] = green;
40        frame.data[index_position + 2] = blue;
41        frame.data[index_position + 3] = alpha;
42    }
43
44    var center_x = Math.floor(ctx.canvas.width * 0.5);
45    var center_y = Math.floor(ctx.canvas.height * 0.3);
46
47    /* Feedback loop on noise */
48    for (let i = 0; i < ctx.canvas.width; i++) {
49        for (let j = 0; j < ctx.canvas.height; j++) {
50        
51            var x_position = i * 10;
52
53            if (center_x < i) {
54                x_position = Math.max(i - 5, 0);
55            } else if (center_x > i) {
56                x_position = Math.min(i + 5, ctx.canvas.width)
57            }
58            
59            var y_position = j;
60            
61            if (1==1) {
62                y_position = j - Math.floor(((i * 0.1) % 2) * (1.0 + (Math.tan(Date.now() * -0.00002) + 1.2) * 2.0));
63            } else if (center_y > j) {
64                y_position = Math.min(j + 2 + (offset_magnitude * 0.00004), ctx.canvas.height);
65            }
66
67            var index_position = Math.floor((x_position + (y_position * ctx.canvas.width)) * 4);
68
69            var getRed = frame_original.data[index_position];
70            var getGreen = frame_original.data[index_position + 1];
71            var getBlue = frame_original.data[index_position + 2];
72            var getAlpha = frame_original.data[index_position + 3];
73
74            setPixel(i, j, getRed, getGreen, getBlue, getAlpha);
75        }
76    }
77
78    /* Add pixel wherever user touched */
79    if (framesSinceTap < framesTapLasts) {
80        var getRed = Math.ceil((Math.sin(Date.now() * 0.0021) + 1.0) * 32.0) * 8;
81        var getGreen = Math.ceil((Math.sin(Date.now() * 0.0004) + 1.0) * 32.0) * 8;
82        var getBlue = 256;
83       
84      
85        setPixel(x_tap_position, y_tap_position, 0, 0, 0, 256);
86        setPixel(x_tap_position + 1, y_tap_position, 0, 0, 0, 256);
87        setPixel(x_tap_position + 1, y_tap_position - 1, getRed, getGreen, getBlue, 256);
88        setPixel(x_tap_position - 1, y_tap_position, getRed, getGreen, getBlue, 256);
89        setPixel(x_tap_position - 1, y_tap_position + 1, getRed, getGreen, getBlue, 256);
90        setPixel(x_tap_position - 2, y_tap_position, getRed, getGreen, getBlue, 256);
91        setPixel(x_tap_position - 2, y_tap_position + 2, getRed, getGreen, getBlue, 256);
92        setPixel(x_tap_position - 3, y_tap_position + 3, getRed, getGreen, getBlue, 256);
93        
94        setPixel((ctx.canvas.width - x_tap_position), y_tap_position, 0, 0, 0, 256);
95        setPixel((ctx.canvas.width - x_tap_position - 1), y_tap_position, 0, 0, 0, 256);
96        setPixel((ctx.canvas.width - x_tap_position - 3), y_tap_position + 2, 256, 256, 256, 256);
97        setPixel((ctx.canvas.width - x_tap_position + 1), y_tap_position, getRed, getGreen, getBlue, 256);
98        setPixel((ctx.canvas.width - x_tap_position + 2), y_tap_position + 2, getRed, getGreen, getBlue, 256);
99    }
100
101    /* Generate noise in center */
102    var x_width = Math.floor((1 + Math.sin(Date.now() * 0.00008)) * 4)
103    var y_width = Math.floor(((1 + Math.sin(Date.now() * 0.00028)) * 25) + Math.abs(offset_magnitude * 0.04))
104    var y_noise_offset = Math.floor(((1 + Math.sin(Date.now() * 0.00005)) * 29) + Math.abs(offset_magnitude * 0.09))
105
106    // Fix: If it's the first few seconds, make sure there is something on the screen
107    var current_time = new Date();
108
109    if (current_time - initial_time < 2400) {
110        x_width = Math.max(x_width, 1)
111        y_width = Math.max(y_width, 1);
112        y_noise_offset = Math.floor(y_noise_offset * 0.25)
113    }
114
115    for (let i = center_x - x_width; i < center_x + x_width; i++) {
116        for (let j = center_y - y_width; j < center_y + y_width; j++) {
117            var thisdate = Date.now();
118            var splitseconds = thisdate * 0.0004;
119            var getRed = Math.ceil((Math.sin(splitseconds + i + j + i + j) + 1.0) * 32.0) * 8;
120            var getGreen = Math.ceil((Math.sin(splitseconds + 1.1 - i - j - j) + 1.0) * 32.0) * 8;
121            var getBlue = 256;
122
123            // If it's the first 4800 milliseconds, do black/white
124            if (current_time - initial_time < 4800) {
125                var getRG = (getRed + getGreen);
126                if (getRG > 256) {
127                    getRG = 256;
128                } else {
129                    getRG = 0;
130                }
131                getRed = getRG;
132                getGreen = getRG;
133                getBlue = getRG;
134            }
135          
136            setPixel(i, Math.min(j + y_noise_offset, ctx.canvas.height), getRed, getGreen, getBlue, 256);
137        }
138    }
139 
140    framesSinceTap = framesSinceTap + 1;
141    ctx.putImageData(frame, 0, 0)
142}
143
144let startAnim = setInterval(startDrawing, 80);