moved tips to a separate file
This commit is contained in:
+2
-2
@@ -70,11 +70,11 @@ function pauseAnimBtn(state) {
|
|||||||
|
|
||||||
if (state == "true") {
|
if (state == "true") {
|
||||||
isAnimating = true
|
isAnimating = true
|
||||||
pauseBtn.src = "/assets/pauseAnimation_8x8.png"
|
pauseBtn.src = "./assets/pauseAnimation_8x8.png"
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
isAnimating = false
|
isAnimating = false
|
||||||
pauseBtn.src = "/assets/playAnimation_8x8.png"
|
pauseBtn.src = "./assets/playAnimation_8x8.png"
|
||||||
}
|
}
|
||||||
|
|
||||||
localStorage["isAnimating"] = state
|
localStorage["isAnimating"] = state
|
||||||
|
|||||||
+23
-20
@@ -11,67 +11,70 @@
|
|||||||
<link rel="stylesheet" href="/loadingScreen.css">
|
<link rel="stylesheet" href="/loadingScreen.css">
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
<link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
|
<link rel="icon" type="image/png" href="./assets/favicon_32x32.png">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body style="background-color: #323232; color: #ffffff;">
|
<body style="background-color: #323232; color: #ffffff;">
|
||||||
<div id="mainDiv">
|
<div id="mainDiv">
|
||||||
<img src="/assets/bgGradient_256x164.png" class="bgGradient">
|
<img src="./assets/bgGradient_256x164.png" class="bgGradient">
|
||||||
|
|
||||||
<img src="/assets/starNoise_512x512.png" draggable="false" id="starNoise">
|
<img src="./assets/starNoise_512x512.png" draggable="false" id="starNoise">
|
||||||
<img src="/assets/synthwaveSun_40x40.png" draggable="false" class="synthSun">
|
<img src="./assets/synthwaveSun_40x40.png" draggable="false" class="synthSun">
|
||||||
<canvas id="synthwave" style="position: absolute; bottom: round(0%, var(--pxDensityPx)); left: round(0%, var(--pxDensityPx));"></canvas>
|
|
||||||
|
<canvas id="synthwaveCanvas"></canvas>
|
||||||
|
|
||||||
<!-- change discord URL to server URL -->
|
<!-- change discord URL to server URL -->
|
||||||
<ul class="navBar">
|
<ul class="navBar">
|
||||||
<li>
|
<li>
|
||||||
<!-- discord URL -->
|
<!-- discord URL -->
|
||||||
<button onclick="slideTransition('https://discord.com')" class="navBtn">
|
<button onclick="slideTransition('https://discord.com')" class="navBtn">
|
||||||
<img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
|
<img class="navBtnImg" draggable="false" src="./assets/navBarBtn.png">
|
||||||
<img class="navBtnIcon" draggable="false" src="/assets/discord_8x8.png">
|
<img class="navBtnIcon" draggable="false" src="./assets/discord_8x8.png">
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<button onclick="slideTransition('https://youtube.com/@ByteDice')" class="navBtn">
|
<button onclick="slideTransition('https://youtube.com/@ByteDice')" class="navBtn">
|
||||||
<img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
|
<img class="navBtnImg" draggable="false" src="./assets/navBarBtn.png">
|
||||||
<img class="navBtnIcon" draggable="false" src="/assets/youtube_8x8.png">
|
<img class="navBtnIcon" draggable="false" src="./assets/youtube_8x8.png">
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<button onclick="slideTransition('https://github.com/ByteDice')" class="navBtn">
|
<button onclick="slideTransition('https://github.com/ByteDice')" class="navBtn">
|
||||||
<img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
|
<img class="navBtnImg" draggable="false" src="./assets/navBarBtn.png">
|
||||||
<img class="navBtnIcon" draggable="false" src="/assets/github_8x8.png">
|
<img class="navBtnIcon" draggable="false" src="./assets/github_8x8.png">
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<button class="navBtn">
|
<button class="navBtn">
|
||||||
<img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
|
<img class="navBtnImg" draggable="false" src="./assets/navBarBtn.png">
|
||||||
<img class="navBtnIcon" draggable="false" src="/assets/powerplates_8x8.png">
|
<img class="navBtnIcon" draggable="false" src="./assets/powerplates_8x8.png">
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<button onClick="pauseAnimBtn('auto')" class="navBtn">
|
<button onClick="pauseAnimBtn('auto')" class="navBtn">
|
||||||
<img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
|
<img class="navBtnImg" draggable="false" src="./assets/navBarBtn.png">
|
||||||
<img class="navBtnIcon" draggable="false" src="" id="animationToggle">
|
<img class="navBtnIcon" draggable="false" src="./assets/pauseAnimation_8x8.png" id="animationToggle">
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bgDiv" id="loadingScreen">
|
<div class="bgDiv" id="loadingScreen">
|
||||||
<img class="loadingImg" draggable="false" src="/assets/byteDiceBlinkAnim_32x32.png">
|
<img class="loadingImg" draggable="false" src="./assets/byteDiceBlinkAnim_32x32.png">
|
||||||
<button class="pxFont" onclick="stopShowingLoading()" id="loadingCornerText">
|
<button class="pxFont" onclick="stopShowingLoading()" id="loadingCornerText">
|
||||||
Press ESC to instantly close the loading screen<br>Or click me to never see it again.
|
Press ESC to instantly close the loading screen<br>Or click me to never see it again.
|
||||||
</button>
|
</button>
|
||||||
<p id="loadingText">Loading...<br>Loading files...<br><br>Tip: Tip loading...</p>
|
<p id="loadingText">Loading...<br>Loading files...<br><br>Tip: Tip loading...</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="/globalScript.js"></script>
|
|
||||||
<script src="/pxDensity.js"></script>
|
<script src="./globalScript.js"></script>
|
||||||
<script src="/synthwaveEffect.js"></script>
|
<script src="./pxDensity.js"></script>
|
||||||
<script src="/script.js"></script>
|
|
||||||
<script src="/loadingScreen.js"></script>
|
<script src="/loadingScreen.js"></script>
|
||||||
<script src="/screenTransition.js"></script>
|
<script src="/screenTransition.js"></script>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
<script src="synthwaveEffect.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
+19
-16
@@ -3,27 +3,30 @@ let stopLoading = false
|
|||||||
let loadingScreenProgress = document.getElementById("loadingText")
|
let loadingScreenProgress = document.getElementById("loadingText")
|
||||||
let loadingScreenEl = document.getElementById("loadingScreen")
|
let loadingScreenEl = document.getElementById("loadingScreen")
|
||||||
|
|
||||||
let tips = [
|
|
||||||
"Just don't die.",
|
|
||||||
"Did you know this is a tip?",
|
|
||||||
"Is thisn't not very un-understandable?",
|
|
||||||
"m".repeat(200),
|
|
||||||
"Bad at a game? Just press the \"get good at games\" button!",
|
|
||||||
"I AM NOT A FEMBOY NOR GAY. (I support though :thumbsup:)",
|
|
||||||
"You should listen to that song that goes \"do do do do do do do do do.\"",
|
|
||||||
"(Almost) Every pixel in this website's pixel art is positioned pixel perfect.",
|
|
||||||
"Shouldn't I be talking about tips?",
|
|
||||||
"Did you know that... uh... hold on let me think... I don't know, I forgot.",
|
|
||||||
"This tip is very helpful.",
|
|
||||||
"The synthwave terrain background is fully procedural. No images or gifs were used."
|
|
||||||
]
|
|
||||||
|
|
||||||
let selectedTip = tips[randomIntFrom0(tips.length)]
|
let tipsJson;
|
||||||
|
|
||||||
|
(function loadTipsSync() {
|
||||||
|
const xhr = new XMLHttpRequest();
|
||||||
|
xhr.open("GET", "./loadingScreenTips.json", false)
|
||||||
|
xhr.send(null)
|
||||||
|
|
||||||
|
if (xhr.status === 200) {
|
||||||
|
tipsJson = JSON.parse(xhr.responseText)
|
||||||
|
} else {
|
||||||
|
console.error("Failed to load tips:", xhr.status, xhr.statusText)
|
||||||
|
tipsJson = []
|
||||||
|
}
|
||||||
|
})()
|
||||||
|
|
||||||
|
console.log(tipsJson)
|
||||||
|
|
||||||
|
let selectedTip = tipsJson[randomIntFrom0(tipsJson.length)]
|
||||||
const showLoading = localStorage["showLoading"] || "true"
|
const showLoading = localStorage["showLoading"] || "true"
|
||||||
|
|
||||||
|
|
||||||
function newTip() {
|
function newTip() {
|
||||||
selectedTip = tips[randomIntFrom0(tips.length)]
|
selectedTip = tipsJson[randomIntFrom0(tipsJson.length)]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,20 @@
|
|||||||
|
[
|
||||||
|
"Just don't die.",
|
||||||
|
"Did you know this is a tip?",
|
||||||
|
"Is thisn't not very un-understandable?",
|
||||||
|
"mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmicrowave sounds. (wow you have a long monitor.)",
|
||||||
|
"Bad at a game? Just press the \"get good at games\" button!",
|
||||||
|
"I AM NOT A FEMBOY NOR GAY. (I support though :thumbsup:)",
|
||||||
|
"You should listen to that song that goes \"do do do do do do do do do.\"",
|
||||||
|
"(Almost) Every pixel in this website's pixel art is positioned pixel perfect.",
|
||||||
|
"Shouldn't I be talking about tips?",
|
||||||
|
"Did you know that... uh... hold on let me think... I don't know, I forgot.",
|
||||||
|
"This tip is very helpful.",
|
||||||
|
"The synthwave terrain background is fully procedural. No images or gifs were used.",
|
||||||
|
"This tip took 3 hours to write. Respect it.",
|
||||||
|
"Water is wet.",
|
||||||
|
"Why is it called loading screen if the screen has already loaded?",
|
||||||
|
"This website is powered by hopes, dreams, and questionable code.",
|
||||||
|
"If this tip is useless, it's working as intended.",
|
||||||
|
"Private tip. Anyone who reads will be executed on the spot."
|
||||||
|
]
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"icon": "discord_8x8.png",
|
||||||
|
"action": "navigate",
|
||||||
|
"actionValue": "https://discord.com"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon": "youtube_8x8.png",
|
||||||
|
"action": "navigate",
|
||||||
|
"actionValue": "https://youtube.com/@ByteDice"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon": "github_8x8.png",
|
||||||
|
"action": "navigate",
|
||||||
|
"actionValue": "https://github.com/ByteDice"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon": "powerplates_8x8.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon": "pauseAnimation_8x8.png",
|
||||||
|
"action": "function",
|
||||||
|
"actionValue": "https://discord.com",
|
||||||
|
"iconId": "animationToggle"
|
||||||
|
}
|
||||||
|
]
|
||||||
@@ -7,8 +7,6 @@ document.addEventListener("DOMContentLoaded", function() {
|
|||||||
setLoadingProgress("Adding stars...")
|
setLoadingProgress("Adding stars...")
|
||||||
addStars()
|
addStars()
|
||||||
|
|
||||||
setLoadingProgress("Animating synthwave background...")
|
|
||||||
startSynthAnimation()
|
|
||||||
pauseAnimBtn(localStorage["isAnimating"] || "true")
|
pauseAnimBtn(localStorage["isAnimating"] || "true")
|
||||||
|
|
||||||
if (showLoading != "true") {
|
if (showLoading != "true") {
|
||||||
|
|||||||
@@ -36,4 +36,9 @@ body {
|
|||||||
top: round(50%, var(--pxDensityPx));
|
top: round(50%, var(--pxDensityPx));
|
||||||
left: round(50%, var(--pxDensityPx));
|
left: round(50%, var(--pxDensityPx));
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
#synthwaveCanvas {
|
||||||
|
position: absolute;
|
||||||
|
bottom: round(0%, var(--pxDensityPx));
|
||||||
|
left: round(0%, var(--pxDensityPx));
|
||||||
}
|
}
|
||||||
+4
-321
@@ -1,323 +1,6 @@
|
|||||||
// TODO: dont render lines behind the fill (fillHillPolygons())
|
const canvas = document.getElementById("synthwaveCanvas");
|
||||||
|
const gl = canvas.getContext("webgl");
|
||||||
|
|
||||||
let canvas = document.getElementById("synthwave")
|
if (!gl) {
|
||||||
let ctx = canvas.getContext("2d")
|
alert("WebGL not supported, using static image.");
|
||||||
let hills = []
|
|
||||||
|
|
||||||
let pxInflate = 0.5
|
|
||||||
|
|
||||||
canvas.width = window.innerWidth
|
|
||||||
canvas.height = window.innerHeight
|
|
||||||
ctx.imageSmoothingEnabled = false;
|
|
||||||
|
|
||||||
|
|
||||||
function lerp(x, y, t) {
|
|
||||||
return x + t * (y - x)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function hillCurve(x, width) {
|
|
||||||
return (Math.sin(Math.PI * (x + 1)) + 1) ** width
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function drawPixelLineLow(fromX, fromY, toX, toY) {
|
|
||||||
let dx = toX - fromX
|
|
||||||
let dy = toY - fromY
|
|
||||||
let yi = 1
|
|
||||||
|
|
||||||
if (dy < 0) {
|
|
||||||
yi = -1
|
|
||||||
dy = -dy
|
|
||||||
}
|
|
||||||
|
|
||||||
let d = 2 * dy - dx
|
|
||||||
y = fromY
|
|
||||||
|
|
||||||
for (let x = fromX; x <= toX; x++) {
|
|
||||||
ctx.rect(
|
|
||||||
clampNearest(x * pxDensity, pxDensity) - 0.5,
|
|
||||||
clampNearest(y * pxDensity, pxDensity) - 0.5,
|
|
||||||
pxInflate + pxDensity,
|
|
||||||
pxInflate + pxDensity
|
|
||||||
);
|
|
||||||
|
|
||||||
if (d > 0) {
|
|
||||||
y = y + yi;
|
|
||||||
d = d + (2 * (dy - dx));
|
|
||||||
}
|
|
||||||
else { d = d + 2 * dy; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function drawPixelLineHigh(fromX, fromY, toX, toY) {
|
|
||||||
let dx = toX - fromX
|
|
||||||
let dy = toY - fromY
|
|
||||||
let xi = 1
|
|
||||||
|
|
||||||
if (dx < 0) {
|
|
||||||
xi = -1
|
|
||||||
dx = -dx
|
|
||||||
}
|
|
||||||
|
|
||||||
let d = 2 * dx - dy
|
|
||||||
x = fromX
|
|
||||||
|
|
||||||
for (let y = fromY; y <= toY; y++) {
|
|
||||||
ctx.rect(
|
|
||||||
clampNearest(x * pxDensity, pxDensity) - 0.5,
|
|
||||||
clampNearest(y * pxDensity, pxDensity) - 0.5,
|
|
||||||
pxInflate + pxDensity,
|
|
||||||
pxInflate + pxDensity
|
|
||||||
);
|
|
||||||
|
|
||||||
if (d > 0) {
|
|
||||||
x = x + xi;
|
|
||||||
d = d + (2 * (dx - dy));
|
|
||||||
}
|
|
||||||
else { d = d + 2 * dx; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function idxWidthOffset(hill, idx) {
|
|
||||||
let x = ((hill.points[idx][0] * hill.widthMul) + ((-hill.width * hill.widthMul) / 2) + hill.x) / pxDensity
|
|
||||||
let y = ((hill.points[idx][1] * hill.widthMul) + hill.y) / pxDensity
|
|
||||||
|
|
||||||
return { x: x, y: y }
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function idxWidthOffsetNoPx(hill, idx) {
|
|
||||||
let x = ((hill.points[idx][0] * hill.widthMul) + ((-hill.width * hill.widthMul) / 2) + hill.x)
|
|
||||||
let y = ((hill.points[idx][1] * hill.widthMul) + hill.y)
|
|
||||||
|
|
||||||
return { x: x, y: y }
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function xyWidthOffset(hill, x, y) {
|
|
||||||
let x1 = ((x * hill.widthMul) + ((-hill.width * hill.widthMul) / 2) + hill.x) / pxDensity
|
|
||||||
let y1 = ((y * hill.widthMul) + hill.y) / pxDensity
|
|
||||||
|
|
||||||
return { x: x1, y: y1 }
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function drawPixelLine(fromX, fromY, toX, toY) {
|
|
||||||
if (Math.abs(toY - fromY) < Math.abs(toX - fromX)) {
|
|
||||||
if (fromX > toX) {
|
|
||||||
drawPixelLineLow(toX, toY, fromX, fromY);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
drawPixelLineLow(fromX, fromY, toX, toY);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
if (fromY > toY) {
|
|
||||||
drawPixelLineHigh(toX, toY, fromX, fromY);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
drawPixelLineHigh(fromX, fromY, toX, toY);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
class Hill {
|
|
||||||
constructor(x, y, color, width, frameCount) {
|
|
||||||
this.color = color
|
|
||||||
this.i = 0
|
|
||||||
this.points = []
|
|
||||||
this.x = x
|
|
||||||
this.y = y
|
|
||||||
this.frameCount = frameCount
|
|
||||||
this.stepSize = 1
|
|
||||||
this.width = width
|
|
||||||
this.widthMul = 0.2
|
|
||||||
}
|
|
||||||
|
|
||||||
generate(iterCount, maxHeight, heightOffset, xRandom) {
|
|
||||||
let offset = 0
|
|
||||||
let stepSize = this.width / iterCount
|
|
||||||
|
|
||||||
for (let i = 0; i < iterCount + 1; i++) {
|
|
||||||
let offsetNorm = offset / this.width
|
|
||||||
let randomHeight = randomInt(0, maxHeight * -hillCurve(offsetNorm, 1.2) * 10) + heightOffset
|
|
||||||
let randomXOffset = undefined
|
|
||||||
|
|
||||||
if (i == 0 || i == iterCount) { randomXOffset = 0 }
|
|
||||||
else { randomXOffset = randomInt(-xRandom, xRandom) }
|
|
||||||
|
|
||||||
this.points.push([offset + randomXOffset, randomHeight])
|
|
||||||
|
|
||||||
offset += stepSize
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
draw(debug) {
|
|
||||||
ctx.lineWidth = pxDensity
|
|
||||||
|
|
||||||
let start = xyWidthOffset(this, this.points[0][0], this.points[0][1])
|
|
||||||
|
|
||||||
let previousX = start.x
|
|
||||||
let previousY = start.y
|
|
||||||
|
|
||||||
ctx.beginPath()
|
|
||||||
if (debug) { ctx.moveTo(start.x * pxDensity, start.y * pxDensity) }
|
|
||||||
|
|
||||||
for (let point of this.points) {
|
|
||||||
let pos = xyWidthOffset(this, point[0], point[1])
|
|
||||||
|
|
||||||
if (debug) { ctx.lineTo(pos.x * pxDensity, pos.y * pxDensity) }
|
|
||||||
else { drawPixelLine(previousX, previousY, pos.x, pos.y) }
|
|
||||||
|
|
||||||
previousX = pos.x
|
|
||||||
previousY = pos.y
|
|
||||||
}
|
|
||||||
if (debug) {
|
|
||||||
ctx.strokeStyle = "#ff0000"
|
|
||||||
ctx.stroke()
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
ctx.fillStyle = `rgb(${this.color[0]}, ${this.color[1]}, ${this.color[2]})`
|
|
||||||
ctx.fill()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
animateStep(stepSize, colorIncrement, debug) {
|
|
||||||
if (this.i >= this.frameCount) {
|
|
||||||
hills.pop(this)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this.y += stepSize
|
|
||||||
this.draw(debug)
|
|
||||||
|
|
||||||
this.i += 1
|
|
||||||
|
|
||||||
this.color[0] += colorIncrement
|
|
||||||
this.color[1] += colorIncrement
|
|
||||||
this.color[2] += colorIncrement
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function connectHills(hill, previousHill, hillIdx, debug) {
|
|
||||||
let pHill = previousHill
|
|
||||||
|
|
||||||
if (pHill && hillIdx != 0) {
|
|
||||||
for (let idx in pHill.points) {
|
|
||||||
let start = idxWidthOffset(pHill, idx)
|
|
||||||
let end = idxWidthOffset(hill, idx)
|
|
||||||
|
|
||||||
let grad = ctx.createLinearGradient(start.x, start.y, end.x, end.y)
|
|
||||||
let col = hill.color
|
|
||||||
let pCol = pHill.color
|
|
||||||
|
|
||||||
grad.addColorStop(0, `rgb(${pCol[0]}, ${pCol[1]}, ${pCol[2]})`)
|
|
||||||
grad.addColorStop(1, `rgb(${col[0]}, ${col[1]}, ${col[2]})`)
|
|
||||||
|
|
||||||
ctx.beginPath()
|
|
||||||
|
|
||||||
if (debug) {
|
|
||||||
ctx.strokeStyle = grad
|
|
||||||
|
|
||||||
ctx.moveTo(start.x * pxDensity, start.y * pxDensity)
|
|
||||||
ctx.lineTo(end.x * pxDensity, end.y * pxDensity)
|
|
||||||
ctx.stroke()
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
ctx.fillStyle = grad
|
|
||||||
|
|
||||||
drawPixelLine(start.x, start.y, end.x, end.y)
|
|
||||||
ctx.fill()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function fillHillPolygons(hill, previousHill, hillIdx) {
|
|
||||||
let pHill = previousHill
|
|
||||||
|
|
||||||
if (pHill && hillIdx != 0) {
|
|
||||||
for (let idx in pHill.points) {
|
|
||||||
if (idx == 0) { continue }
|
|
||||||
|
|
||||||
let br = idxWidthOffsetNoPx(pHill, idx)
|
|
||||||
let bl = idxWidthOffsetNoPx(pHill, idx - 1)
|
|
||||||
let tr = idxWidthOffsetNoPx(hill, idx)
|
|
||||||
let tl = idxWidthOffsetNoPx(hill, idx - 1)
|
|
||||||
|
|
||||||
ctx.beginPath()
|
|
||||||
ctx.fillStyle = "#323232"
|
|
||||||
|
|
||||||
ctx.moveTo(clampNearest(tl.x, pxDensity), clampNearest(tl.y, pxDensity))
|
|
||||||
ctx.lineTo(clampNearest(tr.x, pxDensity), clampNearest(tr.y, pxDensity))
|
|
||||||
ctx.lineTo(clampNearest(br.x, pxDensity), clampNearest(br.y, pxDensity))
|
|
||||||
ctx.lineTo(clampNearest(bl.x, pxDensity), clampNearest(bl.y, pxDensity))
|
|
||||||
ctx.lineTo(clampNearest(tl.x, pxDensity), clampNearest(tl.y, pxDensity))
|
|
||||||
|
|
||||||
ctx.fill()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const iterToNewHill = 25
|
|
||||||
let iters = 0
|
|
||||||
let previousHill = undefined
|
|
||||||
|
|
||||||
function animateSynthWave() {
|
|
||||||
if (!isAnimating) { return }
|
|
||||||
|
|
||||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
|
||||||
|
|
||||||
if (iters >= iterToNewHill) {
|
|
||||||
let hillInstance = new Hill(canvas.width / 2 - (1 * pxDensity), canvas.height / 3 * 2, [0, 180, 240], canvas.width, 350)
|
|
||||||
hillInstance.generate(25, canvas.height / 24, 100, 2 * pxDensity)
|
|
||||||
hills.unshift(hillInstance)
|
|
||||||
iters = 0
|
|
||||||
}
|
|
||||||
|
|
||||||
let prevHillPolygons = undefined
|
|
||||||
|
|
||||||
for (let idx in hills) {
|
|
||||||
let hill = hills[idx]
|
|
||||||
hill.y += hill.stepSize
|
|
||||||
hill.widthMul *= 1.01
|
|
||||||
|
|
||||||
fillHillPolygons(hill, prevHillPolygons, idx)
|
|
||||||
|
|
||||||
prevHillPolygons = hill
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let idx in hills) {
|
|
||||||
let hill = hills[idx]
|
|
||||||
|
|
||||||
//hill.animateStep(hill.stepSize, -0.2, true)
|
|
||||||
hill.animateStep(hill.stepSize, -0.2, false)
|
|
||||||
|
|
||||||
hill.stepSize = -0.005
|
|
||||||
hill.widthMul *= 1.01
|
|
||||||
|
|
||||||
connectHills(hill, previousHill, idx, false)
|
|
||||||
|
|
||||||
previousHill = hill
|
|
||||||
}
|
|
||||||
|
|
||||||
iters++
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function startSynthAnimation() {
|
|
||||||
for (i = 0; i < 350; i++) {
|
|
||||||
animateSynthWave()
|
|
||||||
}
|
|
||||||
|
|
||||||
setInterval( animateSynthWave, 1000 / 12)
|
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user