Author Topic: [Javascript] TinyC5 questions...  (Read 2328 times)

0 Members and 1 Guest are viewing this topic.

Offline relsoft

  • DBF Aficionado
  • ******
  • Posts: 3303
  • Karma: 47
    • View Profile
[Javascript] TinyC5 questions...
« on: May 01, 2014 »
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: [Select]
<!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?

Code: [Select]
<!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:

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


Thanks!
Challenge Trophies Won:

Offline Jim

  • Founder Member
  • DBF Aficionado
  • ********
  • Posts: 5301
  • Karma: 402
    • View Profile
Re: [Javascript] TinyC5 questions...
« Reply #1 on: May 01, 2014 »
Xr and yr are not integers
Challenge Trophies Won:

Offline Kirl

  • Senior Member
  • Pentium
  • ********
  • Posts: 1199
  • Karma: 229
    • View Profile
    • Homepage
Re: [Javascript] TinyC5 questions...
« Reply #2 on: May 01, 2014 »
Well spotted jim, a simple Math.round made an awesome torus knot appear! :)

Nice work relsoft, cool plasma as well! :clap:
www.kirl.nl
Challenge Trophies Won:

Offline relsoft

  • DBF Aficionado
  • ******
  • Posts: 3303
  • Karma: 47
    • View Profile
Re: [Javascript] TinyC5 questions...
« Reply #3 on: May 02, 2014 »
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.


« Last Edit: May 02, 2014 by relsoft »
Challenge Trophies Won:

Offline Kirl

  • Senior Member
  • Pentium
  • ********
  • Posts: 1199
  • Karma: 229
    • View Profile
    • Homepage
Re: [Javascript] TinyC5 questions...
« Reply #4 on: May 02, 2014 »
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.
« Last Edit: May 02, 2014 by Kirl »
www.kirl.nl
Challenge Trophies Won:

Offline Jim

  • Founder Member
  • DBF Aficionado
  • ********
  • Posts: 5301
  • Karma: 402
    • View Profile
Re: [Javascript] TinyC5 questions...
« Reply #5 on: May 02, 2014 »
xr=xr|0;
yr=yr|0;
 before you compute index or use math.round()

Jim
Challenge Trophies Won:

Offline relsoft

  • DBF Aficionado
  • ******
  • Posts: 3303
  • Karma: 47
    • View Profile
Re: [Javascript] TinyC5 questions...
« Reply #6 on: May 04, 2014 »
Thanks guys!
Challenge Trophies Won:

Offline Kirl

  • Senior Member
  • Pentium
  • ********
  • Posts: 1199
  • Karma: 229
    • View Profile
    • Homepage
Re: [Javascript] TinyC5 questions...
« Reply #7 on: October 18, 2014 »
relsoft, not sure if you're still dabbling in js but I'm currently reading a little booklet ("object-oriented javascript" by Nicholas Zakas) which goes into detail regarding types. It's only 97 pages in total and it's a truly info packed little gem. Turns out you can make js behave much more like traditional OO languages!

This thread keeps comming to mind as I discover more about OO principles in js and in general.


Also, thanks Jim for the much shorter and quicker rounding trick, I use it all the time! =)
« Last Edit: October 18, 2014 by Kirl »
www.kirl.nl
Challenge Trophies Won:

Offline relsoft

  • DBF Aficionado
  • ******
  • Posts: 3303
  • Karma: 47
    • View Profile
Re: [Javascript] TinyC5 questions...
« Reply #8 on: October 20, 2014 »
I haven't been doing any JS since those 2 demos. :(

Thanks for the book. I'm sure it would get handy later.
Challenge Trophies Won: