Holy space cows from the strange universe of cyriak

Developer
Size
4,805 Kb
Views
20,240

How do I make an holy space cows from the strange universe of cyriak?

Tribute to cyriak. These are pieces of AE animations combined with canvas transforms to create all kind of alien cows. . What is a holy space cows from the strange universe of cyriak? How do you make a holy space cows from the strange universe of cyriak? This script and codes were developed by Kittons on 09 September 2022, Friday.

Holy space cows from the strange universe of cyriak Previews

Holy space cows from the strange universe of cyriak - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>holy space cows from the strange universe of cyriak</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <audio id="theSong" controls style="position: absolute;top: 0;left:0;right:0;margin:auto"></audio>
<canvas id="cvs"></canvas> <script src='https://labs.nearpod.com/bodymovin/demo/cows/animations.js'></script>
<script src='https://labs.nearpod.com/bodymovin/demo/cows/bodymovin.js'></script> <script src="js/index.js"></script>
</body>
</html>

Holy space cows from the strange universe of cyriak - Script Codes CSS Codes

body{ margin: 0; overflow:hidden; background-color: #FDFAD6;
}

Holy space cows from the strange universe of cyriak - Script Codes JS Codes

var cvs = document.getElementById('cvs'); var ctx = cvs.getContext('2d'); var elapsedTime = 0,prevTime,currentTime; var pooledCows = []; var cowInterval = 2000; var cowSpeed = 0.25; var transitionDuration = 0.7; var pass = 0; var easingValues = [0.36,-0.28,0.4,1.56]; var easingValues = [0.47,0.04,0.65,0.97]; var easingValues = [0.21,0.64,0.92,0.55]; //var easingValues = [.06,.45,.49,.98]; var headItems = []; var legItems = []; var animItems = []; var animDatas = [{d:cuerpo,l:true,arr:animItems},{d:full,l:true,arr:animItems},{d:cabeza1,l:true,arr:headItems},{d:cabeza2,l:true,arr:headItems},{d:cabeza3,l:true,arr:headItems},{d:cabeza4,l:true,arr:headItems},{d:patas1,l:true,arr:legItems},{d:patas2,l:true,arr:legItems},{d:patas3,l:true,arr:legItems}]; var activeCows = []; var cvWidth,cvHeight; function Cow(){ this.xOffset = 0; this.yOffset = 0; this.scale = 1; this.prevScale = 1; this.prevX = 0; this.prevXOffset = 0; this.prevYOffset = 0; } Cow.prototype.reset = function(){ this.active = true; this.initX = 0; this.elapsedTime = 0; this.anim = getAnimation(); activeCows.push(this); this.stretch = 1 - 0.3 + Math.random()*.6; var dir = Math.random()>.5 ? 1 : -1; this.stretch *= dir; }; Cow.prototype.update = function(diff){ ctx.save(); this.elapsedTime += diff; this.x = this.initX - this.elapsedTime*cowSpeed; var animData = this.anim[0].animationData.animation; if(this.x < -(cvWidth+animData.compWidth)){ this.active = false; return false; } if(this.elapsedTime<transitionDuration*1000){ var perc = this.elapsedTime/(transitionDuration*1000); //perc = easingFn('',perc,0,1,1); ctx.translate(this.prevX+perc*(this.x-this.prevX),-Math.sin((Math.PI)*perc)*450); ctx.translate( (this.prevXOffset)-perc*(this.prevXOffset-this.xOffset),-(this.prevYOffset)+perc*(this.prevYOffset-this.yOffset)); ctx.scale(this.prevScale+perc*(this.scale-this.prevScale),this.prevScale+perc*(this.scale-this.prevScale)); }else{ ctx.translate(this.x,0); ctx.translate(this.xOffset,-(this.yOffset)); ctx.scale(this.scale,this.scale); } ctx.translate( -animData.compWidth/2,-animData.compHeight); if(this.elapsedTime<transitionDuration*1000){ ctx.translate( animData.compWidth/2,animData.compHeight/2); ctx.rotate((720*Math.PI/180)*perc); ctx.translate( -animData.compWidth/2,-animData.compHeight/2); } ctx.translate(animData.compWidth/2,0); ctx.scale(this.stretch,1); ctx.translate( -animData.compWidth/2,0); var i, len = this.anim.length; for(i=0;i<len;i+=1){ this.anim[i].goToAndStop(this.elapsedTime); } ctx.restore(); return true; }; function getCow(){ var i=0, len = pooledCows.length; var cow; while(i<len){ cow = pooledCows[i]; if(!cow.active){ return cow; } i+=1; } cow = new Cow(); pooledCows.push(cow); return cow; } function getAnimation(){ var animSet = []; var rnd; if(pass > 5){ pass = 0; } if(pass == 4){ animSet.push(animItems[1]); return animSet; } if(pass >= 3){ rnd = Math.floor(Math.random()*animItems.length); animSet.push(animItems[0]); var arr; rnd = Math.floor(Math.random()*2); switch(rnd){ case 0: arr = headItems; break; case 1: arr = legItems; break; } var cnt = 1 + Math.floor(Math.random()*(arr.length-1)); while(cnt>0){ rnd = Math.floor(Math.random()*arr.length); animSet.push(arr[rnd]); cnt-=1; } return animSet; } if(pass == 0){ rnd = 0; }else{ rnd = Math.floor(Math.random()*animItems.length); } animSet.push(animItems[0]); if(pass == 0){ rnd = 0; }else{ rnd = Math.floor(Math.random()*headItems.length); } animSet.push(headItems[rnd]); if(pass == 0){ rnd = 0; }else{ rnd = Math.floor(Math.random()*legItems.length); } animSet.push(legItems[rnd]); return animSet; } function resize(){ cvs.width = window.innerWidth; cvs.height = window.innerHeight; cvWidth = cvs.width; cvHeight = cvs.height; } var rows = []; var dir = 1; function createNewRow(){ var prevRow = rows[rows.length-1]; var newRow =[]; var totalCows; var increment = .5; var changePass = false; if(dir == 1){ totalCows = prevRow.length*2; if(totalCows == 8){ dir = -1; changePass = true; } }else{ totalCows = prevRow.length/2; increment = 2; if(totalCows == 1){ dir = 1; changePass = true; } } var i,parentCow; var scale = totalCows == 1 ? 1 : 1.5/totalCows; var range = 500*(1-scale); for(i=0;i<totalCows;i+=1){ parentCow = Math.floor((i)*increment); var cow = getCow(); cow.reset(); cow.prevScale = prevRow[parentCow].scale; cow.scale = scale; cow.prevX = prevRow[parentCow].x; cow.prevYOffset = prevRow[parentCow].yOffset; cow.prevXOffset = prevRow[parentCow].xOffset; cow.yOffset = totalCows == 1 ? cvHeight/3 : (cvHeight/totalCows)*(i) - 40 + Math.floor(Math.random()*40); cow.xOffset = (-range/2 + Math.floor(Math.random()*range)); newRow.push(cow); } rows.push(newRow); if(changePass){ pass += 1; } } var beatReady = false; function update(){ requestAnimationFrame(update); currentTime = Date.now(); if(currentTime - prevTime > 500){ prevTime = currentTime; return; } elapsedTime += currentTime - prevTime; //// analyser.getByteFrequencyData(dataArray); len = dataArray.length; var average = 0; for(i=0;i<len;i+=1){ average += dataArray[i]; } average /= len; average += average*(1-volumeFactor); if(average > 100){ beatReady = true; } //console.log('average: ',average); //// cvs.width = cvWidth; ctx.translate(cvWidth,cvHeight); if(elapsedTime >= cowInterval && (beatReady || audio.paused)){ beatReady = false; createNewRow(); elapsedTime -= cowInterval; } var i, len = activeCows.length; for(i=0;i<len;i+=1){ if (!activeCows[i].update(currentTime - prevTime)){ activeCows.splice(i,1); i -= 1; len -= 1; } } prevTime = currentTime; } 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: 'noScale' }, animationData: JSON.parse(animDatas[i].d) }); animDatas[i].arr.push(anim); } bodymovin.stop(); } function start(){ prepareAnimations(); initSound(); prevTime = Date.now(); resize(); var cow = getCow(); cow.reset(); cow.prevYOffset = 0; cow.yOffset = cvHeight/3; rows.push([cow]); update(); } window.onresize = resize; ////// 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); audio.src = 'http://lab.nearpod.com/bodymovin/demo/cows/oddity.mp3'; } // log if an error occurs function onError(e) { console.log(e); } //// var getEasingCurve = (function(){ var easingFunctions = {}; return function(aa,bb,cc,dd,encodedFuncName) { if(!encodedFuncName){ encodedFuncName = ('bez_' + aa+'_'+bb+'_'+cc+'_'+dd).replace(/\./g, 'p'); } if(easingFunctions[encodedFuncName]){ return easingFunctions[encodedFuncName]; } var A0, B0, C0; var A1, B1, C1; easingFunctions[encodedFuncName] = function(x, t, b, c, d) { var tt = t/d; x = tt; var i = 0, z; while (++i < 14) { C0 = 3 * aa; B0 = 3 * (cc - aa) - C0; A0 = 1 - C0 - B0; z = (x * (C0 + x * (B0 + x * A0))) - tt; if (Math.abs(z) < 1e-3) break; x -= z / (C0 + x * (2 * B0 + 3 * A0 * x)); } C1 = 3 * bb; B1 = 3 * (dd - bb) - C1; A1 = 1 - C1 - B1; var polyB = x * (C1 + x * (B1 + x * A1)); return c * polyB + b; }; return easingFunctions[encodedFuncName]; } }()); var easingFn = getEasingCurve(easingValues[0],easingValues[1],easingValues[2],easingValues[3]); start();
Holy space cows from the strange universe of cyriak - Script Codes
Holy space cows from the strange universe of cyriak - Script Codes
Home Page Home
Developer Kittons
Username airnan
Uploaded September 09, 2022
Rating 4
Size 4,805 Kb
Views 20,240
Do you need developer help for Holy space cows from the strange universe of cyriak?

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
Create amazing love letters 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!