Morphing Tubes

Developer
XORXOR
Size
3,406 Kb
Views
4,048
  1. Morphing Tubes Previews
  2. Morphing Tubes HTML Codes
  3. Morphing Tubes JS Codes

How do I make an morphing tubes?

Testing spline behaviour and morphing for Codevember 2016 Created by XORXOR, 2016 Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0). What is a morphing tubes? How do you make a morphing tubes? This script and codes were developed by XORXOR on 27 January 2023, Friday.

Morphing Tubes Previews
IQ Test

Morphing Tubes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Morphing Tubes</title>
</head>
<body> <html>	<head>	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">	<title>[lines]</title>	<style>	body {	margin: 0px;	overflow: hidden;	background-color: #FFB347;	font-family: 'Arial';	}	#help{	position: absolute; top: 1%; left: 1%; font-size: 30px; color: #489eba;	}	</style>	</head>	<body>	</body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Morphing Tubes - Script Codes JS Codes

var contianer, renderer, camera, scene;
var material;
var letters = [];
var vertices=[];
var offsets = [];
var targetVertices,currentVertices;
var mainGeometry
var vertexCount = 32;
var clock = new THREE.Clock();
var boxhelper;
var line;
var helpCube1,helpCube2;
var smallCubes = [];
var mainLines =[];
var time;
var step = 0;
var morphstep = 0;
var current = 0;
var target = 1;
var wait = true;
var waittimer = 0
var randomTarget = 0;
var randomCurrent = 0;
var prevRandom;
var helpCube3
init()
function init() { container = document.createElement('div'); document.body.appendChild(container); camera = new THREE.PerspectiveCamera( 120, window.innerWidth/window.innerHeight, .1, 100000 ); camera.position.set(0, 0, 5); scene = new THREE.Scene(); scene.fog = new THREE.FogExp2(0x5d4e46, .013); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.setClearColor(0x5d4e46); container.appendChild(renderer.domElement); var size = 10; //geometry for (var i = 0; i < 256; i++) { var curve = new THREE.CubicBezierCurve3(); for (var j = 0; j < 4; j++) { var vec = new THREE.Vector3(Math.floor(Math.random()*size)*size,Math.floor(Math.random()*size)*size,Math.floor(Math.random()*size)*size) vec.z -= Math.floor(Math.random()*size*j) vec.x += Math.floor(Math.random()*size*j) vec.y -= Math.floor(Math.random()*size*j) curve["v"+j] = vec } var geometry = new THREE.Geometry(); geometry.vertices = curve.getPoints( vertexCount ); if (i%32 ==0 ) { var lineGeometry = new THREE.Geometry(); for (var j = 0; j < vertexCount; j++) { var x = geometry.vertices[j].x; var y = geometry.vertices[j].y; var z = geometry.vertices[j].z; lineGeometry.vertices.push( new THREE.Vector3( x, y, z )) } var material = new THREE.LineBasicMaterial( { color : 0xffffff,linewidth:3} ); material.color.setHSL(1,0,100); var line = new THREE.Line( lineGeometry, material ); mainLines.push(line) scene.add( line ); } else{ vertices.push(geometry.vertices) } } boxhelper = new THREE.BoxHelper( line, 0xffffff ); scene.add( boxhelper ); //light var ambient = new THREE.AmbientLight( 0xffffff ); scene.add(ambient); var material = new THREE.MeshLambertMaterial({color: 0xa69e8f}); var smallCubeGeometry = new THREE.BoxBufferGeometry(.2,.2,.2); var s = 15 for (var i = 0; i < s; i++) { for (var j = 0; j < s; j++) { for (var k = 0; k < s; k++) { var smallCube = new THREE.Mesh(smallCubeGeometry, material); smallCube.position.set(i*10,j*10,k*10) scene.add(smallCube) } } } var solidMaterial = new THREE.MeshLambertMaterial({color: 0xffffff}); var helpCubeMesh = new THREE.SphereGeometry(1,32); helpCube1 = new THREE.Mesh(helpCubeMesh, solidMaterial); scene.add(helpCube1) helpCube2 = new THREE.Mesh(helpCubeMesh, solidMaterial); scene.add(helpCube2) window.addEventListener('resize', onWindowResize, false); animate();
}
function animate() { time = performance.now()*.0002 morphstep +=4; if (wait) { waittimer +=1; randomTarget = Math.floor(Math.random()*(vertices.length)) randomCurrent = Math.floor(Math.random()*(mainLines.length)) wait = false waittimer = 0; morphstep = 0; mainGeometry = mainLines[randomCurrent].geometry targetVertices = vertices[randomTarget] } else { boxhelper.update(mainLines[randomCurrent]); helpCube1.position.set(mainGeometry.vertices[0].x,mainGeometry.vertices[0].y,mainGeometry.vertices[0].z) helpCube2.position.set(mainGeometry.vertices[vertexCount-1].x,mainGeometry.vertices[vertexCount-1].y,mainGeometry.vertices[vertexCount-1].z) currentVertices = mainGeometry.vertices for (var i = 0; i < vertexCount; i++) { var point = currentVertices[i] var targetPoint = targetVertices[i] var x = point.x+(targetPoint.x - point.x) * morphstep/100; var y = point.y+(targetPoint.y - point.y) * morphstep/100; var z = point.z+(targetPoint.z - point.z) * morphstep/100; mainGeometry.vertices[i].x = x; mainGeometry.vertices[i].y = y; mainGeometry.vertices[i].z = z; } mainGeometry.verticesNeedUpdate = true; } step += 4; if (step%100 == 0 ) { wait = true morphstep = 100; } var r = 50//*Math.sqrt(2)/2 camera.position.set(r*Math.sin(time)+50,50,r*Math.cos(time)+50) camera.lookAt(new THREE.Vector3(50,50,50)) 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 );
}
Morphing Tubes - Script Codes
Morphing Tubes - Script Codes
Home Page Home
Developer XORXOR
Username xorxor_hu
Uploaded January 27, 2023
Rating 4.5
Size 3,406 Kb
Views 4,048
Do you need developer help for Morphing Tubes?

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!

XORXOR (xorxor_hu) Script Codes
Name
Birds
Pipes
2050
Cubic Tunnel
Grid of Birds
Complex Form with Black and White Bands
Complex Form with Black and White Spirals
Pastel Pump
The Walking Raymarcher
Kaleidoscope
Create amazing blog posts 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!