Tribute to white stripes

Developer
Kittons
Size
4,748 Kb
Views
26,312
  1. Tribute to white stripes Previews
  2. Tribute to white stripes HTML Codes
  3. Tribute to white stripes CSS Codes
  4. Tribute to white stripes JS Codes

How do I make an tribute to white stripes?

7 nation army video tribute for the triangles weekend the animation plays along with the audio borrowed part of the audio code from @DonKarlssonSan . What is a tribute to white stripes? How do you make a tribute to white stripes? This script and codes were developed by Kittons on 09 September 2022, Friday.

Tribute to white stripes Previews
IQ Test

Tribute to white stripes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tribute to white stripes</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <audio id="theSong" controls></audio>
<canvas style="position:absolute;top:0;bottom:0;left:0;right:0;margin:auto" id='cvs'></canvas> <script src='https://labs.nearpod.com/bodymovin/demo/stripes/bodymovin.js'></script>
<script src='https://labs.nearpod.com/bodymovin/demo/stripes/jackGrey.js'></script>
<script src='https://labs.nearpod.com/bodymovin/demo/stripes/jackGrey2.js'></script>
<script src='https://labs.nearpod.com/bodymovin/demo/stripes/jackGrey3.js'></script>
<script src='https://labs.nearpod.com/bodymovin/demo/stripes/megGrey.js'></script>
<script src='https://labs.nearpod.com/bodymovin/demo/stripes/megGrey2.js'></script>
<script src='https://labs.nearpod.com/bodymovin/demo/stripes/megGrey3.js'></script> <script src="js/index.js"></script>
</body>
</html>

Tribute to white stripes - Script Codes CSS Codes

body{ margin: 0; background-color: black; overflow: ;
}

Tribute to white stripes - Script Codes JS Codes

var originalW = 1000; var originalH = 500; var cvs = document.getElementById('cvs'); var cvWidth = 1000; var cvHeight = 500; var ctx = cvs.getContext('2d'); var cameraSpeed = 300; var speedFactor = 1; var cameraZ = 0; var currentSegment = 0; var elapsedAnimTime = 0; var elapsedDistance = 0; var segmentLength = 200; var triangleInitDistance = 1000; var initScale = 0; var endScale = 4; var hLine = 100; var lastTime; var trianglesPool = []; var animationsPool = []; var activeElements = []; var colors = ['#fff','#000','#fff','#333']; var currentColor = 0; var currentItem = 0; var currentMouseX = 0; //var animDatas = [{d:jackData,l:true},{d:megData,l:true},{d:jackData2,l:false},{d:megData2,l:true}]; var animDatas = [{d:jackData,l:true},{d:megData,l:true},{d:jackData2,l:false},{d:megData2,l:true},{d:jackData3,l:true},{d:megData3,l:true}]; var currentAnim = 0; //var animDatas = [hombreData]; var animItems = []; var doThunder = false; function getMousePosition(e) { handleMouseMove(e.pageX,e.pageY); } function getTouchPosition(e) { handleMouseMove(e.targetTouches[0].e,targetTouches[0].pageY); } function handleMouseMove(x,y){ currentMouseX = x - 500; //cameraSpeed = 20 + (y/500)*380; } function Element(){ this.available = true; } Element.prototype.setDistance = function(d){ this.distance = d; }; Element.prototype.update = function(distance){ this.distance -= distance; if(this.distance < 0){ this.available = true; return; } this.perc = this.distance/triangleInitDistance; this.scale = (endScale - initScale)*(1-this.perc) + initScale; }; function Triangle(){ } Triangle.prototype = Object.create(Element.prototype); Triangle.prototype.setColor = function(c){ this.color = c; }; Triangle.prototype.draw = function(){ ctx.save(); ctx.translate(this.xOffset,-hLine*this.perc); ctx.scale(this.scale*1.25,this.scale*1.25); if(doThunder){ var col = Math.floor(Math.random()*255); ctx.fillStyle = 'rgb('+col+','+col+','+col+')'; }else{ ctx.fillStyle = this.color; } ctx.beginPath(); ctx.moveTo(-cvWidth/4,0); ctx.lineTo(0, -cvHeight); ctx.lineTo(cvWidth/4,0); ctx.fill(); ctx.closePath(); ctx.scale(1,-1); ctx.globalAlpha = .3; ctx.beginPath(); ctx.moveTo(-cvWidth/4,0); ctx.lineTo(0, -cvHeight); ctx.lineTo(cvWidth/4,0); ctx.fill(); ctx.closePath(); ctx.globalAlpha = 1; ctx.restore(); }; function Animation(){ } Animation.prototype = Object.create(Element.prototype); Animation.prototype.setData = function(anim){ this.anim = anim; }; Animation.prototype.draw = function(){ ctx.save(); ctx.translate(this.xOffset,-hLine*this.perc); ctx.scale(this.scale,this.scale); ctx.translate(-this.anim.animationData.animation.compWidth/2,-this.anim.animationData.animation.compHeight); this.anim.goToAndStop(Date.now()-this.initTime); /* --- REFLECTION -- ctx.translate(this.anim.animationData.animation.compWidth/2,this.anim.animationData.animation.compHeight); ctx.scale(1,-1); ctx.translate(-this.anim.animationData.animation.compWidth/2,-this.anim.animationData.animation.compHeight); ctx.globalAlpha = .4; this.anim.goToAndStop(Date.now()-this.initTime); ctx.globalAlpha = 1; // -- END REFLECTION */ ctx.restore(); }; function getTriangle(){ var i=0, len = trianglesPool.length,t; while(i<len){ if(trianglesPool[i].available){ trianglesPool[i].available = false; activeElements.push(trianglesPool[i]); return trianglesPool[i]; } i += 1; } t = new Triangle(); t.available = false; trianglesPool.push(t); activeElements.push(t); t.id = 'id_'+trianglesPool.length; return t; } function getAnimation(){ var i=0, len = animationsPool.length,t; while(i<len){ if(animationsPool[i].available){ animationsPool[i].available = false; animationsPool[i].setData(getAnim()); activeElements.push(animationsPool[i]); return animationsPool[i]; } i += 1; } t = new Animation(); t.setData(getAnim()); t.available = false; animationsPool.push(t); activeElements.push(t); t.id = 'id_'+animationsPool.length; return t; } function updateTriangles(elapsedDistance){ var triangle,i, len = activeElements.length; for(i=0;i<len;i+=1){ triangle = activeElements[i]; triangle.update(elapsedDistance); triangle.draw(); } for(i=0;i<len;i+=1){ triangle = activeElements[i]; if(triangle.available){ activeElements.splice(i,1); i -= 1; len -= 1; } } } function clearUnavailableTriangles(){ } function getColor(){ var col = colors[currentColor]; currentColor += 1; if(currentColor == colors.length){ currentColor = 0; } return col; } function getAnim(){ var anim = animItems[currentAnim]; currentAnim += 1; if(currentAnim == animItems.length){ currentAnim = 0; } return anim; } function addNewElement(){ var element; if(currentItem == 0){ element = getTriangle(); element.setDistance(triangleInitDistance - currentSegment); element.setColor(getColor()); currentItem = 1; }else if(currentItem == 1){ element = getTriangle(); element.setDistance(triangleInitDistance - currentSegment); element.setColor(getColor()); currentItem = 2; }else if(currentItem == 2){ element = getAnimation(); element.setDistance(triangleInitDistance - currentSegment); element.initTime = Date.now(); currentItem = 0; } //element.xOffset = currentMouseX; element.xOffset = 0; } function update(){ cvs.width = cvs.width; ctx.fillRect(0,0,cvs.width,cvs.height); ctx.fillStyle = 'white'; ctx.translate(trX,trY); ctx.scale(cvScale,cvScale); ctx.translate(cvWidth/2,cvHeight+40); var currentTime = Date.now(); if(currentTime - lastTime > 500){ lastTime = currentTime; } elapsedAnimTime = (currentTime - lastTime)/1000; elapsedDistance = elapsedAnimTime*cameraSpeed; cameraZ += elapsedDistance; currentSegment += elapsedDistance; updateTriangles(elapsedDistance); if(currentSegment > segmentLength){ currentSegment -= segmentLength; addNewElement(); } requestAnimationFrame(update); lastTime = currentTime; //// //console.log('average: ',average); if(volumeFactor == 0){ cameraSpeed = 100; }else{ analyser.getByteFrequencyData(dataArray); var len = dataArray.length; var i,average = 0; for(i=0;i<len;i+=1){ average += dataArray[i]; } average /= len; average += average*(1-volumeFactor); cameraSpeed = 100 + ((average/100))*300; } doThunder = average >= 95; } function thunder(){ doThunder = true; } function dethunder(){ doThunder = false; } function prepareAnimations(){ var i, len = animDatas.length; var anim; for(i=0;i<len;i+=1){ anim = bodymovin.loadAnimation({ animType: 'canvas', loop: animDatas[i].l, autoplay: false, prerender: false, renderer:{ clearCanvas: false, context: ctx, scaleMode: 'noScane' }, animationData: JSON.parse(animDatas[i].d) }); animItems.push(anim); } bodymovin.stop(); } function setup(){ prepareAnimations(); addNewElement(); lastTime = Date.now(); } var cnt = 0; var cvScale,trX,trY; function resize(){ var winW = window.innerWidth; var winH = window.innerHeight; if(winW/winH > originalW/originalH){ cvs.height = Math.min(originalH,window.innerHeight); cvs.width = cvs.height*originalW/originalH; }else{ cvs.width = Math.min(originalW,window.innerWidth); cvs.height = cvs.width*originalH/originalW; } //cvs.width = originalW; //cvs.height = originalH; var cvW = cvs.width; var cvH = cvs.height; var cvRel = cvW/cvH; var originalRel = originalW/originalH; if(originalRel>cvRel){ cvScale = cvW/originalW; trX = 0; trY = cvH - originalH*cvScale; }else{ cvScale = cvH/originalH; trY = 0; trX = cvW - originalW*cvScale; } } ////// var AudioContext = window.AudioContext || window.webkitAudioContext; var audioContext; var audio; var bufferLength; var bufferDrawLength; var fftSize = 128; var volumeFactor = 1; function initSound() { audioContext = new AudioContext(); audio = document.getElementById("theSong"); audio.crossOrigin = "anonymous"; audio.addEventListener("error", onerror, false); volumeFactor = audio.volume; audio.onvolumechange = function() { audio.volume = 1; volumeFactor = audio.volume; }; var source = audioContext.createMediaElementSource(audio); source.connect(audioContext.destination); analyser = audioContext.createAnalyser(); source.connect(analyser); analyser.fftSize = fftSize; //analyser.smoothingTimeConstant = 0.9; bufferLength = analyser.frequencyBinCount; // The end of the array that analyser.getByteFrequencyData() // returns seems quiet. So we ignoring the last 30%. bufferDrawLength = bufferLength; dataArray = new Uint8Array(bufferLength); } function get(url, callback) { var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (request.readyState === 4 && request.status === 200) { callback(request.responseText); } }; request.open("GET", url, true); request.send(null); } function findTrack() { //var clientParameter = "client_id=3d3bd998f63a0c1f1428a7e62c5a560f"; var clientParameter = "client_id=9bbe436354cae5b86a9788edcf3513f8"; var trackPermalinkUrl = "https://soundcloud.com/jordanrvschool/the-white-stripes-seven-nation"; try { get("https://api.soundcloud.com/resolve.json?url=" + trackPermalinkUrl + "&" + clientParameter, function (response) { var trackInfo = JSON.parse(response); audio.src = trackInfo.stream_url + "?" + clientParameter; } ); } catch (ex) { console.log(ex); } }; initSound(); findTrack(); ////// setup(); resize(); update();
Tribute to white stripes - Script Codes
Tribute to white stripes - Script Codes
Home Page Home
Developer Kittons
Username airnan
Uploaded September 09, 2022
Rating 4
Size 4,748 Kb
Views 26,312
Do you need developer help for Tribute to white stripes?

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!

Kittons (airnan) Script Codes
Name
Svg jou jou monster
The Glitcher
Shapes recolored
A christmas loop in svg
Behind the Grunt
Don dalek
Bacon Pancakes
Murally
Franchise - Animography Text Editor
Adventure Interactive Time in 2.75D
Create amazing Facebook ads 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!