A Pen by Kazu
How do I make an a pen by kazu?
Forked from mprquinn's Pen KrdCH.. What is a a pen by kazu? How do you make a a pen by kazu? This script and codes were developed by Kazu on 28 October 2022, Friday.
A Pen by Kazu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Kazu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
A Pen by Kazu - Script Codes CSS Codes
body { background-color: #ff0099; margin: 0px; overflow: hidden; font-family:Monospace; font-size:13px; text-align:center; font-weight: bold; text-align:center;
}
div{ background: #ff0099;
}
A Pen by Kazu - Script Codes JS Codes
var container, stats; var camera, scene, renderer, particles, geometry, materials = [], parameters, i, h, color; var mouseX = 0, mouseY = 0; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; init(); animate(); function init() { container = document.createElement( 'div' ); document.body.appendChild( container ); camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 ); camera.position.z = 600; scene = new THREE.Scene(); scene.fog = new THREE.FogExp2( 0x000000, 0.0025 ); console.log(scene); geometry = new THREE.Geometry(); for ( i = 0; i < 20000; i ++ ) { var vertex = new THREE.Face3(); vertex.x = Math.random() * 2000 - 1000; vertex.y = Math.random() * 2000 - 1000; vertex.z = Math.random() * 4200 - 69; geometry.vertices.push( vertex ); } parameters = [ [ [1, 1, 0.5], 5 ], [ [0.95, 1, 0.5], 4 ], [ [0.90, 1, 0.5], 3 ], [ [0.85, 1, 0.5], 2 ], [ [0.80, 1, 0.5], 1 ] ]; for ( i = 0; i < parameters.length; i ++ ) { color = parameters[i][0]; size = parameters[i][1]; materials[i] = new THREE.ParticleSystemMaterial( { size: size } ); particles = new THREE.ParticleSystem( geometry, materials[i] ); particles.rotation.x = Math.random() * 360; particles.rotation.y = Math.random() * 360; particles.rotation.z = Math.random() * 360; scene.add( particles ); } renderer = new THREE.WebGLRenderer({ clearColor: 0xff0000, clearAlpha: 1 }); renderer.setClearColorHex( 0xff0099, 1 ); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement );
/* stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.top = '0px'; container.appendChild( stats.domElement );*/ document.addEventListener( 'mousemove', onDocumentMouseMove, false ); document.addEventListener( 'touchstart', onDocumentTouchStart, false ); document.addEventListener( 'touchmove', onDocumentTouchMove, false ); // window.addEventListener( 'resize', onWindowResize, false ); } function onWindowResize() { windowHalfX = window.innerWidth / 2; windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } function onDocumentMouseMove( event ) { mouseX = event.clientX - windowHalfX; mouseY = event.clientY - windowHalfY; } function onDocumentTouchStart( event ) { if ( event.touches.length === 1 ) { event.preventDefault(); mouseX = event.touches[ 0 ].pageX - windowHalfX; mouseY = event.touches[ 0 ].pageY - windowHalfY; } } function onDocumentTouchMove( event ) { if ( event.touches.length === 1 ) { event.preventDefault(); mouseX = event.touches[ 0 ].pageX - windowHalfX; mouseY = event.touches[ 0 ].pageY - windowHalfY; } } // function animate() { requestAnimationFrame( animate ); render(); stats.update(); } function render() { var time = Date.now() * 0.00005; camera.position.x += ( mouseX - camera.position.x ) * 0.05; camera.position.y += ( - mouseY - camera.position.y ) * 0.05; camera.lookAt( scene.position ); for ( i = 0; i < scene.children.length; i ++ ) { var object = scene.children[ i ]; if ( object instanceof THREE.ParticleSystem ) { object.rotation.y = time * ( i < 4 ? i + 1 : - ( i + 1 ) ); } } for ( i = 0; i < materials.length; i ++ ) { color = parameters[i][0]; h = ( 360 * ( color[0] + time ) % 360 ) / 360; materials[i].color.setHSL( 255, 255, 255 ); } renderer.render( scene, camera ); }
Developer | Kazu |
Username | carmerano |
Uploaded | October 28, 2022 |
Rating | 3 |
Size | 2,896 Kb |
Views | 10,120 |
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 |
Responsive Menu Button | 1,850 Kb |
Rader Chart | 3,672 Kb |
Flexbox | 1,688 Kb |
LESS color spinning function - triadic | 1,868 Kb |
A Pen by Kazu | 2,780 Kb |
Audio Wave Preloader | 1,707 Kb |
Horizontal Drop Down Menu | 7,820 Kb |
ScrollMagic - FadeIn FadeOut | 2,731 Kb |
CSS Continuous Slide | 1,634 Kb |
Navigation Menu Hover Effect | 1,859 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 |
The Fly | GianlucaGuarini | 3,405 Kb |
Adding and Removing Element | Accimeesterlin | 2,119 Kb |
CSS Infinite 360 | APinix | 5,564 Kb |
Drill-down Map | Good886 | 8,484 Kb |
Working around OS X Dynamic Scrollbars | Jrjenk | 2,279 Kb |
A Pen by Malith Hettiarachchi | MalZiiirA | 5,531 Kb |
Social.svg.min | Larsenwork | 13,849 Kb |
Sencha Touch 2.3.1 Basic Grid Example | Trozdol | 2,770 Kb |
Hoi hoi | JohnTheCat | 7,248 Kb |
Confirm Close Of Foundation Reveal Modal | Winghouchan | 1,818 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!