Initial commit
Lee Roy Stevenson committed
May 21, 2025 at 10:09 UTC
2f3040e37522845a37ab637c8bb025643d4be21c
5 files changed
+277
.idea/.gitignore
new
+3
@@ -0,0 +1,3 @@
1
+# Default ignored files
2
+/shelf/
3
+/workspace.xml
.idea/vcs.xml
new
+4
@@ -0,0 +1,4 @@
1
+<?xml version="1.0" encoding="UTF-8"?>
2
+<project version="4">
3
+ <component name="VcsDirectoryMappings" defaultProject="true" />
4
+</project>
\ No newline at end of file
action.js
new
+161
@@ -0,0 +1,161 @@
1
+// Wrap all DOM-dependent code inside a DOMContentLoaded event listener
2
+document.addEventListener('DOMContentLoaded', function() {
3
+ // Get the canvas element and its 2D rendering context
4
+ const canvas = document.getElementById('pixelCanvas');
5
+ const ctx = canvas.getContext('2d');
6
+
7
+ // Text content and properties for the canvas-drawn text
8
+ const mainText = "Dynamic Pixelmap Background";
9
+ const subText = "Watch the colors change!";
10
+ const thirdText = "This text has pixel-level contrast!";
11
+ let fontSizeH1 = 48; // px - will be dynamically adjusted
12
+ let fontSizeP = 24; // px - will be dynamically adjusted
13
+ const fontName = "Inter, sans-serif"; // Ensure font is available or fallback
14
+
15
+ /**
16
+ * Generates a random hexadecimal color code, biased towards darker shades (slightly brighter than before).
17
+ *
18
+ * @returns {string} A random hexadecimal color code (e.g., '#RRGGBB').
19
+ */
20
+ function generateRandomColor() {
21
+ // Limit random byte generation to a darker range (0-150) - adjusted for brighter background
22
+ const getRandomDarkByte = () => Math.floor(Math.random() * 151); // Max value 150
23
+
24
+ const r = getRandomDarkByte();
25
+ const g = getRandomDarkByte();
26
+ const b = getRandomDarkByte();
27
+
28
+ // Helper to convert a number to a two-digit hexadecimal string
29
+ const toHex = (c) => {
30
+ const hex = c.toString(16);
31
+ return hex.length === 1 ? '0' + hex : hex; // Ensure two digits (e.g., 'f' becomes '0f')
32
+ };
33
+
34
+ // Combine RGB components into a full hexadecimal color string
35
+ return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
36
+ }
37
+
38
+ // Function to set up canvas dimensions and handle window resizing
39
+ function resizeCanvas() {
40
+ canvas.width = window.innerWidth;
41
+ canvas.height = window.innerHeight;
42
+
43
+ // Dynamically adjust font sizes based on screen width for responsiveness
44
+ if (canvas.width < 600) {
45
+ fontSizeH1 = 32; // Smaller font for small screens
46
+ fontSizeP = 18;
47
+ } else if (canvas.width < 900) {
48
+ fontSizeH1 = 40; // Medium font for medium screens
49
+ fontSizeP = 22;
50
+ } else {
51
+ fontSizeH1 = 48; // Original font size for large screens
52
+ fontSizeP = 24;
53
+ }
54
+ // No need to clear here, animate will clear and redraw
55
+ }
56
+
57
+ // Define parameters for drawing background pixels
58
+ const pixelSize = 1; // The size (width and height) of each square pixel in pixels (remains 1)
59
+ const pixelsPerFrame = 500; // The number of random background pixels to draw in each animation frame (increased for quicker change)
60
+
61
+ /**
62
+ * Draws a single randomly colored pixel on the canvas.
63
+ * The pixel's position is snapped to a grid defined by `pixelSize`.
64
+ */
65
+ function drawRandomBackgroundPixel() {
66
+ const x = Math.floor(Math.random() * (canvas.width / pixelSize)) * pixelSize;
67
+ const y = Math.floor(Math.random() * (canvas.height / pixelSize)) * pixelSize;
68
+ const color = generateRandomColor();
69
+ ctx.fillStyle = color;
70
+ ctx.fillRect(x, y, pixelSize, pixelSize);
71
+ }
72
+
73
+ /**
74
+ * Draws text on the canvas with pixel-level contrast to the background.
75
+ * This function uses an off-screen canvas to get the text mask.
76
+ */
77
+ function drawContrastingText() {
78
+ // Create an off-screen canvas for text rendering
79
+ const tempCanvas = document.createElement('canvas');
80
+ const tempCtx = tempCanvas.getContext('2d');
81
+ tempCanvas.width = canvas.width;
82
+ tempCanvas.height = canvas.height;
83
+
84
+ // Set text properties for the off-screen canvas
85
+ tempCtx.font = `${fontSizeH1}px ${fontName}`;
86
+ tempCtx.textAlign = 'center';
87
+ tempCtx.textBaseline = 'middle';
88
+ tempCtx.fillStyle = 'black'; // Draw text in black to get a clear mask
89
+
90
+ // Calculate text positions (centered)
91
+ const centerX = canvas.width / 2;
92
+ const centerY = canvas.height / 2;
93
+ // Adjust lineHeight based on current fontSizeH1
94
+ const lineHeight = fontSizeH1 * 1.2; // Approximate line height
95
+
96
+ // Draw text on the off-screen canvas
97
+ tempCtx.fillText(mainText, centerX, centerY - lineHeight);
98
+ tempCtx.font = `${fontSizeP}px ${fontName}`;
99
+ tempCtx.fillText(subText, centerX, centerY);
100
+ tempCtx.fillText(thirdText, centerX, centerY + lineHeight);
101
+
102
+ // Get pixel data from the main canvas (current background)
103
+ const mainImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
104
+ const mainPixels = mainImageData.data;
105
+
106
+ // Get pixel data from the off-screen text canvas (text mask)
107
+ const tempImageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
108
+ const tempPixels = tempImageData.data;
109
+
110
+ // Loop through all pixels
111
+ for (let i = 0; i < mainPixels.length; i += 4) {
112
+ // Check if the pixel on the temporary canvas is part of the text (opaque black)
113
+ if (tempPixels[i + 3] > 0) { // If this pixel is part of the text
114
+ // Get the background color at this pixel position from main canvas
115
+ const bgR = mainPixels[i];
116
+ const bgG = mainPixels[i + 1];
117
+ const bgB = mainPixels[i + 2];
118
+
119
+ // Calculate the inverse color for contrast.
120
+ mainPixels[i] = 255 - bgR;
121
+ mainPixels[i + 1] = 255 - bgG;
122
+ mainPixels[i + 2] = 255 - bgB;
123
+ }
124
+ }
125
+
126
+ // Put the modified pixel data back onto the main canvas
127
+ ctx.putImageData(mainImageData, 0, 0);
128
+ }
129
+
130
+ /**
131
+ * The main animation loop.
132
+ * It draws a set number of random background pixels per frame and then redraws the contrasting text.
133
+ */
134
+ function animate() {
135
+ // Draw multiple background pixels in each frame (accumulating effect)
136
+ for (let i = 0; i < pixelsPerFrame; i++) {
137
+ drawRandomBackgroundPixel();
138
+ }
139
+
140
+ // Draw the contrasting text on top of the background
141
+ drawContrastingText();
142
+
143
+ // Request the next animation frame, creating a smooth loop
144
+ requestAnimationFrame(animate);
145
+ }
146
+
147
+ // Initial setup and animation start
148
+ resizeCanvas(); // Set the initial canvas size and font sizes
149
+ animate(); // Start the pixel drawing animation
150
+
151
+ // Add an event listener to resize the canvas whenever the window is resized
152
+ window.addEventListener('resize', () => {
153
+ resizeCanvas(); // Recalculate canvas size and font sizes
154
+ // On resize, you might want to clear the canvas and immediately redraw text
155
+ // to avoid temporary distortions before the pixels fill in.
156
+ // ctx.clearRect(0, 0, canvas.width, canvas.height); // Optional: clear on resize
157
+ });
158
+
159
+ window.onload = () => setTimeout(wait,5000);
160
+ function wait(){alert("🎉 Surprise! Welcome to the digital party! 🥳")}
161
+});
index.html
new
+35
@@ -0,0 +1,35 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+
4
+<head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Random Pixelmap Background with Content</title>
8
+ <link rel="stylesheet" href="static/style.css">
9
+ <script src="static/action.js"></script>
10
+
11
+
12
+</head>
13
+
14
+<body>
15
+
16
+ <canvas id="pixelCanvas"></canvas>
17
+
18
+ <div class="main-content-container">
19
+ <h2 class="content-title">Welcome to the Dynamic World!</h2>
20
+ <p class="content-paragraph">
21
+ This is a customizable area where you can add your images and text.
22
+ The pixelmap background is active behind this content.
23
+ </p>
24
+
25
+ <img src="https://m.media-amazon.com/images/M/MV5BNjFkNjdiZjUtNzUzNy00NWM5LWFlNDUtNTRiYmJiZWNiYjkwXkEyXkFqcGc@._V1_SX300.jpg" alt="Placeholder Image" class="content-image">
26
+
27
+ <p class="content-paragraph">
28
+ Feel free to add more images, paragraphs, or any other HTML elements here.
29
+ The semi-transparent background ensures good readability.
30
+ </p>
31
+ </div>
32
+
33
+</body>
34
+
35
+</html>
\ No newline at end of file
style.css
new
+74
@@ -0,0 +1,74 @@
1
+body {
2
+ font-family: "Inter", sans-serif;
3
+ margin: 0;
4
+ overflow: hidden; /* Prevent scrollbars if canvas overfills */
5
+ display: flex; /* Use flexbox to center canvas content conceptually */
6
+ justify-content: center;
7
+ align-items: center;
8
+ min-height: 100vh;
9
+ background-color: #000; /* Fallback for body background */
10
+}
11
+
12
+canvas {
13
+ display: block; /* Remove extra space below canvas */
14
+ position: absolute; /* Position the canvas to cover the entire viewport */
15
+ top: 0;
16
+ left: 0;
17
+ /* No z-index needed if canvas is the only visual element */
18
+}
19
+
20
+/* Styles for the new main content container */
21
+.main-content-container {
22
+ position: relative; /* Ensure content is positioned above the canvas */
23
+ z-index: 1; /* Bring content to the front */
24
+ display: flex;
25
+ flex-direction: column;
26
+ justify-content: center;
27
+ align-items: center;
28
+ background-color: rgba(0, 0, 0, 0.2); /* Semi-transparent dark background for contrast */
29
+ border-radius: 12px; /* Rounded corners */
30
+ padding: 30px; /* Padding inside the container */
31
+ margin: 20px; /* Margin from screen edges */
32
+ max-width: 700px; /* Limit width for readability */
33
+ box-shadow: 0 8px 16px rgba(0,0,0,0.4); /* More prominent shadow */
34
+ color: white; /* Default text color for content */
35
+ text-align: center;
36
+ backdrop-filter: blur(3px); /* Optional: subtle blur effect for content behind */
37
+}
38
+
39
+.content-title {
40
+ font-size: 2.5rem; /* text-4xl equivalent */
41
+ font-weight: 700; /* font-bold equivalent */
42
+ margin-bottom: 1rem;
43
+ color: #E0E0E0; /* Slightly off-white for title */
44
+}
45
+
46
+.content-paragraph {
47
+ font-size: 1.1rem; /* text-lg equivalent */
48
+ line-height: 1.6;
49
+ margin-bottom: 1rem;
50
+ color: #F0F0F0; /* Slightly off-white for paragraph */
51
+}
52
+
53
+.content-image {
54
+ max-width: 200px; /* Ensure image is responsive */
55
+ height: auto;
56
+ border-radius: 8px;
57
+ margin-top: 1.5rem;
58
+ margin-bottom: 1.5rem;
59
+ box-shadow: 0 4px 8px rgba(0,0,0,0.2);
60
+}
61
+
62
+/* Responsive adjustments for smaller screens */
63
+@media (max-width: 768px) {
64
+ .main-content-container {
65
+ padding: 20px;
66
+ margin: 10px;
67
+ }
68
+ .content-title {
69
+ font-size: 2rem;
70
+ }
71
+ .content-paragraph {
72
+ font-size: 1rem;
73
+ }
74
+}