Kaleidoscope App
About this app
A fun and colorful kaleidoscope app that generates beautiful patterns with random faces.
Kaleidoscope App
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Kaleidoscope App</title>
<meta name="description" content="A fun and colorful kaleidoscope app that generates beautiful patterns with random faces.">
<meta name="keywords" content="kaleidoscope, animation, colorful, patterns, faces">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Built-In Functions for Apps -->
<script type="text/javascript">
var localStoragePrefix = "ct-168116910167188";
var lastSave = 0;
function saveLocal(data) {
if (Date.now() - lastSave < 1000) {
return;
}
let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict";
cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString();
document.cookie = cookie;
lastSave = Date.now();
}
function loadLocal() {
var cookiePrefix = localStoragePrefix + "=";
var cookieStart = document.cookie.indexOf(cookiePrefix);
if (cookieStart > -1) {
let cookieEnd = document.cookie.indexOf(";", cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd);
return JSON.parse(cookieData);
}
}
</script>
<script type="text/javascript">
var canvas, ctx;
var shapes = [];
var animation;
var numShapes = 10;
var emojis = ["😀", "😃", "😄", "😁", "😆", "😅", "😂", "🤣", "🥲", "😊", "😇", "🙂", "🙃", "😉", "😌"];
function init() {
canvas = document.getElementById('kaleidoscope');
ctx = canvas.getContext('2d');
resizeCanvas();
document.body.style.background = getRandomGradient();
for (var i = 0; i < numShapes; i++) {
shapes.push(createRandomShape());
}
animate();
}
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
function createRandomShape() {
var shape = {
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
size: Math.random() * 120 + 10,
color: getRandomColor(),
vx: (Math.random() - 0.5) * 2,
vy: (Math.random() - 0.5) * 2,
sides: Math.floor(Math.random() * 4) + 3,
rotation: 0,
rotationSpeed: (Math.random() - 0.5) * 0.1,
emoji: emojis[Math.floor(Math.random() * emojis.length)]
};
return shape;
}
function getRandomColor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var a = Math.max(0.25, Math.random());
return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
}
function getRandomGradient() {
var gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
var numStops = Math.floor(Math.random() * 3) + 2;
for (var i = 0; i < numStops; i++) {
gradient.addColorStop(i / (numStops - 1), getRandomColor());
}
return gradient.toString();
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < shapes.length; i++) {
var shape = shapes[i];
shape.x += shape.vx;
shape.y += shape.vy;
shape.rotation += shape.rotationSpeed;
if (shape.x < 0 || shape.x > canvas.width) {
shape.vx = -shape.vx;
}
if (shape.y < 0 || shape.y > canvas.height) {
shape.vy = -shape.vy;
}
drawShape(shape);
}
animation = requestAnimationFrame(animate);
}
function drawShape(shape) {
ctx.save();
drawSingleShape(shape);
ctx.translate(canvas.width, 0);
ctx.scale(-1, 1);
drawSingleShape(shape);
ctx.restore();
ctx.save();
ctx.translate(0, canvas.height);
ctx.scale(1, -1);
drawSingleShape(shape);
ctx.translate(canvas.width, 0);
ctx.scale(-1, 1);
drawSingleShape(shape);
ctx.restore();
ctx.save();
ctx.translate(canvas.width, canvas.height);
ctx.scale(-1, -1);
drawSingleShape(shape);
ctx.translate(canvas.width, 0);
ctx.scale(-1, 1);
drawSingleShape(shape);
ctx.restore();
}
function drawSingleShape(shape) {
ctx.save();
ctx.translate(shape.x, shape.y);
ctx.rotate(shape.rotation);
ctx.beginPath();
ctx.font = `${shape.size}px sans-serif`;
ctx.fillStyle = shape.color;
ctx.fillText(shape.emoji, -shape.size / 2, shape.size / 2);
ctx.restore();
}
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
window.addEventListener('resize', resizeCanvas);
window.addEventListener('load', init);
window.addEventListener('click', toggleFullScreen);
</script>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<canvas id="kaleidoscope"></canvas>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!