wow! cyber matrix roots on website, see roots example growing live at this site iam.barrond/
text to code made at OpenAI
prompt: html script for website that generates random cyber matrix roots out of screen
“To create a website that generates random cyber matrix roots that appear to be coming out of the screen, you can use HTML and JavaScript.
Here’s a basic HTML code for the webpage:
phpCopy code<!DOCTYPE html>
<html>
<head>
<title>Cyber Matrix Roots</title>
<style>
body {
background-color: black;
overflow: hidden;
}
canvas {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
</style>
</head>
<body>
<canvas id="matrix"></canvas>
<script>
// Your JavaScript code for the cyber matrix roots goes here
</script>
</body>
</html>
This code sets the background color to black and hides any overflow. It also sets up a canvas element with an ID of “matrix” and positions it fixed to cover the entire screen with a z-index of -1.
Next, you’ll need to add some JavaScript to generate the cyber matrix roots. Here’s an example of how you can do this:
phpCopy code<script>
const canvas = document.getElementById('matrix');
const context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const columns = Math.floor(canvas.width / 10);
const drops = [];
for (let i = 0; i < columns; i++) {
drops[i] = Math.floor(Math.random() * canvas.height);
}
function draw() {
context.fillStyle = 'rgba(0, 0, 0, 0.05)';
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = '#0F0';
context.font = '15px monospace';
for (let i = 0; i < drops.length; i++) {
const text = String.fromCharCode(Math.floor(Math.random() * 128));
context.fillText(text, i * 10, drops[i]);
if (drops[i] * 10 > canvas.height && Math.random() > 0.95) {
drops[i] = 0;
}
drops[i]++;
}
}
setInterval(draw, 33);
</script>
This JavaScript code sets up a canvas element, sets the width and height to match the window size, generates random positions for the drops, and then creates a loop that continuously draws and updates the drops.
The drops are drawn using a green color with a monospace font. The String.fromCharCode() method is used to generate random characters to create the cyber matrix effect. When a drop reaches the bottom of the screen, it is reset to the top with a small chance of being reset early to create the random effect.
You can customize the colors, font, and other details to your liking to create the cyber matrix roots effect that you want.”
prompt: allow scroll
“If you want to allow scroll on your webpage, you can remove the overflow: hidden; property from the body style in the HTML code. This property hides any content that overflows the boundaries of the body element and prevents scrollbars from appearing.
Here’s the modified code that allows scroll:
phpCopy code<!DOCTYPE html>
<html>
<head>
<title>Cyber Matrix Roots</title>
<style>
body {
background-color: black;
}
canvas {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
</style>
</head>
<body>
<canvas id="matrix"></canvas>
<script>
// Your JavaScript code for the cyber matrix roots goes here
</script>
</body>
</html>
With this modification, the body element will have a default scroll behavior and users will be able to scroll through the content on your webpage, including the cyber matrix roots generated by the JavaScript code.”
the cyber matrix roots will appear to grow up randomly from the bottom of the screen like roots, using the golden ratio to determine their growth rate and a random hue value to determine their color, creating a rainbow effect
see the code below live in action here hns.wetrippy/
<html>
<head>
<title>Cyber Matrix Roots</title>
<style>
body {
background-color: black;
overflow: auto;
}
canvas {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
</style>
</head>
<body>
<canvas id="matrix"></canvas>
<script>
const canvas = document.getElementById('matrix');
const context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const columnWidth = 20; // Increase column width for more space between columns
const columns = Math.floor(canvas.width / columnWidth);
const goldenRatio = 1.61803398875;
const rootLength = Math.floor(canvas.height / columnWidth) * 2; // Increase root length for more space between roots
let roots = generateRoots(rootLength, goldenRatio);
function generateRoots(length, ratio) {
const roots = [];
let a = 1, b = 1;
for (let i = 0; i < length; i++) {
roots.push(Math.floor(a));
const temp = b;
b = a;
a += temp * ratio;
}
return roots;
}
function draw() {
context.fillStyle = '#000';
context.fillRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < columns; i++) {
const x = i * columnWidth + columnWidth / 2; // Add columnWidth / 2 for center alignment
let y = canvas.height - Math.floor(Math.random() * 10); // Randomly move up the roots
for (let j = 0; j < roots.length; j++) {
const noise = Math.random() * 5 - 2.5;
const hue = Math.random() * 360;
context.fillStyle = `hsl(${hue}, 100%, 50%)`;
context.fillText(roots[j], x, y + noise);
y -= columnWidth;
}
roots.pop();
roots.unshift(Math.floor(roots[0] + roots[1] * goldenRatio));
}
}
setInterval(draw, 369);
</script>
</body>
</html>updated to this ⤵
make the roots like the drops in orginal example make roots random number of golden ratio, make roots random color of rainbow and make them come from bottom
<script>
const canvas = document.getElementById('matrix');
const context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const columnWidth = 20;
const columns = Math.floor(canvas.width / columnWidth);
const goldenRatio = 1.61803398875;
function generateRoots() {
const roots = [];
const numRoots = Math.floor(Math.random() * 10) + 5; // Generate random number of roots
let a = 1, b = 1;
for (let i = 0; i < numRoots; i++) {
roots.push(Math.floor(a));
const temp = b;
b = a;
a += temp * goldenRatio;
}
return roots;
}
function draw() {
context.fillStyle = '#000';
context.fillRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < columns; i++) {
const x = i * columnWidth + columnWidth / 2;
const roots = generateRoots();
let y = canvas.height;
for (let j = 0; j < roots.length; j++) {
const noise = Math.random() * 5 - 2.5;
const hue = Math.random() * 360;
context.fillStyle = `hsl(${hue}, 100%, 50%)`;
context.fillText(roots[j], x, y + noise);
y -= columnWidth;
}
}
}
setInterval(draw, 100);
</script>rainbow roots made of random root leverl domain names
<!DOCTYPE html>
<html>
<head>
<title>i.i1web/ | Growing Cyber Matrix Roots</title>
<style>
body {
background-color: black;
overflow: auto;
}
canvas {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
</style>
</head>
<body>
<canvas id="matrix"></canvas>
<script>
const canvas = document.getElementById('matrix');
const context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const columnWidth = 33;
const columns = Math.floor(canvas.width / columnWidth);
const domainNames = ["inneri/", "hnsroot/", "handshakenft/", "droot/", "rootsoftheinternet/", "i1web/", "innerinetwork/", "uncensorednames/", "aidrip/", "therootzone/"];
function generateRoots() {
const roots = [];
const numRoots = Math.floor(Math.random() * 10) + 5; // Generate random number of roots
for (let i = 0; i < numRoots; i++) {
roots.push(domainNames[Math.floor(Math.random() * domainNames.length)]);
}
return roots;
}
function draw() {
context.fillStyle = '#000';
context.fillRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < columns; i++) {
const x = i * columnWidth + columnWidth / 2;
const roots = generateRoots();
let y = canvas.height;
for (let j = 0; j < roots.length; j++) {
const noise = Math.random() * 5 - 2.5;
const hue = Math.random() * 360;
context.fillStyle = `hsl(${hue}, 100%, 50%)`;
context.fillText(roots[j], x, y + noise);
y -= columnWidth;
}
}
}
setInterval(draw, 777);
</script>
Handshake site on .i1web TLD at <a href="https://reg.uncensorednames.com">Reg.UncensoredNames/</a>
see post about this rainbow cyber roots <a href="https://innerinetcompany.com/2023/03/26/text-to-code-cyber-matrix-roots/">innerinetcompany.com/</a>
</body>
</html>Make #HNS Roots grow from the screen, Rainbow Roots of Domain Names
<!DOCTYPE html>
<html>
<head>
<title>Rainbow Roots of Domain Names</title>
<style>
body {
background-color: black;
overflow: auto;
}
canvas {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
</style>
</head>
<body>
<canvas id="roots"></canvas>
<script>
const canvas = document.getElementById('roots');
const context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const maxDepth = 5;
const branchesPerNode = 3;
const branchAngle = Math.PI / 6;
const initialLength = 150;
const lengthFactor = 0.8;
const domainNames = ["inneri/", "hnsroot/", "handshakenft/", "droot/", "rootsoftheinternet/", "i1web/", "innerinetwork/", "uncensorednames/", "aidrip/", "therootzone/"];
function generateRoots(depth, angle, length, x, y) {
if (depth === 0) {
return;
}
const numBranches = Math.floor(Math.random() * branchesPerNode) + 1;
const branchAngles = [];
for (let i = 0; i < numBranches; i++) {
branchAngles.push(angle + Math.random() * branchAngle * 2 - branchAngle);
}
const hue = Math.random() * 360;
const saturation = Math.random() * 30 + 70;
const lightness = Math.random() * 40 + 50;
context.strokeStyle = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
for (let i = 0; i < numBranches; i++) {
const newLength = length * lengthFactor;
const newX = x + newLength * Math.sin(branchAngles[i]);
const newY = y - newLength * Math.cos(branchAngles[i]);
context.beginPath();
context.moveTo(x, y);
context.lineTo(newX, newY);
context.stroke();
const domainName = domainNames[Math.floor(Math.random() * domainNames.length)];
context.fillStyle = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
context.font = `${Math.floor(length / 3)}px Arial`;
context.fillText(domainName, newX - context.measureText(domainName).width / 2, newY);
generateRoots(depth - 1, branchAngles[i], newLength, newX, newY);
}
}
generateRoots(maxDepth, -Math.PI / 2, initialLength, canvas.width / 2, canvas.height);
</script>
<p>Handshake site on .i1web TLD at <a href="https://reg.uncensorednames.com">Reg.UncensoredNames/</a></p>
<p>See post about these rainbow domain name roots at <a href="https://innerinetcompany.com/2023/03/26/text-to-code-cyber-matrix-roots/">innerinetcompany.com/</a></p>
</body>
</html>latest version of Growing Handshake Roots
refresh to re-grow roots at i.i1web/
<!DOCTYPE html>
<html>
<head>
<title>i.i1web/ | Rainbow Roots of Domain Names</title>
<style>
body {
background-color: black;
overflow: auto;
}
canvas {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
</style>
</head>
<body>
<canvas id="roots"></canvas>
<script>
const canvas = document.getElementById('roots');
const context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const maxDepth = 7;
const branchesPerNode = 3;
const branchAngle = Math.PI / 6;
const initialLength = 100;
const lengthFactor = 0.8;
const domainNames = ["inneri/", "hnsroot/", "handshakenft/", "droot/", "rootsoftheinternet/", "i1web/", "innerinetwork/", "uncensorednames/", "aidrip/", "therootzone/"];
function generateRoots(depth, angle, length, x, y) {
if (depth === 0) {
return;
}
const numBranches = Math.floor(Math.random() * branchesPerNode) + 1;
const branchAngles = [];
for (let i = 0; i < numBranches; i++) {
branchAngles.push(angle + Math.random() * branchAngle * 2 - branchAngle);
}
const hue = Math.random() * 360;
const saturation = Math.random() * 30 + 70;
const lightness = Math.random() * 40 + 50;
context.strokeStyle = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
for (let i = 0; i < numBranches; i++) {
const newLength = length * lengthFactor;
const newX = x + newLength * Math.sin(branchAngles[i]);
const newY = y - newLength * Math.cos(branchAngles[i]);
context.beginPath();
context.moveTo(x, y);
context.lineTo(newX, newY);
context.stroke();
const domainName = domainNames[Math.floor(Math.random() * domainNames.length)];
context.fillStyle = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
context.font = `${Math.floor(length / 3)}px Arial`;
context.fillText(domainName, newX - context.measureText(domainName).width / 2, newY);
generateRoots(depth - 1, branchAngles[i], newLength, newX, newY);
}
}
generateRoots(maxDepth, -Math.PI / 2, initialLength, canvas.width / 2, canvas.height);
</script>
<p>Handshake site on .i1web TLD at <a href="https://reg.uncensorednames.com">Reg.UncensoredNames/</a></p>
<p>See post about these rainbow domain name roots at <a href="https://innerinetcompany.com/2023/03/26/text-to-code-cyber-matrix-roots/">innerinetcompany.com/</a></p>
</body>
</html>html code for interactive ‘I’ within the pupil of an eye
prompt: html code for interactive ‘I’ within the pupil of an eye
<!DOCTYPE html>
<html>
<head>
<title>Interactive I in Eye</title>
<style>
.eye {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
background-color: #F2F2F2;
border-radius: 50%;
overflow: hidden;
box-shadow: 0px 0px 5px #888888;
}
.pupil {
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
background-color: #000;
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease-in-out;
}
.eye:hover .pupil {
width: 80px;
height: 80px;
}
.eye .pupil i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
color: white;
}
</style>
</head>
<body>
<div class="eye">
<div class="pupil">
<i>I</i>
</div>
</div>
</body>
</html>“This code creates an eye shape with a black pupil that contains the letter “I” in white. When hovering over the eye, the pupil enlarges. This is achieved by using CSS transitions to change the width and height of the pupil element.” ~OpenAI
see screenshot ⤵
Inner I Network
Inner I Net Company/ 