3December #4: Lissajous atom

Developer
Eli Fitch
Size
5,957 Kb
Views
12,144
  1. 3December #4: Lissajous atom Previews
  2. 3December #4: Lissajous atom HTML Codes
  3. 3December #4: Lissajous atom CSS Codes
  4. 3December #4: Lissajous atom JS Codes

How do I make an 3december #4: lissajous atom?

Electrons animate along a lissajous curve, which is pretty fancy.. What is a 3december #4: lissajous atom? How do you make a 3december #4: lissajous atom? This script and codes were developed by Eli Fitch on 28 October 2022, Friday.

3December #4: Lissajous atom Previews
IQ Test

3December #4: Lissajous atom - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3December #4: Lissajous atom</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"></div>
<div class="vignette"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js'></script>
<script src='https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js'></script>
<script src='js/a3dff678dedd9b3d34dc432e3.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

3December #4: Lissajous atom - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
.container { height: 100vh; width: 100%;
}
canvas { display: block;
}
.vignette { position: absolute; top: 0; left: 0; height: 100vh; width: 100vw; pointer-events: none; background: -webkit-radial-gradient(center ellipse, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.15) 100%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.15) 100%);
}

3December #4: Lissajous atom - Script Codes JS Codes

'use strict';
console.clear();
var camera = undefined;
var controls = undefined;
var scene = undefined;
var envScene = undefined;
var renderer = undefined;
var molecule = undefined;
var lissajousCurve = undefined;
var atoms = [];
function init() {	var container, nucleus, atom, electron;	container = document.getElementsByClassName('container')[0];;	// stats = new Stats();	// stats.domElement.style.position = 'absolute';	// stats.domElement.style.bottom = '0px';	// stats.domElement.style.zIndex = 100;	// container.appendChild(stats.domElement);	camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);	camera.position.z = 100;	controls = new THREE.OrbitControls(camera);	controls.zoomSpeed = 0.5;	scene = new THREE.Scene();	renderer = new THREE.WebGLRenderer({ antialias: true });	renderer.setPixelRatio(window.devicePixelRatio);	renderer.setSize(window.innerWidth, window.innerHeight);	renderer.setClearColor(0xEFEFEF);	var light = new THREE.HemisphereLight(0xFFFFFF, 0x111111, 1);	scene.add(light);	container.appendChild(renderer.domElement);	// atoms	molecule = new THREE.Geometry({ name: 'mario' });
}
function makeAtom() {	var atom = new THREE.Object3D();	atom.name = 'atom';	var nucleus = new THREE.Mesh(new THREE.IcosahedronGeometry(10, 3), new THREE.MeshNormalMaterial({ shading: THREE.SmoothShading }));	nucleus.name = 'nucleus';	atom.add(nucleus);	var lissajousCurve = new LissajousCurve();	lissajousCurve.meshObject.name = 'Lissa';	lissajousCurve.sizeX = 20.0;	lissajousCurve.sizeY = 20.0;	lissajousCurve.sizeZ = 20.0;	lissajousCurve.createMesh();	lissajousCurve.meshObject.children[0].material.transparent = false;	lissajousCurve.meshObject.children[0].material.color.set(0xffffff);	lissajousCurve.tween = TweenMax.to(lissajousCurve.meshObject.rotation, Math.random() * 100 + 800, { y: 360, repeat: -1, yoyo: true });	for (var j = 0; j < 5; j++) {	var electron = new THREE.Mesh(new THREE.IcosahedronGeometry(2, 2), new THREE.MeshNormalMaterial());	electron.name = 'electron';	electron.tween = electronTween(electron, lissajousCurve.meshObject.children[0].geometry.vertices,	// Math.floor( Math.random()*400 )	80 * j);	lissajousCurve.meshObject.children[0].add(electron);	}	atom.add(lissajousCurve.meshObject);	scene.add(atom);
}
function electronTween(electron, path, vertex) {	// var elec = electron;	// var p = path;	// var vert = vertex;	var l = path.length;	TweenMax.to(electron.position, 0.01, { x: path[vertex].x, y: path[vertex].y, z: path[vertex].z,	onComplete: function onComplete() {	if (vertex < l - 4) {	electronTween(electron, path, vertex + 3);	} else {	electronTween(electron, path, 0);	}	}	});
}
function animate() {	requestAnimationFrame(animate);	renderer.render(scene, camera);	controls.update();
}
init();
makeAtom();
animate();
window.addEventListener('resize', function () {	renderer.setSize(window.innerWidth, window.innerHeight);	camera.aspect = window.innerWidth / window.innerHeight;	camera.updateProjectionMatrix();
});
3December #4: Lissajous atom - Script Codes
3December #4: Lissajous atom - Script Codes
Home Page Home
Developer Eli Fitch
Username elifitch
Uploaded October 28, 2022
Rating 4
Size 5,957 Kb
Views 12,144
Do you need developer help for 3December #4: Lissajous atom?

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!

Eli Fitch (elifitch) Script Codes
Name
Smiley guy
Diagonal gradient fill button
Node DC Animated SVG Logo
SVG hamburger menu button
Flexslider thumbnail modification
Animated SVG Hexagon
Gradient Borders Mixin
Cube of cubes
Animated multi-line underline
Canvas Hero Prototype
Create amazing SEO content with AI!

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!