Pastel Pump

Developer
XORXOR
Size
3,763 Kb
Views
4,048
  1. Pastel Pump Previews
  2. Pastel Pump HTML Codes
  3. Pastel Pump JS Codes

How do I make an pastel pump?

#codevember day 18, 2016Created by XORXOR, 2016 Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0). What is a pastel pump? How do you make a pastel pump? This script and codes were developed by XORXOR on 27 January 2023, Friday.

Pastel Pump Previews
IQ Test

Pastel Pump - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pastel Pump</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: #000000;	font-family: 'Arial';	}	#help{	position: absolute;	top: 1%;	left: 1%;	font-size: 30px;	color: #489eba;	}	</style>	</head>	<body>	</body>	<script type="x-shader/x-vertex" id="vertexshader">	attribute float size;	void main()	{	vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );	gl_PointSize = size * ( 300.0 / -mvPosition.z );	gl_Position = projectionMatrix * mvPosition;	}	</script>	<script type="x-shader/x-fragment" id="fragmentshader">	uniform sampler2D texture;	void main()	{	gl_FragColor = vec4( 1.0, 1.0, 1.0, 0.5 );	gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );	}	</script>
</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>

Pastel Pump - Script Codes JS Codes

var contianer, renderer, camera, scene;
var geometry,material;
var sprite,particles;
var customUniforms,customAttributes;
var positions;
var size;
var BILLBOARD_COUNT = 16384;
loader = new THREE.TextureLoader();
loader.load( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/896175/dots.png', function ( texture ) { sprite = texture; init(); animate();
})
function init() { container = document.createElement('div'); document.body.appendChild(container); camera = new THREE.PerspectiveCamera( 40, window.innerWidth/window.innerHeight, .1, 10000 ); camera.position.set(0.0, 0.0, 1); scene = new THREE.Scene(); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setClearColor(0x85b6b6);
container.appendChild(renderer.domElement); var phi0AddDiv = 340.0; var theta0AddDiv = 368.0; var phi1AddDiv = 1707.0; var theta1AddDiv = 1986.0; var phi0 = 0.0; var theta0 = 0.0; var phi1 = 0.0; var theta1 = 0.0; var twoPi = Math.PI * 2.0; var phi0Add = twoPi / phi0AddDiv; var theta0Add = twoPi / theta0AddDiv; var phi1Add = twoPi / phi1AddDiv; var theta1Add = twoPi / theta1AddDiv; var r = 50.0; geometry = new THREE.BufferGeometry(); size = new Float32Array( BILLBOARD_COUNT ); positions = new Float32Array( BILLBOARD_COUNT * 3 ); for ( var i = 0, i3 = 0; i < BILLBOARD_COUNT; i ++, i3 += 3 ) {	r = 60 + 10 * Math.sin( phi0 + Math.cos( phi1 ) ); var v0 = new THREE.Vector3( r * Math.sin(phi0) * Math.cos(theta0), r * Math.sin(phi0) * Math.sin(theta0), r * Math.cos(phi0) ); var v1 = new THREE.Vector3( r * Math.sin(phi1) * Math.cos(theta1), r * Math.sin(phi1) * Math.sin(theta1), r * Math.cos(phi1) ); v0.addScaledVector( v1, 3.0 ); positions[ i3 + 0 ] = v0.x; positions[ i3 + 1 ] = v0.y; positions[ i3 + 2 ] = v0.z; size[ i ] = 20; phi0 += phi0Add; theta0 += theta0Add; phi1 += phi1Add; theta1 += theta1Add; } geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) ); geometry.addAttribute( 'size', new THREE.BufferAttribute( size, 1 ) ); uniforms = { texture: { value: sprite } }; var shaderMaterial = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: document.getElementById( 'vertexshader' ).textContent, fragmentShader: document.getElementById( 'fragmentshader' ).textContent, depthTest: false, transparent: true }); particles = new THREE.Points( geometry, shaderMaterial ); scene.add( particles );	particles.dynamic = true; controls = new THREE.OrbitControls(camera, renderer.domElement); controls.maxDistance = 1; controls.minDistance = 1 window.addEventListener('resize', onWindowResize, false);
}
function animate() { var time = performance.now() * 0.003; particles.rotation.z = 0.01 * time; var scaleAng = time; var scaleAngAdd = 1040 * Math.PI / BILLBOARD_COUNT; var cameraPosition = camera.position for ( var i = 0; i < BILLBOARD_COUNT; i++ ) { size[ i ] = 50.0 + 30.0 * Math.sin( scaleAng ); scaleAng += scaleAngAdd; } geometry.attributes['size'].array = size; geometry.attributes['position'].array = positions; BufferGeometrySorter.prototype.sort(geometry.attributes, cameraPosition ); requestAnimationFrame(animate); renderer.render(scene, camera);
}
function onWindowResize() { camera.left = window.innerWidth / - 2; camera.right = window.innerWidth / 2; camera.top = window.innerHeight / 2; camera.bottom = window.innerHeight / - 2; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight );
}
// THREE.js BufferGeometry sort by Corey Farwell
// https://github.com/frewsxcv/three-buffergeometry-sort
var BufferGeometrySorter = function () {};
BufferGeometrySorter.prototype.sort = (function () { var distances = [], tmpPos = new THREE.Vector3(0, 0, 0), currFrame = 0; // This will result in the first frame getting sorted return function (bufferGeomAttributes, cameraPosition) { currFrame += 1; var attributes = bufferGeomAttributes, numPoints = attributes.position.count; for (var i = 0; i < numPoints; ++i) { tmpPos.set( attributes.position.array[i * 3], attributes.position.array[i * 3 + 1], attributes.position.array[i * 3 + 2] ); distances[i] = [ cameraPosition.distanceTo(tmpPos), i]; } distances.sort(function(a, b) { return b[0] - a[0]; }); for (var val in attributes) { if (!attributes.hasOwnProperty(val)) { continue; } var itemSize = attributes[val].itemSize; var newArray = new Float32Array(itemSize * numPoints); for (i = 0; i < numPoints; ++i){ var index = distances[i][1]; for (var j = 0; j < itemSize; ++j) { var srcIndex = index * itemSize + j; var dstIndex = i * itemSize + j; newArray[dstIndex] = attributes[val].array[srcIndex]; } } attributes[val].array = newArray; attributes[val].needsUpdate = true; } };
}());
Pastel Pump - Script Codes
Pastel Pump - Script Codes
Home Page Home
Developer XORXOR
Username xorxor_hu
Uploaded January 27, 2023
Rating 4
Size 3,763 Kb
Views 4,048
Do you need developer help for Pastel Pump?

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
2050
Morphing Tubes
Complex Form with Black and White Spirals
Grid of Birds
Pipes
Cubic Tunnel
The Walking Raymarcher
Kaleidoscope
Birds
Complex Form with Black and White Bands
Create amazing video scripts 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!