All geek questions in one place

How to add more animated animation in Matrix for animation in canvas?

I am trying to simulate rain with matrix code with a canvas and javascript element. I can do one item at a time, but not several. How to drop multiple raindrops. Here is my code:

<html> <head> <title>Matrix Code Rain</title> <style> *{margin:0; padding:0; } body{background:black;} </style> </head> <body> <canvas id="c"></canvas> <script type="text/javascript"> var canvas = document.getElementById("c"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; canvas.style.background = "black"; var c = canvas.getContext("2d"); var code = ["<html>","<p>","<b>","<strong>","<head>","<body>","<a>","<i>","<div>","<form>","<ol>","<li>","<ul>","<pre>","<nav>","<footer>","<header>","<article>","<section>","<em>","<style>","<title>","<meta>","<br>","<table>"]; var rain = [ ]; var max = 10; for(var i = 0; i < max; i++){ var drop = {}; drop.code = Math.round(Math.random() * code.length); drop.x = Math.random() * canvas.width; drop.y = 0; drop.size = Math.random() * 40; drop.speed = drop.size/4; rain.push(drop); } var y = 0; c.fillStyle="lime"; setTimeout(function(){ c.clearRect(0,0,canvas.width,canvas.height); for(var i = 0; i < max; i++){ var drop = rain[i]; c.font = drop.size+"pt arial"; c.fillText(drop.code,drop.x,drop.y); drop.y += drop.speed; if(drop.y > canvas.height + drop.size) drop.y = 0; } },1000/60); </script> </body> </html>
+4
source share
2 answers

Create a bunch of independent objects that all get their own word and position and speed.

Then print them all and advance them in speed.

Here is a clean example:

http://jsfiddle.net/U5eFJ/

Important code:

 var code = ["<html>", "<p>", "<b>", "<strong>", "<head>", "<body>", "<a>", "<i>", "<div>", "<form>", "<ol>", "<li>", "<ul>", "<pre>", "<nav>", "<footer>", "<header>", "<article>", "<section>", "<em>", "<style>", "<title>", "<meta>", "<br>", "<table>"]; // make 90 things to fall with a random code element and random starting location var things = []; var THINGCOUNT = 90; for (var i = 0; i < THINGCOUNT; i++) { var a = {}; //randomly pick one tag a.code = code[Math.round(Math.random() * code.length)]; ax = Math.random()*500; //random X ay = Math.random()*500 -500; // random Y that is above the screen a.speed = Math.random()*10; things.push(a); } setInterval(function() { ctx.clearRect(0,0,500,500); for (var i = 0; i < THINGCOUNT; i++) { var a = things[i]; ctx.fillText(a.code, ax, ay); ay += a.speed; // fall downwards by the speed amount if (ay > 600) ay = -50; // if off the screen at bottom put back to top } }, 90);​

+3
source

If you are using a Windows computer, you can make the java script open a .bat file that just says it. `@echo off mode 1000 @color a: A echo% random %% random %% random %% random %% random %% random %% random %% random %% random %% random %% random %% random %% random %% random %% random %% random %% random %% %% random random% goto A '

It may not be what you want, but I hope this helps =) `

+1
source

Source: https://habr.com/ru/post/1396114/

More articles:


All Articles