lewdev · June 9, 2024 02:09
diff --git a/#matrix-digital-rain.md b/#matrix-digital-rain.md
diff --git a/matrix-digital-rain-by-javascriptacademy.html b/matrix-digital-rain-by-javascriptacademy.html
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Matrix digital rain</title>
  <style>
  html { background: black; height: 100%; overflow: hidden; }
  body { margin: 0; padding: 0; height: 100%; }
  </style>
 </head>
 <body>
 <canvas id="Matrix"></canvas>
 <script>
 //Source: https://github.com/javascriptacademy-stash/digital-rain
 const canvas = document.getElementById('Matrix');
 const context = canvas.getContext('2d');

 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;

 const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';
 const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
 const nums = '0123456789';

 const alphabet = katakana + latin + nums;

 const fontSize = 16;
 const columns = canvas.width/fontSize;

 const rainDrops = [];

 for( let x = 0; x < columns; x++ ) {
  rainDrops[x] = 1;
 }

 const draw = () => {
  context.fillStyle = 'rgba(0, 0, 0, 0.05)';
  context.fillRect(0, 0, canvas.width, canvas.height);
  
  context.fillStyle = '#0F0';
  context.font = fontSize + 'px monospace';

  for(let i = 0; i < rainDrops.length; i++)
  {
    const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
    context.fillText(text, i*fontSize, rainDrops[i]*fontSize);
    
    if(rainDrops[i]*fontSize > canvas.height && Math.random() > 0.975){
      rainDrops[i] = 0;
    }
    rainDrops[i]++;
  }
 };
 setInterval(draw, 30);
 </script>
 </body>
 </html>
diff --git a/matrix-digital-rain.html b/matrix-digital-rain.html
 <style>body { overflow: hidden; margin: 0; background: #000 }</style>
 <canvas id=c></canvas>
 <script>
 const x = c.getContext('2d');
 const jln = [['ア', 89], ['A', 25], ['0', 10]];
 let fontSize = 16;
 let columns;
 let rainDrops;
 const r = () => Math.random();
 const resize = () => {
  c.width = innerWidth;
  c.height = innerHeight;
  fontSize = c.width / 50;
  columns = ~~(c.width / fontSize);
  rainDrops = new Array(columns).fill(1);
  x.font = fontSize + 'px monospace';
 };
 resize();
 addEventListener('resize', resize);
 setInterval(() => {
  x.fillStyle = "rgba(0, 0, 0, 0.05)";
  //x.fillStyle = "rgba(255, 255, 255, 0.05)";
  x.fillRect(0, 0, c.width, c.height);
  
  x.fillStyle = "#0F0";
  // x.fillStyle = "#080";

  for (let i = 0; i < columns; i++) {
    const index = ~~(r() * 3);
    const [char, len] = jln[index];
    const text = String.fromCharCode(r() * len + char.charCodeAt());
    x.fillText(text, i * fontSize, rainDrops[i] * fontSize);
    if(rainDrops[i] * fontSize > c.height && r() > 0.975){
      rainDrops[i] = 0;
    }
    rainDrops[i]++;
  }
 }, 20);
 </script>
diff --git a/matrix-in-addressbar.html b/matrix-in-addressbar.html
 data:text/html,<body onload="x=c.getContext`2d`;r=()=>Math.random();c.width=innerWidth;c.height=innerHeight;f=20;n=~~(c.width/f);p=new Array(n).fill(1);x.font=f+'px monospace';setInterval(`x.fillStyle='rgba(0,0,0,0.05)';x.fillRect(0,0,c.width,c.height);x.fillStyle='lime';for(i=0;i<n;i++){x.fillText(String.fromCharCode(r()*58+65),i*f,p[i]*f);if(p[i]*f>c.height&&r()>.975)p[i]=0;p[i]++}`,20)"><canvas id=c><style>body{overflow:hidden;margin:0}
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Matrix digital rain</title>
	<style>
	html { background: black; height: 100%; overflow: hidden; }
	body { margin: 0; padding: 0; height: 100%; }
	</style>
	</head>
	<body>
	<canvas id="Matrix"></canvas>
	<script>
	//Source: https://github.com/javascriptacademy-stash/digital-rain
	const canvas = document.getElementById('Matrix');
	const context = canvas.getContext('2d');

	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;

	const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';
	const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
	const nums = '0123456789';

	const alphabet = katakana + latin + nums;

	const fontSize = 16;
	const columns = canvas.width/fontSize;

	const rainDrops = [];

	for( let x = 0; x < columns; x++ ) {
	rainDrops[x] = 1;
	}

	const draw = () => {
	context.fillStyle = 'rgba(0, 0, 0, 0.05)';
	context.fillRect(0, 0, canvas.width, canvas.height);

	context.fillStyle = '#0F0';
	context.font = fontSize + 'px monospace';

	for(let i = 0; i < rainDrops.length; i++)
	{
	const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
	context.fillText(text, ifontSize, rainDrops[i]fontSize);

	if(rainDrops[i]*fontSize > canvas.height && Math.random() > 0.975){
	rainDrops[i] = 0;
	}
	rainDrops[i]++;
	}
	};
	setInterval(draw, 30);
	</script>
	</body>
	</html>
	<style>body { overflow: hidden; margin: 0; background: #000 }</style>
	<canvas id=c></canvas>
	<script>
	const x = c.getContext('2d');
	const jln = [['ア', 89], ['A', 25], ['0', 10]];
	let fontSize = 16;
	let columns;
	let rainDrops;
	const r = () => Math.random();
	const resize = () => {
	c.width = innerWidth;
	c.height = innerHeight;
	fontSize = c.width / 50;
	columns = ~~(c.width / fontSize);
	rainDrops = new Array(columns).fill(1);
	x.font = fontSize + 'px monospace';
	};
	resize();
	addEventListener('resize', resize);
	setInterval(() => {
	x.fillStyle = "rgba(0, 0, 0, 0.05)";
	//x.fillStyle = "rgba(255, 255, 255, 0.05)";
	x.fillRect(0, 0, c.width, c.height);

	x.fillStyle = "#0F0";
	// x.fillStyle = "#080";

	for (let i = 0; i < columns; i++) {
	const index = ~~(r() * 3);
	const [char, len] = jln[index];
	const text = String.fromCharCode(r() * len + char.charCodeAt());
	x.fillText(text, i * fontSize, rainDrops[i] * fontSize);
	if(rainDrops[i] * fontSize > c.height && r() > 0.975){
	rainDrops[i] = 0;
	}
	rainDrops[i]++;
	}
	}, 20);
	</script>