PROGRAMMING > Other languages

[Javascript] TinyC5 questions...

(1/2) > >>

relsoft:
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:

--- Code: ---<!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>

--- End code ---



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?


--- Code: ---<!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>

--- End code ---


Btw, this plots only 4 pixels:


--- Code: ---for( i = 0; i < 360; i++ )
{
a = i * TO_RAD;
xr = MIDX + ( Math.cos(a) * 50 );
yr = MIDY + ( Math.sin(a) * 50 );
}

--- End code ---


Thanks!

Jim:
Xr and yr are not integers

Kirl:
Well spotted jim, a simple Math.round made an awesome torus knot appear! :)

Nice work relsoft, cool plasma as well! :clap:

relsoft:
Still don't get it guys. LOL

Where is the error? How would I make xr and yr integers?  I thought JS does that automatically (var to int).


Thanks!

NVM.  Got it to work!  Thanks kirl and Jim!

Still wanna know if I could force declare a variable an integer, float or double though.


Kirl:
I don't believe you can, it wil just change itself whithout warning whenever you set the value to something that doesn't correspond to the type. Here's something to add to the confusion: https://www.destroyallsoftware.com/talks/wat

Do not adjust your set, reality is at fault!  ;)

Overall it doesn't give me many problems (none that I'm aware of anyway, ignorance is bliss), but one thing that might be useful to know is that when you grab a number from a textfield (let's say txtFValue = "10") it will always be a string, so txtFValue+10 = "1010". You can however change a string to a number with parseInt( txtFValue ), so that txtFValue+10 = 20 as you would expect.

Navigation

[0] Message Index

[#] Next page

Go to full version