Hello guys,
Someone asked me to do some webeffects and I didn't know JS but I remembered TinyC5. After about 3 hours of tests while readingf Benny's cool tutorial, I was able to make this little plasma:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="TinyC5-0.7.min.js"></script>
<script type="text/javascript">
/*
Yar! got bored the ginebra game and decided to read a little
javascript and made this!
I'm a JS noob so code is not quite up to par. I'm just 3 hours \
in to JS coding. :)
Thanks to Benny for this TPTC-like web gfx layer framework.
*/
function main()
{
var tinyC5, args;
tinyC5 = new TinyC5();
args =
{
width: 320,
height: 240,
scale: 2,
title: 'Plasma by Anya',
bgColor: tinyC5.color( 155, 255, 100, 255 ),
container: document.getElementById( 'tinyC5_container' )
};
tinyC5.init( args );
tinyC5.update = function()
{
var p, dx, dy, index = 0;
var col;
var fc = tinyC5.getTime()/10;
index = 0;
p = tinyC5.pixels;
for( var y = 0; y < tinyC5.HEIGHT; y++ )
{
for( var x = 0; x < tinyC5.WIDTH; x++ )
{
dx = 160 - x;
dy = 120 - y;
col = Math.cos(Math.sin(Math.atan2(dx,dy)*10)) * 32 +
Math.sin((x-fc)/25.0)*63+Math.sin((y-fc)/25.0) * 45 -
Math.sin((y+x)/25.0) * 63;
p[index++] = Math.sin((col + fc)/10.0) * 255;
p[index++] = Math.sin((col + fc*2)/20.0) * 255;
p[index++] = Math.sin((col + fc*3)/30.0) * 255;
p[index++] = 255;
}
}
};
tinyC5.start();
}
</script>
</head>
<body onload="main()">
<div id="container">
<div id="tinyC5_container">
</div>
</div>
<div id="footer">
Anya's Plasma. Rel's 1st JS code <a href="http://rel.phatcode.net/">Genso's Junkyard</a>
</div>
</body>
</html>
Now I wanted to make a 3D pixel effect. But somehow it does not work. I also tried doing a simple Circle using cos/sin and it only plots 4 pixels. What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="TinyC5-0.7.min.js"></script>
<script type="text/javascript">
/*
*/
function main()
{
var MIDX = 160;
var MIDY = 120;
var LENS = 256;
var RINGS = 360;
var MAX_RADIUS = 2.0;
var SCALER = 40.0;
var TO_RAD = 0.01745329251994329576923690768489;
var op = -11.0;
var oq = 12.0;
var tinyC5, args;
tinyC5 = new TinyC5();
args =
{
width: 320,
height: 240,
scale: 2,
title: 'PQ Torus Knot by Anya',
bgColor: tinyC5.color( 0, 0, 0, 255 ),
container: document.getElementById( 'tinyC5_container' )
};
tinyC5.init( args );
tinyC5.update = function()
{
var pix;
var index = 0;
var color;
var x, y, z;
var p;
var q;
var r;
var a;
var xr;
var yr;
var i;
var distance;
var fc = tinyC5.getTime()/10;
pix = tinyC5.pixels;
tinyC5.clearPixels();
op += 0.01;
oq -= 0.01;
color = 255;
for( i = 0; i < 360; i++ )
{
a = i * TO_RAD;
p = op; //p and q
q = oq; //interpolate
r = (0.5 * (2 + Math.sin(q * a))) * MAX_RADIUS; //radius of each ring
x = r * Math.cos(p * a); //rotate point
y = r * Math.cos(q * a);
z = r * Math.sin(p * a);
//project
distance = (LENS - z * SCALER);
if( distance > 0 )
{
xr = MIDX + (LENS * x * SCALER / distance);
yr = MIDY - (LENS * y * SCALER / distance);
//xr = MIDX + ( Math.cos(a) * 50 );
//yr = MIDY + ( Math.sin(a) * 50 );
index = ( yr * 320 + xr ) * 4;
pix[index++] = color;
pix[index++] = color;
pix[index++] = color;
pix[index++] = 255;
}
}
};
tinyC5.start();
}
</script>
</head>
<body onload="main()">
<div id="container">
<div id="tinyC5_container">
</div>
</div>
<div id="footer">
Anya's PQ Torus Knot. Rel's 2nd JS code <a href="http://rel.phatcode.net/">Genso's Junkyard</a>
</div>
</body>
</html>
Btw, this plots only 4 pixels:
for( i = 0; i < 360; i++ )
{
a = i * TO_RAD;
xr = MIDX + ( Math.cos(a) * 50 );
yr = MIDY + ( Math.sin(a) * 50 );
}
Thanks!
