Kaleidoscope
How do I make an kaleidoscope?
A threejs kaleidoscope effect experiment. (best in fullscreen, some zoom is also supported for more variety, click to regenerate content). What is a kaleidoscope? How do you make a kaleidoscope? This script and codes were developed by XORXOR on 27 January 2023, Friday.
Kaleidoscope - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Kaleidoscope</title>
</head>
<body> <html> <head> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <title>[-]</title> <style> body { margin: 0px; overflow: hidden; background-color: #FFB347; font-family: 'Arial'; } #help{ position: absolute; top: 1%; left: 1%; font-size: 20px; color: white; } </style> </head> <body> <div id="help">[Kaleidoscope - click to shuffle]</div> </body>
</html> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/896175/three.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/896175/OrbitControls.js'></script> <script src="js/index.js"></script>
</body>
</html>
Kaleidoscope - Script Codes JS Codes
//created by XORXOR, #codevember 2016
var contianer, renderer, camera, scene;
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var cube;
var cubes = [];
var center;
var bufferScene = new THREE.Scene();
var bufferTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter});
var triangleGeometry
var triangle;
var clock = new THREE.Clock();
var delta =0;
var m;
var size;
var randomness = 0;
var rnd = 1;
init()
animate();
function init() { container = document.createElement('div'); document.body.appendChild(container); camera = new THREE.PerspectiveCamera( 80, window.innerWidth/window.innerHeight, .1, 10000 ); scene = new THREE.Scene(); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); container.appendChild(renderer.domElement); //geometry size = 100 var rot = Math.PI/3 m = Math.sqrt(size*size - Math.pow(size/2,2)) var r = size/2*Math.sin(Math.PI/3) triangle = new THREE.Shape([ new THREE.Vector2 (0, 0), new THREE.Vector2 (size/2,(size/2) / (1/Math.tan(rot))), new THREE.Vector2 (-size/2,(size/2) / (1/Math.tan(rot))) ]); triangleGeometry = new THREE.ShapeGeometry( triangle); triangleGeometry.computeFaceNormals(); triangleGeometry.faceVertexUvs[0][0][0] = new THREE.Vector2( 0, 0 ); triangleGeometry.faceVertexUvs[0][0][1] = new THREE.Vector2( 0, 1 ); triangleGeometry.faceVertexUvs[0][0][2] = new THREE.Vector2( 1, 1 ); triangleMirrored = new THREE.ShapeGeometry( triangle); triangleMirrored.computeFaceNormals(); triangleMirrored.faceVertexUvs[0][0][2] = new THREE.Vector2( 0, 0 ); triangleMirrored.faceVertexUvs[0][0][1] = new THREE.Vector2( 0, 1 ); triangleMirrored.faceVertexUvs[0][0][0] = new THREE.Vector2( 1, 1 ); var kaleidoscope = new THREE.Object3D(); var sides = 6 for (var i = 0; i < sides+1; i++) { if (i%2 == 0) { var mesh= new THREE.Mesh( triangleGeometry, new THREE.MeshBasicMaterial({map:bufferTexture.texture,side:THREE.DoubleSide}) ); } else { var mesh= new THREE.Mesh( triangleMirrored, new THREE.MeshBasicMaterial({map:bufferTexture.texture,side:THREE.DoubleSide}) ); } kaleidoscope.add(mesh) var rot = Math.PI/3*-i var x = size/2*Math.cos(rot) * i; var y = size/2*Math.sin(rot) * -i; mesh.rotation.set(0,0,rot); } scene.add(kaleidoscope) // kaleidoscope.rotation.set(0,0,-Math.PI/6) var allElems = new THREE.Object3D(); allElems.add(kaleidoscope) var copy = kaleidoscope.clone() copy.position.y = m; copy.position.x = size*1.5 allElems.add(copy) var copy = kaleidoscope.clone() copy.position.y = m*-1; copy.position.x = size*1.5 allElems.add(copy) var copy = kaleidoscope.clone() copy.position.y = m*-1; copy.position.x = size*-1.5 allElems.add(copy) var copy = kaleidoscope.clone() copy.position.y = m*1; copy.position.x = size*-1.5 allElems.add(copy) scene.add(allElems) allElems.rotation.set(0,0,Math.PI/6) camera.position.set(0,0,50) for (var i = 0; i < 500; i++) { var geometry = new THREE.BoxGeometry(Math.random()*5, Math.random()*5, Math.random()*5); var rand = Math.random() var material = new THREE.MeshStandardMaterial({color: 0xff0000,metalness:rand}); material.color.setHex( random(i) * 0xffffff ) material.depthTest = false cube = new THREE.Mesh(geometry, material); bufferScene.add(cube) cube.position.set((Math.random()-.5)*size,(Math.random()-.5)*size,(Math.random()-.5)*size) cube.rotation.set(0,Math.random()*Math.PI,Math.random()*Math.PI) cubes.push(cube) } //light var ambient = new THREE.AmbientLight( 0xffffff ); bufferScene.add(ambient); light = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI / 2 ); light.position.set( 600, 1500, 1000 ); light.target.position.set( 0, 0, 0 ); bufferScene.add(light) controls = new THREE.OrbitControls(camera, renderer.domElement); controls.maxDistance = 70; controls.minDistance = 45 controls.enableDamping = true; controls.enablePan = false; controls.enableRotate = false controls.dampingFactor = .999; window.addEventListener('resize', onWindowResize, false); window.addEventListener( 'mousedown', randomize );
}
function randomize(){ randomness = Math.floor(time); rnd = (Math.random()-.5)*2;
}
function moveContent(time){ var t = time*.2 delta = clock.getDelta() for (var i = 0; i < cubes.length; i++) { if (randomness%2 == 0) { cubes[i].position.x = rnd* random(i+randomness)*Math.sin(t+i)*size +.1; } if (randomness%2 == 1) { cubes[i].position.y = random(i*randomness)*Math.cos(t+i)*size; } cubes[i].rotation.set(random(i+randomness)+t,random(i+randomness)+t,random(i+randomness)+t,random(i+randomness)+t); cubes[i].material.color.offsetHSL(delta/10,0,0) }
}
var time = 0;
function animate() { time = performance.now() * 0.001; moveContent(time); renderer.render(bufferScene,camera,bufferTexture); controls.update() requestAnimationFrame(animate); renderer.render(scene, camera);
}
function random(seed) { var x = Math.sin(seed) * 10000; return x - Math.floor(x);
}
radians = function(degrees) { return degrees * Math.PI / 180;
};
function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight );
}
Developer | XORXOR |
Username | xorxor_hu |
Uploaded | January 27, 2023 |
Rating | 4 |
Size | 3,536 Kb |
Views | 4,048 |
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 |
Complex Form with Black and White Spirals | 3,340 Kb |
2050 | 3,612 Kb |
Pipes | 3,300 Kb |
Birds | 5,934 Kb |
The Walking Raymarcher | 7,934 Kb |
Morphing Tubes | 3,406 Kb |
Cubic Tunnel | 4,791 Kb |
Complex Form with Black and White Bands | 3,209 Kb |
Pastel Pump | 3,763 Kb |
Grid of Birds | 3,512 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 |
Use the Twitchtv JSON API | Roksanaop | 3,561 Kb |
Animated bar chart | CreativePunch | 3,124 Kb |
Very Simple Slider | Doodlemarks | 2,682 Kb |
Custom Checkbox and radio inputs SCSS | Rgfx | 3,367 Kb |
SVG Text Masking | JMChristensen | 2,141 Kb |
CSS Social Media Icon | TychoBlender | 3,871 Kb |
To Do List with Delete | Mattlbrody | 2,068 Kb |
We Simplify animation | Meodai | 48,169 Kb |
A Pen by Theun | Tjoen | 6,152 Kb |
Simple CSS loader. | Cabrera | 2,574 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!