- Author:
- Benjamin Grosse
- Twitter:
- @
- GitHub:
- gipsy-king
- Facebook:
- Google+:
- +
- Reddit:
- /r/0
- Pouet:
- Website:
- Compo:
- canvas
- Demo link:
- https://js1k.com/2016-elemental/demo/2418
- Shortlink:
- https://js1k.com/2418
- Blog post:
- please update here!
- Bytes:
- 748
- Chars:
- 748
- Submission
b.bgColor=0
a2=document.createElement('canvas')
W=a.width=a2.width=a.width
H=a2.height=a.height
s=a.style;s2=a2.style
s.display=s2.display='block'
s.transformOrigin=s2.transformOrigin='top'
t='perspective(5px)'
s.transform=t+'translateY(51%)rotateX(-1deg)rotate(180deg)scaleX(-1)'
s2.transform=t+'translateY(-51%)rotateX(1deg)'
b.appendChild(a2)
c2=a2.getContext('2d')
s=8
n=[]
m=W/s
setInterval(function(){
c=[c2,c2=c][0]
a2=[a,a=a2][0]
c.clearRect(0,0,W,H)
c.drawImage(a2,0,s)
t=Date.now()/1000
for(i=0;i<m;i++) n[i]=Math.random()
for(i=0;i<m;i++){
v=Math.min(n[i+1],n[i])
if(v<.8) continue;
c.fillStyle = 'rgb(200,200,'+parseInt(v*v*v*200)+')';
c.fillRect(i*s,0,s,s)
}
},35);
- Description
- scrolling noise on 2 canvases, put into perspective with css
- Base64 encoded
Yi5iZ0NvbG9yPTANCmEyPWRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2NhbnZhcycpDQpXPWEud2lkdGg9YTIud2lkdGg9YS53aWR0aA0KSD1hMi5oZWlnaHQ9YS5oZWlnaHQNCnM9YS5zdHlsZTtzMj1hMi5zdHlsZQ0Kcy5kaXNwbGF5PXMyLmRpc3BsYXk9J2Jsb2NrJw0KDQpzLnRyYW5zZm9ybU9yaWdpbj1zMi50cmFuc2Zvcm1PcmlnaW49J3RvcCcNCnQ9J3BlcnNwZWN0aXZlKDVweCknDQpzLnRyYW5zZm9ybT10Kyd0cmFuc2xhdGVZKDUxJSlyb3RhdGVYKC0xZGVnKXJvdGF0ZSgxODBkZWcpc2NhbGVYKC0xKScNCnMyLnRyYW5zZm9ybT10Kyd0cmFuc2xhdGVZKC01MSUpcm90YXRlWCgxZGVnKScNCg0KYi5hcHBlbmRDaGlsZChhMikNCmMyPWEyLmdldENvbnRleHQoJzJkJykNCg0Kcz04DQpuPVtdDQptPVcvcw0KDQpzZXRJbnRlcnZhbChmdW5jdGlvbigpew0KICBjPVtjMixjMj1jXVswXQ0KICBhMj1bYSxhPWEyXVswXQ0KICBjLmNsZWFyUmVjdCgwLDAsVyxIKQ0KICBjLmRyYXdJbWFnZShhMiwwLHMpDQoNCiAgdD1EYXRlLm5vdygpLzEwMDANCiAgZm9yKGk9MDtpPG07aSsrKSBuW2ldPU1hdGgucmFuZG9tKCkNCiAgZm9yKGk9MDtpPG07aSsrKXsNCiAgICB2PU1hdGgubWluKG5baSsxXSxuW2ldKQ0KICAgIGlmKHY8LjgpIGNvbnRpbnVlOw0KICAgIGMuZmlsbFN0eWxlID0gJ3JnYigyMDAsMjAwLCcrcGFyc2VJbnQodip2KnYqMjAwKSsnKSc7DQogICAgYy5maWxsUmVjdChpKnMsMCxzLHMpDQogIH0NCn0sMzUpOw==
- Original source
b.bgColor=0
a2=document.createElement('canvas')
W=a.width=a2.width=a.width
H=a2.height=a.height
s=a.style;s2=a2.style
s.display=s2.display='block'
s.transformOrigin=s2.transformOrigin='top'
t='perspective(5px)'
s.transform=t+'translateY(51%)rotateX(-1deg)rotate(180deg)scaleX(-1)'
s2.transform=t+'translateY(-51%)rotateX(1deg)'
b.appendChild(a2)
c2=a2.getContext('2d')
s=8
n=[]
m=W/s
setInterval(function(){
c=[c2,c2=c][0]
a2=[a,a=a2][0]
c.clearRect(0,0,W,H)
c.drawImage(a2,0,s)
t=Date.now()/1000
for(i=0;i<m;i++) n[i]=Math.random()
for(i=0;i<m;i++){
v=Math.min(n[i+1],n[i])
if(v<.8) continue;
c.fillStyle = 'rgb(200,200,'+parseInt(v*v*v*200)+')';
c.fillRect(i*s,0,s,s)
}
},35);
