Thing
How do I make an thing?
What is a thing? How do you make a thing? This script and codes were developed by Moses Holmström on 21 August 2022, Sunday.
Thing - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Thing</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Thing - Script Codes CSS Codes
* { box-sizing: border-box;
}
html { background-color: black; left: 0; min-height: 100%; position: absolute; right: 0; top: 0;
}
canvas { width: 100vw; height: 100vh; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); image-rendering: -moz-crisp-edges; image-rendering: -webkit-crisp-edges; -ms-interpolation-mode: nearest-neighbor; image-rendering: -webkit-optimize-contrast; image-rendering: pixelated;
}
.debug { background-color: rgba(0, 0, 0, 0.75); color: white; font-size: 2.5vmin; padding: 0.5em; position: fixed; top: 0; right: 0; z-index: 9001;
}
Thing - Script Codes JS Codes
// Limits frames drawn per second
var FPSLIMIT = 60;
// Cell size in pixels, smaller -> more pixels -> lower fps
var CELLSIZE = 16;
var dbg = document.createElement("div");
dbg.classList.add("debug");
document.body.appendChild(dbg);
var vw = document.documentElement.clientWidth;
var vh = document.documentElement.clientHeight;
var vmax = Math.max(vw, vh);
var aspect = vw / vh;
dbg.innerHTML = aspect;
var canvas = document.createElement("canvas");
canvas.width = vw;
canvas.height = vh;
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
//*
//*/
//*
var theme = [ "rgb( 12, 30, 89)", "rgb( 32, 25, 40)", "rgb(100, 20, 1)", "rgb(231, 40, 2)", "rgb(251, 100, 0)", "rgb(228, 139, 9)", "rgb(256, 236, 42)", "rgb(246, 249, 192)", "rgb(250, 250, 250)", "rgb(130, 200, 255)", "rgb( 64, 120, 240)", "rgb( 10, 96, 225)"
];//*/
var Grid = function (options) { var t = this; var defaults = { grid: { h: vh/CELLSIZE, w: vw/CELLSIZE, data: [] }, fluffiness: 1/2, paletteDistance: 1, clearEachFrame: true, clearInterval: 2 }; t.s = _.extend(defaults, options); this.init = function (options) { t.s = typeof options === "undefined" ? t.s : _.extend(t.s, options); t.make(); t.raf = window.requestAnimationFrame(t.draw); }; this.make = function () { for(var y = 1; y <= t.s.grid.h - 1 ; y++) { var row = []; var temp = Math.floor(Math.random() * theme.length); var rowOffset = Math.random() * 1000 * y >> 0; var directionSpeed = Math.random() * 8; var rowDirection = Math.random() > 0.5 ? directionSpeed : 0-directionSpeed; for(var x = 1; x <= t.s.grid.w - 1; x++) { var pixel = new Dot({ paletteDistance: t.s.paletteDistance, scale: Math.round( Math.min(canvas.width, canvas.height) / Math.min(t.s.grid.w, t.s.grid.h) * (Math.random() * t.s.fluffiness + t.s.fluffiness) / CELLSIZE ) * CELLSIZE, x: canvas.width / t.s.grid.w * x, y: canvas.height / t.s.grid.h * y, temperature: temp, offset: rowOffset + (Math.random() + (x / t.s.grid.w * rowDirection)) }); row.push(pixel); pixel.draw(); } t.s.grid.data.push(row); } }; var last = Date.now(); var frame = 0; this.draw = function (time) { window.requestAnimationFrame(t.draw); var timeDelta = time - last; var fps = 1000/timeDelta; if(1000/timeDelta < FPSLIMIT) { last = time; frame++; dbg.innerHTML = [ "ms/frame: " + Math.round(timeDelta), "fps/limit: " + Math.round(fps) + "/" + FPSLIMIT ].join("<br>"); if(t.s.clearEachFrame) { ctx.clearRect(0, 0, canvas.width, canvas.height); } else if(t.s.clearInterval && frame % (FPSLIMIT * t.s.clearInterval) == 0) { ctx.fillStyle = theme[Math.floor(Math.random() * theme.length)].split(")").join(",0.25)"); ctx.fillRect(0,0,canvas.width, canvas.height); } t.s.grid.data.forEach(function(row, rowIndex) { row.forEach(function(dot, dotIndex) { dot.update(time); dot.draw(); }); }); } else { last = time - timeDelta; } }; return this;
};
var Dot = function (options) { var defaults = { scale: 10, size: 1, temperature: 1, x: 0, y: 0, offset: 0, fudge: 0, paletteDistance: 1 }; this.s = _.extend(defaults, options); this.draw = function () { ctx.beginPath(); ctx.fillStyle = theme[this.s.temperature]; ctx.fillRect( this.s.x - (this.s.size * 0.5), this.s.y - (this.s.size * 0.5), Math.round(this.s.size), Math.round(this.s.size) ); ctx.fill(); ctx.closePath(); }; this.update = function (time) { this.s.size = Math.round(Math.abs(Math.sin(time * 0.002346 + this.s.offset) * this.s.scale) / 0.125) * 0.125; if( this.s.size <= 1 && this.s.fudge <= this.s.paletteDistance ) { this.s.temperature = (this.s.temperature + 1) % (theme.length); this.s.fudge++; } else if ( this.s.size <= 1 && this.s.fudge >= 0 - this.s.paletteDistance ) { this.s.temperature = (this.s.temperature - 1) % (theme.length); this.s.fudge--; } }; return this;
};
var grid;
document.addEventListener("DOMContentLoaded", function () { grid = new Grid(); grid.init();
});
document.addEventListener("resize", function () { grid.init();
})
Developer | Moses Holmström |
Username | thykka |
Uploaded | August 21, 2022 |
Rating | 4.5 |
Size | 3,802 Kb |
Views | 64,768 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Random word highlight script | 3,578 Kb |
Fallout Slides | 5,381 Kb |
Status Monitor mockup | 7,599 Kb |
Loader - Connect the dots | 2,811 Kb |
Esmes Vice Anim00ted SVG | 3,838 Kb |
Orbit Loader | 2,682 Kb |
Pageful Catalogue | 2,875 Kb |
I long for quaternions.... | 2,998 Kb |
HSL color picker | 3,957 Kb |
Rotary control with value display | 3,750 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Addthis_button | Esambino | 1,691 Kb |
React JS Movie Info App | MTushar | 4,870 Kb |
Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
NAV WPMANAGER | Mstoic | 1,991 Kb |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
Form Labels | Bartuc | 2,717 Kb |
Shop Talk logo made in CSS | Hugo | 19,368 Kb |
Flip test | Madhes | 1,635 Kb |
Responsive slide | Thorien | 2,400 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!