අලංකාරය සහ සැපපහසුව - javascript සමඟ පට්ටම චිත්‍ර ඇඳීම සහ Ubiquity ප්ලගිනය

4

Share/Bookmark ඊට ඉස්සෙල්ලා පොස්ට් එකේ දැම්ම "azarask.in" වෙබ් අඩවියේ තිබිලා තමා මේදෙන්නත් හම්බ වුනේ . මේකත් පස්සේ දාන්න තිබ්බොත් අමතක වෙයි කියලා හිතලා ඉක්මනට දාන්න හිතුණා . javascript සමඟ චිත්‍ර ඇඳීම ගැන කථා කරනවා නම් මෙයට කියන්නේ Algorithm Ink කියලා.  garupale



ඔයාලට web based demo එකක් http://azarask.in/projects/algorithm-ink/ බලාගන්න පුලුවන් . ඔයාලට මෙයින් චිත්‍ර අඳින්න වගේම ඒවා පින්තුර ලෙස save කරගැනිමේ හැකියවත් ලබාදී තිබෙනවා .මතක තියාගන්න මේක Internet Explorer වල run වෙන්නේනෑ , ඔයාලට හොඳට බලන්න ඕනේනම් firefox දාලා බලන්නකෝ.මම web based demo එක ඔයාලෙගේ වෙබ් අඩවියට දාන්න පුලුවන් විදිහට script එක එකතු කරලා ගත්තා . ඒක ඔයාලට http://www.mediafire.com/?jymammzkzrc මඟින් භාගත හැක .




 A Peak at the Syntax

The grammar is pretty simple. Let’s start by making a circle:
startshape shape
rule shape{
 CIRCLE{}
}
This says start by drawing the rule named “shape”. The rule shape says to draw a circle.

Now let’s make things more interesting:
startshape shape
rule shape{
 CIRCLE{}
 shape{ s .5 b .2 x -.25 }
}
We’ve added a single line which says that part of the rule for “shape” is to draw itself, scaled down by half, with a slightly increased brightness, drawn on the left side of its parent circle. This makes an off-centered bulls-eye pattern.

Now let’s go to the right, as well as the left:
startshape shape
rule shape{
 CIRCLE{}
 shape{ s .5 b .2 x -.25 }
 shape{ s .5 b .2 x .25 }
}

For comparison, this is what the equivalent code in Processing.js looks like:
// Processing.js code to make the same circle pattern.
void setup()
{
  size(200, 200);
  noStroke();
  smooth();
  noLoop();
}
void draw()
{
  drawCircle(126, 170, 6);
}
void drawCircle(int x, int radius, int level)
{
  float tt = 126 * level/4.0;
  fill(tt);
  ellipse(x, 100, radius*2, radius*2);
  if(level > 1) {
    level = level - 1;
    drawCircle(x - radius/2, radius/2, level);
    drawCircle(x + radius/2, radius/2, level);
  }
}
It’s much longer, involves more setup, and more fiddly calculations. In fact, the entire ContextFree.js source is as long as the setup function. Of course, by simplifying so much in ContextFree.js, we’ve also removed the flexibility Processing.js affords.
Adding one more line of code gives an unexpected result: The Sierpinski Triangle. I’ll leave it as an exercise for the reader to figure out what that line of code is, but I doubt that it will be much of a puzzle.

Follow the mouse

The equivalent of “Hello, World!” for a graphical environment is a dot that follows the cursor, replete with a fading trail. This is what it looks like in ContextFree.js:
startshape DOT
rule DOT{
  SQUARE{ s 4 b 1 a -.9 }
  SQUARE{ s .3 }
}
rule MOUSEMOVE{
  DOT{ }
}
We start by defining the rule “DOT” which draws two things: A large square (scaled up 4x), which is white (brightness of 1), and mostly transparent (alpha of -.9), and then a smaller black square. The large transparent white square acts to fade out more and more of the previous DOTs that have been drawn (it’s a standard trick for doing motion blur effects). The rule MOUSEMOVE simply draws a dot at the current mouse position, whenever the mouse moves.
Here’s the result.
මෙයට යොදාගෙන තිබෙන script කට්ට ඔයාලට http://code.google.com/p/contextfree/source/browse/trunk/
වෙතින් භාගත හැක . මෙය මෘදුකාංගයක් ලෙස ඔයාලට http://www.contextfreeart.org/mediawiki/index.php/Download_page වෙතින් භාගන්න පුලුවන්. 



 2. අනික් ටුල් එක තමයි  Ubiquity . මේක එන්නේ firefox වලට විතරයි . FireFox user කෙනෙක් නම් අනිවාර්යෙන්ම තිබිය යුතු plugin එකක් තමයි මේක . හිතන්න අපිට e-mail එකක් යවන්න ඕනේ කියලා . අපිට e-mail එක යවන්න නම් අපි මුලින්ම අපේ mail client එකට ගිහිල්ලා mail එකක් හදලා යවන්න එපැයි . නමුත් මේක අපිට script එකක් ලියලා ඕනෙම නම් කරගන්නත් පුලුවන් . නමුත් හිතන්න අපිට පුලුවන් නම් e-mail යවන්න කියලා අපි browser එකට සරල භාශාවෙන් කියුවාම e-mail එක යවනවා නම් කොච්චර ආතල්ද ??? , අන්න ඒ වගේ වැඩක් තමා Ubiquity මඟින් සිද්ධ වෙන්නේ .......  මෙය web browser interface  එක හා platform එක අතරමනා සම්බන්ධතාවයක් (සන්නිවේදනයක්) නිර්මාණය කිරිමේ මුලික අඩිතාලමක් ලෙස තමා මේ තාක්ශණය කරලියට පැමිනෙන්නේ . ම්ම බොරුද කියන්නේ කියලා ඔයාලා පහත විඩියෝ එක බලලම ඉන්නකෝ , එතකොට තේරෙයි (*මෙක අනිවාර්යෙන්ම බලන්න හොඳේ).  garupale



ඔයාට මෙයhttps://addons.mozilla.org/en-US/firefox/addon/9527 භාගත කරගන්න පුලුවන් .
වැඩිපුර :


 මොකද හිතන්නේ මේ ගැන , ඔය පහළින් කොමෙන්ට් එකක් දාලම යන්නකෝ !!! garupale

4 comments:

  1. Hasitha ජයසූරිය said...
  2. මැක්සා මැක්සා

  3. නිපුන චාමින්ද said...
  4. විස්තරේ කිව්වට බොහොම ස්තුතියි.

  5. දනුක ප්‍රශාන් said...
  6. Great Work..ela

  7. හිඟන්නා said...
  8. @ Hasitha ජයසූරිය : බොහෝම ස්තුතියි මලයෝ ප්‍රතිචාරයට !!!

    @ නිපුන චාමින්ද : එල එල , බොහෝම ස්තුතියි මචෝ ප්‍රතිචාරයට !!

    @ දනුක ප්‍රශාන් : thanks bro !! :D

Post a Comment

write your comments here!

Related Posts with Thumbnails