Fibonacci color test
How do I make an fibonacci color test?
What is a fibonacci color test? How do you make a fibonacci color test? This script and codes were developed by Sladix on 09 December 2022, Friday.
Fibonacci color test - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fibonacci color test</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas"></canvas>
<button id="reset">Redraw</button> <script src="js/index.js"></script>
</body>
</html>
Fibonacci color test - Script Codes CSS Codes
#reset{ vertical-align:top;
}
Fibonacci color test - Script Codes JS Codes
var canvas = document.getElementById('canvas');
canvas.width = 500;
canvas.height = 400;
var ctx = canvas.getContext('2d');
var baseUnit = 5;
var numFibo = 9;
var baseColor = '';
function getFibo(howmany)
{ var seed = [0,1]; for(var i = 0;i<howmany;i++) { var n = seed[i] + seed[i+1]; seed.push(n); } return seed;
}
function getRandomColor() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.floor(Math.random() * 7)]; } return color;
}
function getIndexColor(i)
{ var letters = '0123456789ABCDEF'; if(i == 1) { baseColor = getRandomColor() return baseColor; } var color = '#'; for (var i = 1; i <= 6; i++ ) { var j = (letters.indexOf(baseColor[i]) + 1) % 16; color += letters[j]; } baseColor = color; return color;
}
function drawSquare(size,pos,color){ ctx.beginPath(); ctx.fillStyle = color; ctx.rect(pos[0],pos[1],size*baseUnit,size*baseUnit); ctx.stroke(); ctx.fill();
}
var baseLeft=150,baseTop = 100;
var fibo = getFibo(numFibo);
function doSetTimeout(i,curLeft,curTop) { setTimeout(function() { drawSquare(fibo[i],[curLeft,curTop],getIndexColor(i)); }, i*200);
}
function drawFibo(){ var curTop = baseTop; var curLeft = baseLeft; var curRight = curLeft + baseUnit; var curBottom = curTop + baseUnit; ctx.clearRect(0,0,canvas.width,canvas.height); for(var i = 1;i<fibo.length;i++) { var j = (i-1)%4; switch(j){ case 0: curRight = curLeft + fibo[i]*baseUnit curLeft = curLeft curTop = curBottom curBottom = curBottom + fibo[i]*baseUnit break; case 1: curLeft = curRight curRight = curRight + fibo[i]*baseUnit curTop = curBottom - fibo[i]*baseUnit curBottom = curBottom break; case 2: curLeft = curRight - fibo[i]*baseUnit curRight = curRight curBottom = curTop curTop = curBottom - fibo[i]*baseUnit break; case 3: curRight = curLeft curLeft = curLeft - fibo[i]*baseUnit curBottom = curTop + fibo[i]*baseUnit curTop = curTop break; } doSetTimeout(i,curLeft,curTop); }
}
drawFibo();
document.getElementById("reset").addEventListener('click',drawFibo);
Developer | Sladix |
Username | Sladix |
Uploaded | December 09, 2022 |
Rating | 3 |
Size | 2,310 Kb |
Views | 4,048 |
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!
Name | Size |
HMD | 8,249 Kb |
Visualizer tests | 3,361 Kb |
Agent Chaos | 4,709 Kb |
Canvas snake animation random bezier curve looped | 2,882 Kb |
A Pen by Sladix | 3,349 Kb |
CSS Letter animations | 2,116 Kb |
Text reveal test | 2,423 Kb |
Responsive Stack slider | 3,527 Kb |
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!
Name | Username | Size |
Default Input, Textareas, Submits, and Buttons in iOS | Demersdesigns | 2,334 Kb |
CSS Bot Confusion | Jpod | 3,456 Kb |
Old calculator | Gnarfugh | 2,815 Kb |
CSS Org Chart | Appirio-ux | 3,882 Kb |
No Vacancy 404 CSS Only | Sethkontny | 0 Kb |
Exploding Text | Jjmartucci | 4,749 Kb |
Perspective Origin Demo | Agelber | 3,614 Kb |
Ball Physics | Getsetbro | 3,149 Kb |
Ionic - Wordpress REST API starter | Superpikar | 2,961 Kb |
A Pen by Xand0r | Xand0r | 1,928 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!