Starfield in JavaScript...

[Rattrapmax6]

Xteraco got to showing me some JavaScript demo's the other night, and being a JS coder myself, sparked some creative juices.. Well, I wipped up this lil effect just a few minutes ago just as a lil break from the other stuff I've been up to.... Pretty cool.. =)

Code: [Select]

<html>
<head>
<title>Web Demo!</title>
<script type="text/javascript">
var LENS = 256
var CENTX = 400
var CENTY = 300
var StarX = []
var StarY = []
var StarZ = []
var ZV = []
var rnd = Math.random()
var t
var dist
var NX
var NY

function SETPIX(X, Y, ID){
var COL = Math.round(StarZ[ID])
document.write('<span style="color: rgb('+COL+','+COL+','+COL+'); position:absolute; top:'+Y+'; left:'+X+';" id='+ID+'>*</span>')
}
function MOVEPIX(X, Y, ID){
document.getElementById(ID).style.top = Y
document.getElementById(ID).style.left = X
}

function UpdateField() {
for (var i = 1; i <= 100; i++){
StarX[i] = StarX[i] - ZV[i]
if (StarX[i] < -400) {StarX[i] = 400}
dist=LENS-StarZ[i]
if (dist != 0) {
NX = CENTX + (LENS*StarX[i]/dist)
NY = CENTY - (LENS*StarY[i]/dist)
MOVEPIX(NX, NY, i)
}

}
t=setTimeout("UpdateField()", 100)
}
</script>
<head>
<body bgcolor="#000000">
<script type="text/javascript">
for (var i = 1; i <= 100; i++){
rnd = Math.random()
StarX[i] = (rnd*800)-400
rnd = Math.random()
StarY[i] = (rnd*600)-300
rnd = Math.random()
StarZ[i] = rnd*255
rnd = Math.random()
ZV[i] = (rnd*(10-5))+5
}
for (var i = 1; i <= 100; i++){
dist=LENS-StarZ[i]
if (dist != 0) {
NX = CENTX + (LENS*StarX[i]/dist)
NY = CENTY - (LENS*StarY[i]/dist)
SETPIX(NX, NY, i)
}

}

UpdateField()
</script>
</body>
</html>
  Enjoy!

[Dad1916]

Indeed it works! Screenshot attached. Thanks for sharing ! 

[Rattrapmax6]

Hehe, welcome!

Link to where lurah hosted it on his ASCII site: http://www.ascii-world.com/demos/java_field.html
For those to lazy to make a HTML file... 

[Clyde]

Welldone mate

[Shockwave]

Really cool :-) Now do it in 3d!

[Rattrapmax6]

Like this?

Code: [Select]

<html>
<head>
<title>Web Demo!</title>
<script type="text/javascript">
var LENS = 256
var CENTX = 400
var CENTY = 300
var StarX = []
var StarY = []
var StarZ = []
var ZV = []
var rnd = Math.random()
var t
var dist
var NX
var NY

function SETPIX(X, Y, ID){
var COL = Math.round(StarZ[ID])
document.write('<span style="color: rgb('+COL+','+COL+','+COL+'); position:absolute; top:'+Y+'; left:'+X+';" id='+ID+'>*</span>')
}
function MOVEPIX(X, Y, ID){
var COL = Math.round(StarZ[ID])
document.getElementById(ID).style.top = Y
document.getElementById(ID).style.left = X
document.getElementById(ID).style.color = "rgb("+COL+","+COL+","+COL+")"
}

function UpdateField() {
for (var i = 1; i <= 100; i++){
StarZ[i] = StarZ[i] + ZV[i]
//if (StarX[i] < -400) {StarX[i] = 400}
if (StarZ[i] > 256){StarZ[i] = 0}
dist=LENS-StarZ[i]
if (dist != 0) {
NX = CENTX + (LENS*StarX[i]/dist)
NY = CENTY - (LENS*StarY[i]/dist)
MOVEPIX(NX, NY, i)
}

}
t=setTimeout("UpdateField()", 100)
}
</script>
<head>
<body bgcolor="#000000">
<script type="text/javascript">
for (var i = 1; i <= 100; i++){
rnd = Math.random()
StarX[i] = (rnd*800)-400
rnd = Math.random()
StarY[i] = (rnd*600)-300
rnd = Math.random()
StarZ[i] = rnd*255
rnd = Math.random()
ZV[i] = (rnd*(10-5))+5
}
for (var i = 1; i <= 100; i++){
dist=LENS-StarZ[i]
if (dist != 0) {
NX = CENTX + (LENS*StarX[i]/dist)
NY = CENTY - (LENS*StarY[i]/dist)
SETPIX(NX, NY, i)
}

}

UpdateField()
</script>
</body>
</html>
I'd done that before, but updating colour last time was being a dog, I finally fond the right syntax, so.. there you have it..  .. Zooming star field! haha, and the scroll bars go insian! 

[Shockwave]

Heheh, no point in posting another screen shot as it would look about the same but that's damn good Rattra Kudos.

[p01]

Nice, though a bit too big for my taste :p

You probably saw the 256b starfield I posted on Pouet. Here is a badly optimized version of it, in 209 bytes.

<body id=B text=tan bgColor=0><script>setInterval("m='';c=Math.cos;for(u=65;u;)m+='<p style=position:absolute;top:'+(50+(z=399/(9+(--U+u--&63)))*c(u*9))+'%;left:'+(50+z*c(u))+'%>·';B.innerHTML=m",U=9)</script>

Hope you like them.

[rdc]

Cool one.

[benny!]

Cool one. Very well done 

[Clyde]

aboard P01, nice starfield.

[Shockwave]

Hey p01 I hadn't seen that one before, looks nice, good sense of depth which most broser starfields lack.. Thumb duely added and