{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr; web-share","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails","cpedata":{"action":"show","controller":"live_fullpage"}},"__user":{"anon":true,"base_url":"/anon/","current_team_id":0,"current_team_hashid":null,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjg1NDEwMzE1LCJpYXQiOjE2ODU0MDY3MTUsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.OpR88AS6MY_p4NOsNEMFZuOMGcI6MYAowDaQvYfAUk1vXXg1QExYdekEjprRfMiyd-FQ--S3srL0Hj1Si2T53IpzIhJ-LYLPUlQVhlOt86FMBSBh_LxcsvVQOObUWChRXkoo3ElteEKowlvHDIoUghln999wE9OSifjFKlAH3dg-SxLr46jTk0gwGZAgywE94NligTIxIXpOYEEKa3HwDzSt0XyJtR74Hs3fq7lODfmN9-SFnGC9NKTpVSu0Wg7xkTqAb43js-6EXAIH405nRmL98beYfTpzYpKC2WmvOpSXLkG0WSrJoccjfRRXFFw6eUigYEFgjxS98N8vZZ9fIA"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":48671668,\"user_id\":3685267,\"html\":\"<script src=\\\"https:\\/\\/cdn.jsdelivr.net\\/npm\\/three@0.115.0\\/build\\/three.min.js\\\"><\\/script>\\n<script src=\\\"https:\\/\\/cdn.jsdelivr.net\\/npm\\/three@0.115.0\\/examples\\/js\\/controls\\/OrbitControls.js\\\"><\\/script>\\n\\n<script src=\\\"https:\\/\\/cdn.jsdelivr.net\\/npm\\/three@0.115.0\\/examples\\/js\\/postprocessing\\/EffectComposer.js\\\"><\\/script>\\n<script src=\\\"https:\\/\\/cdn.jsdelivr.net\\/npm\\/three@0.115.0\\/examples\\/js\\/postprocessing\\/RenderPass.js\\\"><\\/script>\\n<script src=\\\"https:\\/\\/cdn.jsdelivr.net\\/npm\\/three@0.115.0\\/examples\\/js\\/postprocessing\\/ShaderPass.js\\\"><\\/script>\\n<script src=\\\"https:\\/\\/cdn.jsdelivr.net\\/npm\\/three@0.115.0\\/examples\\/js\\/shaders\\/CopyShader.js\\\"><\\/script>\\n<script src=\\\"https:\\/\\/cdn.jsdelivr.net\\/npm\\/three@0.115.0\\/examples\\/js\\/shaders\\/LuminosityHighPassShader.js\\\"><\\/script>\\n<script src=\\\"https:\\/\\/cdn.jsdelivr.net\\/npm\\/three@0.115.0\\/examples\\/js\\/postprocessing\\/UnrealBloomPass.js\\\"><\\/script>\\n<script type=\\\"x-shader\\/x-vertex\\\" id=\\\"vertex-shader\\\">\\n uniform float time;\\n attribute vec3 customColor;\\n varying vec3 vColor;\\n \\/\\/\\tSimplex 4D Noise\\n \\/\\/\\tby Ian McEwan, Ashima Arts\\n \\/\\/\\n vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}\\n float permute(float x){return floor(mod(((x*34.0)+1.0)*x, 289.0));}\\n vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}\\n float taylorInvSqrt(float r){return 1.79284291400159 - 0.85373472095314 * r;}\\n\\n vec4 grad4(float j, vec4 ip){\\n const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0);\\n vec4 p,s;\\n\\n p.xyz = floor( fract (vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0;\\n p.w = 1.5 - dot(abs(p.xyz), ones.xyz);\\n s = vec4(lessThan(p, vec4(0.0)));\\n p.xyz = p.xyz + (s.xyz*2.0 - 1.0) * s.www;\\n\\n return p;\\n }\\n\\n float snoise(vec4 v){\\n const vec2 C = vec2( 0.138196601125010504, \\/\\/ (5 - sqrt(5))\\/20 G4\\n 0.309016994374947451); \\/\\/ (sqrt(5) - 1)\\/4 F4\\n \\/\\/ First corner\\n vec4 i = floor(v + dot(v, C.yyyy) );\\n vec4 x0 = v - i + dot(i, C.xxxx);\\n\\n \\/\\/ Other corners\\n\\n \\/\\/ Rank sorting originally contributed by Bill Licea-Kane, AMD (formerly ATI)\\n vec4 i0;\\n\\n vec3 isX = step( x0.yzw, x0.xxx );\\n vec3 isYZ = step( x0.zww, x0.yyz );\\n \\/\\/ i0.x = dot( isX, vec3( 1.0 ) );\\n i0.x = isX.x + isX.y + isX.z;\\n i0.yzw = 1.0 - isX;\\n\\n \\/\\/ i0.y += dot( isYZ.xy, vec2( 1.0 ) );\\n i0.y += isYZ.x + isYZ.y;\\n i0.zw += 1.0 - isYZ.xy;\\n\\n i0.z += isYZ.z;\\n i0.w += 1.0 - isYZ.z;\\n\\n \\/\\/ i0 now contains the unique values 0,1,2,3 in each channel\\n vec4 i3 = clamp( i0, 0.0, 1.0 );\\n vec4 i2 = clamp( i0-1.0, 0.0, 1.0 );\\n vec4 i1 = clamp( i0-2.0, 0.0, 1.0 );\\n\\n \\/\\/ x0 = x0 - 0.0 + 0.0 * C\\n vec4 x1 = x0 - i1 + 1.0 * C.xxxx;\\n vec4 x2 = x0 - i2 + 2.0 * C.xxxx;\\n vec4 x3 = x0 - i3 + 3.0 * C.xxxx;\\n vec4 x4 = x0 - 1.0 + 4.0 * C.xxxx;\\n\\n \\/\\/ Permutations\\n i = mod(i, 289.0);\\n float j0 = permute( permute( permute( permute(i.w) + i.z) + i.y) + i.x);\\n vec4 j1 = permute( permute( permute( permute (\\n i.w + vec4(i1.w, i2.w, i3.w, 1.0 ))\\n + i.z + vec4(i1.z, i2.z, i3.z, 1.0 ))\\n + i.y + vec4(i1.y, i2.y, i3.y, 1.0 ))\\n + i.x + vec4(i1.x, i2.x, i3.x, 1.0 ));\\n \\/\\/ Gradients\\n \\/\\/ ( 7*7*6 points uniformly over a cube, mapped onto a 4-octahedron.)\\n \\/\\/ 7*7*6 = 294, which is close to the ring size 17*17 = 289.\\n\\n vec4 ip = vec4(1.0\\/294.0, 1.0\\/49.0, 1.0\\/7.0, 0.0) ;\\n\\n vec4 p0 = grad4(j0, ip);\\n vec4 p1 = grad4(j1.x, ip);\\n vec4 p2 = grad4(j1.y, ip);\\n vec4 p3 = grad4(j1.z, ip);\\n vec4 p4 = grad4(j1.w, ip);\\n\\n \\/\\/ Normalise gradients\\n vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));\\n p0 *= norm.x;\\n p1 *= norm.y;\\n p2 *= norm.z;\\n p3 *= norm.w;\\n p4 *= taylorInvSqrt(dot(p4,p4));\\n\\n \\/\\/ Mix contributions from the five corners\\n vec3 m0 = max(0.6 - vec3(dot(x0,x0), dot(x1,x1), dot(x2,x2)), 0.0);\\n vec2 m1 = max(0.6 - vec2(dot(x3,x3), dot(x4,x4) ), 0.0);\\n m0 = m0 * m0;\\n m1 = m1 * m1;\\n return 49.0 * ( dot(m0*m0, vec3( dot( p0, x0 ), dot( p1, x1 ), dot( p2, x2 )))\\n + dot(m1*m1, vec2( dot( p3, x3 ), dot( p4, x4 ) ) ) ) ;\\n\\n }\\n void main() {\\n vColor = customColor;\\n vec3 p = position;\\n float r = snoise(vec4(p*0.015, time*0.0005));\\n p.y += p.y*r*0.1;\\n p.x += p.x*r*0.1;\\n p.z += p.z*r*0.1;\\n vec4 mvPosition = modelViewMatrix * vec4( p, 1.0 );\\n gl_PointSize = 10. * (100.0\\/-mvPosition.z);\\n gl_Position = projectionMatrix * mvPosition;\\n }\\n<\\/script>\\n\\n<script type=\\\"x-shader\\/x-fragment\\\" id=\\\"fragment-shader\\\">\\n varying vec3 vColor;\\n void main() {\\n gl_FragColor = vec4(vColor, 0.1);\\n }\\n<\\/script>\",\"css\":\"body {\\n margin: 0;\\n padding: 0;\\n height: 100vh;\\n overflow: hidden;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n background: #000;\\n}\\n\",\"js\":\"const params = {\\n exposure: 1,\\n bloomStrength: 0.87,\\n bloomThreshold: 0,\\n bloomRadius: 0.26\\n};\\nconst { min, PI, sqrt, cos, sin, pow, floor } = Math;\\nconst range = (n) =>\\n Array(n)\\n .fill(0)\\n .map((i, j) => i + j);\\n\\nconst sum = (arr) => arr.reduce((acc, cur) => acc + cur, 0);\\nconst slicedSum = (arr, i) => sum(arr.slice(0, i));\\nconst pointsOnSphere = (n) => {\\n const pts = [];\\n const inc = PI * (3 - sqrt(5));\\n const off = 2 \\/ n;\\n range(n).forEach((i) => {\\n const y = i * off - 1 + off \\/ 2;\\n const r = sqrt(1 - y * y);\\n const phi = i * inc;\\n const x = cos(phi) * r;\\n const z = sin(phi) * r;\\n pts.push([x, y, z]);\\n });\\n return pts;\\n};\\n\\nconst numMap = (value, sMin, sMax, dMin, dMax) => {\\n return dMin + ((value - sMin) \\/ (sMax - sMin)) * (dMax - dMin);\\n};\\n\\nconst colArray = [0xed2225, 0xf99621, 0xf1eb1b, 0x0c9b49, 0x3954a5, 0x93298e];\\ncolArray.reverse();\\nlet camera, controls, scene, renderer, cloud, composer, bloomPass, meshPlanet;\\nconst uniforms = {\\n time: { type: \\\"f\\\", value: 1.0 }\\n};\\n\\nlet { innerWidth, innerHeight } = window;\\nlet canvasSize = min(innerWidth, innerHeight);\\n\\ninit();\\nanimate();\\n\\nfunction init() {\\n scene = new THREE.Scene();\\n\\n renderer = new THREE.WebGLRenderer({ antialias: true });\\n renderer.setPixelRatio(window.devicePixelRatio);\\n renderer.setSize(canvasSize, canvasSize);\\n document.body.appendChild(renderer.domElement);\\n\\n camera = new THREE.PerspectiveCamera(60, 1, 1, 1000);\\n camera.position.set(128, 90, 474);\\n\\n controls = new THREE.OrbitControls(camera, renderer.domElement);\\n\\n const ambientLight = new THREE.AmbientLight(0x666666);\\n scene.add(ambientLight);\\n\\n const renderScene = new THREE.RenderPass(scene, camera);\\n\\n bloomPass = new THREE.UnrealBloomPass(\\n new THREE.Vector2(window.innerWidth, window.innerHeight),\\n 1.5,\\n 0.4,\\n 0.85\\n );\\n bloomPass.threshold = params.bloomThreshold;\\n bloomPass.strength = params.bloomStrength;\\n bloomPass.radius = params.bloomRadius;\\n composer = new THREE.EffectComposer(renderer);\\n composer.addPass(renderScene);\\n composer.addPass(bloomPass);\\n createObjects();\\n createGlobe();\\n window.addEventListener(\\\"resize\\\", onWindowResize, false);\\n}\\n\\nfunction onWindowResize() {\\n camera.aspect = 1;\\n camera.updateProjectionMatrix();\\n innerWidth = window.innerWidth;\\n innerHeight = window.innerHeight;\\n canvasSize = min(innerWidth, innerHeight);\\n composer.setSize(canvasSize, canvasSize);\\n}\\n\\nfunction animate(time) {\\n uniforms.time.value = time;\\n meshPlanet.rotation.y -= 0.006;\\n requestAnimationFrame(animate);\\n render();\\n}\\n\\nfunction render() {\\n composer.render();\\n}\\n\\nfunction createObjects() {\\n const layers = range(6).map((i) => canvasSize * pow(2, i + 1));\\n layers.reverse();\\n const amount = sum(layers);\\n const positions = new Float32Array(amount * 3);\\n const colors = new Float32Array(amount * 3);\\n const vertex = new THREE.Vector3();\\n layers.forEach((layer, layerIndex) => {\\n const points = pointsOnSphere(layer);\\n points.forEach(([x, y, z], pointIndex) => {\\n const index = slicedSum(layers, layerIndex) + pointIndex;\\n const color = new THREE.Color(\\n colArray[floor(numMap(pointIndex, 0, layer, 0, colArray.length))]\\n );\\n const radius = 140 + numMap(layerIndex, 0, layers.length, 0, 120);\\n vertex.x = radius * x;\\n vertex.y = radius * y;\\n vertex.z = radius * z;\\n vertex.toArray(positions, index * 3);\\n color.toArray(colors, index * 3);\\n });\\n });\\n\\n const geometry = new THREE.BufferGeometry();\\n geometry.setAttribute(\\\"position\\\", new THREE.BufferAttribute(positions, 3));\\n geometry.setAttribute(\\\"customColor\\\", new THREE.BufferAttribute(colors, 3));\\n\\n const material = new THREE.ShaderMaterial({\\n uniforms,\\n vertexShader: document.querySelector(\\\"#vertex-shader\\\").textContent,\\n fragmentShader: document.querySelector(\\\"#fragment-shader\\\").textContent,\\n blending: THREE.AdditiveBlending,\\n depthTest: false,\\n transparent: true\\n });\\n cloud = new THREE.Points(geometry, material);\\n scene.add(cloud);\\n}\\n\\nfunction createGlobe() {\\n const textureLoader = new THREE.TextureLoader();\\n const radius = 100;\\n const tilt = 0.409105177;\\n const materialNormalMap = new THREE.MeshPhongMaterial({\\n specular: 0x333333,\\n shininess: 1,\\n map: textureLoader.load(\\\"https:\\/\\/assets.codepen.io\\/3685267\\/earth.jpg\\\"),\\n normalScale: new THREE.Vector2(0.85, -0.85)\\n });\\n const geometry = new THREE.SphereBufferGeometry(radius, 100, 50);\\n meshPlanet = new THREE.Mesh(geometry, materialNormalMap);\\n meshPlanet.rotation.y = 0;\\n meshPlanet.rotation.z = tilt;\\n scene.add(meshPlanet);\\n}\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2020-11-26T16:09:14.000Z\",\"updated_at\":\"2020-11-26T16:19:09.000Z\",\"title\":\"Unity 🌈\",\"description\":\"\",\"slug_hash\":\"eYdYvaY\",\"head\":\"\",\"private\":false,\"slug_hash_private\":\"a6cf752ef38f04a6559424a9c6a1b0e3\",\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"01760550-dc10-7bee-b682-937669ec4d56\",\"is_new_editor_pen\":false,\"pen_hash\":null,\"hashid\":\"eYdYvaY\"}"}