Attempt One: PROMPT: Combind this code so that the colors of ASCII art change using a button. the colors are also randomized on page load. CHATGPT. 10/21/2024.
Convert Image to ASCII Art
CODE:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Image to ASCII Art Converter with Color Change</title>
<style>
body {
font-family: monospace;
text-align: center;
padding: 20px;
}
.ascii-art {
white-space: pre;
background-color: #f0f0f0;
padding: 10px;
border-radius: 8px;
margin-top: 20px;
transition: background-color 0.5s ease, color 0.5s ease;
}
</style>
</head>
<body>
<h2>Convert Image to ASCII Art</h2>
<input type=”file” id=”imageUpload” accept=”image/*”>
<br><br>
<canvas id=”canvas” style=”display: none;”></canvas>
<div id=”asciiArt” class=”ascii-art”></div>
<button id=”changeColorButton”>Change ASCII Art Colors</button>
<script>
// ASCII Art Converter Script
const imageUpload = document.getElementById(‘imageUpload’);
const canvas = document.getElementById(‘canvas’);
const asciiArtDiv = document.getElementById(‘asciiArt’);
const ctx = canvas.getContext(‘2d’);
imageUpload.addEventListener(‘change’, function(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function(event) {
const img = new Image();
img.src = event.target.result;
img.onload = function() {
const maxWidth = 100; // Adjust for resolution
const ratio = maxWidth / img.width;
const newHeight = img.height * ratio;
canvas.width = maxWidth;
canvas.height = newHeight;
ctx.drawImage(img, 0, 0, maxWidth, newHeight);
const imageData = ctx.getImageData(0, 0, maxWidth, newHeight);
const asciiArt = convertToAscii(imageData);
asciiArtDiv.innerText = asciiArt;
}
};
reader.readAsDataURL(file);
});
function convertToAscii(imageData) {
const chars = [‘@’, ‘#’, ‘S’, ‘%’, ‘?’, ‘*’, ‘+’, ‘;’, ‘:’, ‘,’, ‘.’]; // Characters for ASCII
const { data, width, height } = imageData;
let ascii = ”;
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const offset = (y * width + x) * 4;
const red = data[offset];
const green = data[offset + 1];
const blue = data[offset + 2];
const brightness = (red + green + blue) / 3;
const charIndex = Math.floor((brightness / 255) * (chars.length – 1));
ascii += chars[charIndex];
}
ascii += ‘\n’;
}
return ascii;
}
// Random color generator
function getRandomColor() {
var letters = ‘0123456789ABCDEF’;
var color = ‘#’;
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// Change ASCII Art colors
function changeAsciiArtColors() {
var newBackgroundColor = getRandomColor();
var newTextColor = getRandomColor();
asciiArtDiv.style.backgroundColor = newBackgroundColor;
asciiArtDiv.style.color = newTextColor;
}
// Button to change colors
document.getElementById(‘changeColorButton’).onclick = changeAsciiArtColors;
// Change colors on page load
window.onload = changeAsciiArtColors;
</script>
</body>
</html>
Attempt Two: Prompt: Make this code cause the ASCII art text color change using a button. the colors are also randomized on page load. CHATGPT. 10/21/2024.
Convert Image to ASCII Art
CODE:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Image to ASCII Art Converter</title>
<style>
body {
font-family: monospace;
text-align: center;
padding: 20px;
}
.ascii-art {
white-space: pre;
background-color: #f0f0f0;
padding: 10px;
border-radius: 8px;
margin-top: 20px;
transition: color 0.5s ease;
}
.color-btn {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
background-color: #007bff;
color: white;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.color-btn:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h2>Convert Image to ASCII Art</h2>
<input type=”file” id=”imageUpload” accept=”image/*”>
<br><br>
<canvas id=”canvas” style=”display: none;”></canvas>
<div id=”asciiArt” class=”ascii-art”></div>
<button class=”color-btn” onclick=”changeColor()”>Change Color</button>
<script>
const imageUpload = document.getElementById(‘imageUpload’);
const canvas = document.getElementById(‘canvas’);
const asciiArtDiv = document.getElementById(‘asciiArt’);
const ctx = canvas.getContext(‘2d’);
// Function to generate a random color
function getRandomColor() {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
return `rgb(${r}, ${g}, ${b})`;
}
// Function to change the color of ASCII text
function changeColor() {
const randomColor = getRandomColor();
asciiArtDiv.style.color = randomColor;
}
// Randomize the color on page load
window.onload = function () {
changeColor();
};
imageUpload.addEventListener(‘change’, function (e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function (event) {
const img = new Image();
img.src = event.target.result;
img.onload = function () {
const maxWidth = 100; // Adjust for resolution
const ratio = maxWidth / img.width;
const newHeight = img.height * ratio;
canvas.width = maxWidth;
canvas.height = newHeight;
ctx.drawImage(img, 0, 0, maxWidth, newHeight);
const imageData = ctx.getImageData(0, 0, maxWidth, newHeight);
const asciiArt = convertToAscii(imageData);
asciiArtDiv.innerText = asciiArt;
}
};
reader.readAsDataURL(file);
});
function convertToAscii(imageData) {
const chars = [‘@’, ‘#’, ‘S’, ‘%’, ‘?’, ‘*’, ‘+’, ‘;’, ‘:’, ‘,’, ‘.’]; // Characters for ASCII
const { data, width, height } = imageData;
let ascii = ”;
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const offset = (y * width + x) * 4;
const red = data[offset];
const green = data[offset + 1];
const blue = data[offset + 2];
const brightness = (red + green + blue) / 3;
const charIndex = Math.floor((brightness / 255) * (chars.length – 1));
ascii += chars[charIndex];
}
ascii += ‘\n’;
}
return ascii;
}
</script>
</body>
</html>