23

Random boxes - image transition effect in 15 lines of pure JavaScript

 5 years ago
source link: https://slicker.me/javascript/random_boxes.htm
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Random boxes - image transition effect

Another cool & easy proggie - fade in an image using random boxes!

Here's how it works (source code below):

[Lines 1-4] Set up HTML5 Canvas
[5-6] the source image
[7-8] get the 2d context of the Canvas
[9] the dimensions of the box
[10] the number of rows and columns of the random boxes
[12] once the image is loaded:
[13-14] calculate the width and height of the boxes
[15] start the animation!
[18-23] the main animation function:
[19-20] select a random box
[21] This is the heart and soul of this solution:
We are copying a bitmap box, whose dimensions are boxWidth x boxHeight at the coordinates (x * boxWidth, y * boxHeight) from the image to the Canvas.
Click here to read more details about the drawImage function.

<html>
<body>
<canvas id="myCanvas" width="600" height="373"></canvas>
<script>
let image = new Image();
image.src = "example1.jpg";
let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");
let boxWidth, boxHeight;
let rows = 10, columns = 20;
 
image.onload = function() {
  boxWidth = image.width / columns;
  boxHeight = image.height / rows;
  requestAnimationFrame(animate);
};
 
function animate() {
  let x = Math.floor(Math.random() * columns);
  let y = Math.floor(Math.random() * rows);
  context.drawImage(image, x * boxWidth, y * boxHeight, boxWidth, boxHeight, x * boxWidth, y * boxHeight, boxWidth, boxHeight);
  requestAnimationFrame(animate);
}
</script>
</body>
</html>

This keeps running forever and the code just keeps copying the boxes which were already copied.

Here's a more interesting version, that toggles between two images.

To achieve that, we need to introduce a counter [13] which will be increased after each animation frame [26].
[27-28] If the counter reaches 500, display the entire image. This is needed to avoid a situation where we have two or three boxes left to be drawn, but the computer keeps randomly selecting other boxes.
[30-35] After a 100 more frames, we switch the source image and reset the counter.

<html>
<body>
<canvas id="myCanvas" width="600" height="373"></canvas>
<script>
let image = new Image();
image.src = "example0.jpg";
let image2 = new Image();
image2.src = "example1.jpg";
 
let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");
let boxWidth, boxHeight;
let rows = 10, columns = 20, counter = 0;
let source = image;
 
image2.onload = function() {
  boxWidth = image.width / columns;
  boxHeight = image.height / rows;
  requestAnimationFrame(animate);
};
 
function animate() {
  let x = Math.floor(Math.random() * columns);
  let y = Math.floor(Math.random() * rows);
  context.drawImage(source, x * boxWidth, y * boxHeight, boxWidth, boxHeight, x * boxWidth, y * boxHeight, boxWidth, boxHeight);
  counter++;
  if (counter == 500)
    context.drawImage(source, 0, 0);
  requestAnimationFrame(animate);
  if (counter == 600) {
    if (source == image)
      source = image2;
    else
      source = image;
    counter = 0;
  }
}
</script>
</body>
</html>

Check out these programming tutorials:

JavaScript:

Optical illusion (18 lines)

Spinning squares - visual effect (25 lines)

Oldschool fire effect (20 lines)

Fireworks (60 lines)

Animated fractal (32 lines)

Physics engine for beginners

Physics engine - interactive sandbox

Physics engine - silly contraption

Starfield (21 lines)

Yin Yang with a twist (4 circles and 20 lines)

Tile map editor (70 lines)

Sine scroller (30 lines)

Interactive animated sprites

Your first program in JavaScript: you need 5 minutes and a notepad


Fractals in Excel

Python in Blender 3d:


3d fractal in Blender Python


</div


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK