ByteDice/ByteDiceWeb
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

made synthwave pixelated

Browse Source
This commit is contained in:
8BitBiscotti
2024-12-12 13:50:04 +01:00
parent 17187ad792
commit 367c844669
6 changed files with 160 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
globalScript.js
+10
View File
@@ -13,6 +13,16 @@ function randomInt(min, max) {
} }
function clampNearest(n, mul) {
if(n > 0)
return Math.ceil(n / mul) * mul;
else if( n < 0)
return Math.floor(n / mul) * mul;
else
return 0;
}
function showGrid() { function showGrid() {
let canvasEl = document.createElement("canvas") let canvasEl = document.createElement("canvas")
canvasEl.width = window.innerWidth canvasEl.width = window.innerWidth
index.html
+1 -1
View File
@@ -15,7 +15,7 @@
<body style="background-color: #323232; color: #ffffff;"> <body style="background-color: #323232; color: #ffffff;">
<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: 0%; left: 0%;"></canvas> <canvas id="synthwave" style="position: absolute; bottom: round(0%, var(--pxDensityPx)); left: round(0%, var(--pxDensityPx));"></canvas>
<ul class="navBar"> <ul class="navBar">
<li> <li>
loadingScreen.js
+6 -1
View File
@@ -10,7 +10,12 @@ let tips = [
"m".repeat(200), "m".repeat(200),
"Bad at a game? Just press the \"get good at games\" button!", "Bad at a game? Just press the \"get good at games\" button!",
"I AM NOT A FEMBOY NOR GAY. (I support though :thumbsup:)", "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.\"" "You should listen to that song that goes \"do do do do do do do do do.\"",
"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 selectedTip = tips[randomIntFrom0(tips.length)]
navBar.css
+1
View File
@@ -21,6 +21,7 @@ li {
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
font-size: 0px; font-size: 0px;
width: max-content;
} }
.navBtn { .navBtn {
background-color: transparent; background-color: transparent;
pxDensity.js
+2 -2
View File
@@ -1,4 +1,4 @@
let pxDensity = getComputedStyle(document.body).getPropertyValue("--pxDensity") let pxDensity = parseFloat(getComputedStyle(document.body).getPropertyValue("--pxDensity"))
let pxDensityDefined = false let pxDensityDefined = false
function calcPixelDensity() { function calcPixelDensity() {
@@ -8,7 +8,7 @@ function calcPixelDensity() {
document.documentElement.style.setProperty("--pxDensity", Math.max(densityWidth, densityHeight)) document.documentElement.style.setProperty("--pxDensity", Math.max(densityWidth, densityHeight))
document.documentElement.style.setProperty("--pxDensityPx", `${Math.max(densityWidth, densityHeight)}px`) document.documentElement.style.setProperty("--pxDensityPx", `${Math.max(densityWidth, densityHeight)}px`)
pxDensity = getComputedStyle(document.body).getPropertyValue("--pxDensity") pxDensity = parseFloat(getComputedStyle(document.body).getPropertyValue("--pxDensity"))
pxDensityDefined = true pxDensityDefined = true
console.log("pxDensity: " + getComputedStyle(document.body).getPropertyValue("--pxDensity")) console.log("pxDensity: " + getComputedStyle(document.body).getPropertyValue("--pxDensity"))
synthwaveEffect.js
+140 -38
View File
@@ -3,8 +3,11 @@ let ctx = canvas.getContext("2d")
let hills = [] let hills = []
let isAnimating = true let isAnimating = true
let pxInflate = 0.5
canvas.width = window.innerWidth canvas.width = window.innerWidth
canvas.height = window.innerHeight canvas.height = window.innerHeight
ctx.imageSmoothingEnabled = false;
function lerp(x, y, t) { function lerp(x, y, t) {
@@ -17,6 +20,86 @@ function hillCurve(x, 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 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 { class Hill {
constructor(x, y, color, xRandom, width, frameCount) { constructor(x, y, color, xRandom, width, frameCount) {
this.color = color this.color = color
@@ -50,34 +133,47 @@ class Hill {
} }
draw() { draw(debug) {
ctx.strokeStyle = `rgb(${this.color[0]}, ${this.color[1]}, ${this.color[2]})`
ctx.lineWidth = pxDensity ctx.lineWidth = pxDensity
let startX = (this.points[0][0] * this.widthMul) + ((-this.width * this.widthMul) / 2) + this.x let startX = ((this.points[0][0] * this.widthMul) + ((-this.width * this.widthMul) / 2) + this.x) / pxDensity
let startY = (this.points[0][1] * this.widthMul) + this.y let startY = ((this.points[0][1] * this.widthMul) + this.y) / pxDensity
let previousX = startX
let previousY = startY
ctx.beginPath() ctx.beginPath()
ctx.moveTo(startX, startY) if (debug) { ctx.moveTo(startX * pxDensity, startY * pxDensity) }
for (let point of this.points) { for (let point of this.points) {
ctx.lineTo( let x = ((point[0] * this.widthMul) + ((-this.width * this.widthMul) / 2) + this.x) / pxDensity
(point[0] * this.widthMul) + ((-this.width * this.widthMul) / 2) + this.x, let y = ((point[1] * this.widthMul) + this.y) / pxDensity
(point[1] * this.widthMul) + this.y
) if (debug) { ctx.lineTo(x * pxDensity, y * pxDensity) }
else { drawPixelLine(previousX, previousY, x, y) }
previousX = x
previousY = y
}
if (debug) {
ctx.strokeStyle = "#ff0000"
ctx.stroke()
}
else {
ctx.fillStyle = `rgb(${this.color[0]}, ${this.color[1]}, ${this.color[2]})`
ctx.fill()
} }
ctx.stroke()
} }
animateStep(stepSize, colorIncrement) { animateStep(stepSize, colorIncrement, debug) {
if (this.i >= this.frameCount) { if (this.i >= this.frameCount) {
hills.pop(this) hills.pop(this)
return return
} }
this.y += stepSize this.y += stepSize
this.draw() this.draw(debug)
this.i += 1 this.i += 1
@@ -88,7 +184,35 @@ class Hill {
} }
const iterToNewHill = 15 function connectHills(hill, previousHill, idx) {
if (previousHill && idx != 0) {
for (idx in previousHill.points) {
let startX = (previousHill.points[idx][0] * previousHill.widthMul) + ((-previousHill.width * previousHill.widthMul) / 2) + previousHill.x
let startY = (previousHill.points[idx][1] * previousHill.widthMul) + previousHill.y
let endX = (hill.points[idx][0] * hill.widthMul) + ((-hill.width * hill.widthMul) / 2) + hill.x
let endY = (hill.points[idx][1] * hill.widthMul) + hill.y
let grad = ctx.createLinearGradient(startX, startY, endX, endY)
let col = hill.color
let pCol = previousHill.color
grad.addColorStop(0, `rgb(${pCol[0]}, ${pCol[1]}, ${pCol[2]})`)
grad.addColorStop(1, `rgb(${col[0]}, ${col[1]}, ${col[2]})`)
ctx.strokeStyle = grad
ctx.strokeStyle = "#ff0000"
ctx.lineWidth = pxDensity
ctx.beginPath()
ctx.moveTo(startX, startY)
ctx.lineTo(endX, endY)
ctx.stroke()
}
}
}
const iterToNewHill = 25
let iters = 0 let iters = 0
let previousHill = undefined let previousHill = undefined
@@ -107,34 +231,12 @@ function animateSynthWave() {
for (let idx in hills) { for (let idx in hills) {
let hill = hills[idx] let hill = hills[idx]
hill.animateStep(hill.stepSize, -0.2) //hill.animateStep(hill.stepSize, -0.2, true)
hill.animateStep(hill.stepSize, -0.2, false)
hill.stepSize = -0.005 hill.stepSize = -0.005
hill.widthMul *= 1.01 hill.widthMul *= 1.01
//connectHills(hill, previousHill, idx)
if (previousHill && idx != 0) {
for (idx in previousHill.points) {
let startX = (previousHill.points[idx][0] * previousHill.widthMul) + ((-previousHill.width * previousHill.widthMul) / 2) + previousHill.x
let startY = (previousHill.points[idx][1] * previousHill.widthMul) + previousHill.y
let endX = (hill.points[idx][0] * hill.widthMul) + ((-hill.width * hill.widthMul) / 2) + hill.x
let endY = (hill.points[idx][1] * hill.widthMul) + hill.y
let grad = ctx.createLinearGradient(startX, startY, endX, endY)
let col = hill.color
let pCol = previousHill.color
grad.addColorStop(0, `rgb(${pCol[0]}, ${pCol[1]}, ${pCol[2]})`)
grad.addColorStop(1, `rgb(${col[0]}, ${col[1]}, ${col[2]})`)
ctx.strokeStyle = grad
ctx.lineWidth = pxDensity
ctx.beginPath()
ctx.moveTo(startX, startY)
ctx.lineTo(endX, endY)
ctx.stroke()
}
}
previousHill = hill previousHill = hill
} }