I have this img:
And the clouds are moving to left.
Its possible to generate a camera movement for seeing the clouds moving to a side?
Hint: The code of this “skybox” is this:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Cielo azul con nubes (Perlin Canvas2D)</title>
<style>
html, body {margin:0; padding:0; overflow:hidden; background:#87ceeb;}
body, canvas {width:100vw; height:100vh;}
#info {
position: absolute; top: 10px; left: 10px;
color: #222; background: rgba(255,255,255,0.85); padding: 8px; border-radius: 6px;
font-family: sans-serif; font-size: 15px; z-index: 10;
}
</style>
</head>
<body>
<div id="info">
Cielo azul con nubes blancas generadas por ruido Perlin (Canvas 2D).<br>
¡Esto funciona en cualquier navegador!
</div>
<canvas id="lienzo"></canvas>
<script>
// Perlin clásico 2D (Ken Perlin, simplificado)
function fade(t) { return t * t * t * (t * (t * 6 - 15) + 10); }
function lerp(a, b, t) { return a + t * (b - a); }
function grad(hash, x, y) {
switch(hash & 3) {
case 0: return x + y;
case 1: return -x + y;
case 2: return x - y;
case 3: return -x - y;
}
}
let p = [];
for (let i=0;i<256;++i) p[i]=i;
for (let i=0;i<256;++i) { let j=Math.floor(Math.random()*256); [p[i],p[j]]=[p[j],p[i]];}
p = p.concat(p);
function noise(x, y) {
let X = Math.floor(x) & 255, Y = Math.floor(y) & 255;
x -= Math.floor(x); y -= Math.floor(y);
let u = fade(x), v = fade(y);
let A = p[X]+Y, AA = p[A], AB = p[A+1];
let B = p[X+1]+Y, BA = p[B], BB = p[B+1];
return lerp(
lerp(grad(p[AA], x, y), grad(p[BA], x-1, y), u),
lerp(grad(p[AB], x, y-1), grad(p[BB], x-1, y-1), u),
v
);
}
// fBm para nubes
function fbm(x, y, t) {
let sum=0, amp=1, freq=1, norm=0;
for(let i=0;i<5;++i){
sum += amp * noise(x*freq + t*0.03, y*freq);
norm += amp;
freq *= 2;
amp *= 0.55;
}
return sum/norm;
}
const canvas = document.getElementById('lienzo');
const ctx = canvas.getContext('2d');
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resize();
window.addEventListener('resize', resize);
function dibuja(t) {
let w=canvas.width, h=canvas.height;
let img = ctx.getImageData(0,0,w,h);
let data = img.data;
for(let y=0;y<h;y++) for(let x=0;x<w;x++) {
// Mapeo cielo a [0,1] vertical
let yy = y/h;
// Gradiente cielo azul
let azul = lerp(255, 255, Math.pow(yy,1.7));
let r = lerp(0, 0, Math.pow(yy,1.7));
let g = lerp(127, 255, Math.pow(yy,1.7));
// Coordenadas perlin
let fx = x/w, fy = y/h;
// Nubes Perlin/fBm
let n = fbm(fx*3, fy*1.3, t/1000);
n = (n+1)/2;
// Más contraste, solo lo alto es nube
let nubes = n > 0.61 ? (n-0.61)/0.39 : 0;
nubes = Math.pow(nubes, 0.45); // bordes suaves pero cuerpo blanco
// Combinación final
let rr = lerp(r, 255, nubes),
gg = lerp(g, 255, nubes),
bb = lerp(azul, 255, nubes);
let idx = (y*w+x)*4;
data[idx] = rr;
data[idx+1] = gg;
data[idx+2] = bb;
data[idx+3] = 255;
}
ctx.putImageData(img,0,0);
requestAnimationFrame(dibuja);
}
dibuja(performance.now());
</script>
</body>
</html>