Random Pixel Image Reanimator

by pleonardmusic1664

HTML

<!DOCTYPE html>
<html>
<body>

<div class="slidecontainer" style="margin: auto; text-align: center;">
  <h1 style="font-size: 20px;">Random Pixel Image Reanimator</h1> 
   <p>The slider changes the amount of detail</p>
   
<p id="demo3"></p>
   
   
  <button style="font-size: 16px;" onclick="imgsize()">Click to Animate</button><br>

  <input onchange="imgsize()" type="range" min="0.1" max="3.0" step="0.1" value="2.0" class="slider" id="myRange">
  <span style="font-size: Large">Value: <span id="demo"></span></span>
</div>


<canvas id="myCanvas">
Your browser does not support the HTML5 canvas tag.</canvas>

<img id="scream" src="https://images.squarespace-cdn.com/content/v1/5eb753c19717bf370d5f3056/1642046793073-ABGCST2RU8OOB080B9OP/Desire_11.5+x+18.jpg?format=750w" alt="The Scream" >

<img id="scream2" src="https://peteleonard.org/wp-content/uploads/2022/12/Mimi-Portrait-Small.jpg" alt="The Scream" >
</body>
</html>

CSS

img {margin-left:11px;}
/*
canvas {
background-color: green;
background-image: linear-gradient(black, black), url(https://www.w3schools.com/tags/img_the_scream.jpg);
background-position: 10px 10px;  background-blend-mode: difference;
background-repeat: no-repeat;
}
*/
.slidecontainer {
  width: 100%; /* Width of the outside container */
    margin-top: 5px;

}

#scream {width: }

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  margin-top: 5px;
  width: 75%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

@media only screen and (max-width: 600px) {
  body, .slidecontainer, p {
    font-size: x-large;
  }

  .slider {
    height: 25px; /* Specified height */
  }

  button {font-size: x-large;}

}

JavaScript

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function () {
output.innerHTML = this.value;
}

  const screenScreen = screen.width;


function imgsize() {
var rangeString = document.getElementById("myRange").value;
var value256 = parseFloat(rangeString);
  const c = document.getElementById("myCanvas");
  const ctx = c.getContext("2d");  
  let img;
if (screenScreen > 600) {
    img = document.getElementById("scream");

} else {
     img = document.getElementById("scream2");

}  
  //const img = document.getElementById("scream");
  //var myImg = document.querySelector("#scream");
  const currWidth = img.clientWidth;
  const currHeight = img.clientHeight;
  const widthHeightRatio = currHeight / currWidth;
  

  //const screenScreen = screen.width;
  //document.getElementById("demo3").innerHTML =  screenScreen + "px";
  document.getElementById("demo3").innerHTML =  screenScreen;

  //ctx.canvas.width = currWidth + 2;//dynamically set width of canvas
  ctx.canvas.width = screenScreen;//dynamically set width of canvas
  //ctx.canvas.height = currHeight + 2;//dynamically set width of canvas
  ctx.canvas.height = screenScreen * widthHeightRatio;//dynamically set width of canvas
         
  const picDimensions = screenScreen * (screenScreen * widthHeightRatio);       

//  alert("Current width= " + currWidth + ", " + "Original height= " + currHeight + ", " + "Pic Dimensions = " + picDimensions);
  

  let text1 = "";
  var levOfDetail = value256; // 1 is a bit choppy, 2 is almost complete
  for (let i = 0; i <= picDimensions*levOfDetail; i++) {
  
  /* ------- 2 lines below start the timeout animation */
     (function(index) {
        setTimeout(function() {
  /* ------- put elements of for loop below to be animated */
        
     var subtractor = Math.floor(i / picDimensions * screenScreen);
     //var xMath = Math.floor(i / picDimensions * currWidth) + 1;
     //var...