ඔයාලට 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.
ඊට ඉස්සෙල්ලා පොස්ට් එකේ දැම්ම "azarask.in" වෙබ් අඩවියේ තිබිලා තමා මේදෙන්නත් හම්බ වුනේ . මේකත් පස්සේ දාන්න තිබ්බොත් අමතක වෙයි කියලා හිතලා ඉක්මනට දාන්න හිතුණා . javascript සමඟ චිත්‍ර ඇඳීම ගැන කථා කරනවා නම් මෙයට කියන්නේ Algorithm Ink කියලා. 
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.
4 comments:
මැක්සා මැක්සා
විස්තරේ කිව්වට බොහොම ස්තුතියි.
Great Work..ela
@ Hasitha ජයසූරිය : බොහෝම ස්තුතියි මලයෝ ප්‍රතිචාරයට !!!
@ නිපුන චාමින්ද : එල එල , බොහෝම ස්තුතියි මචෝ ප්‍රතිචාරයට !!
@ දනුක ප්‍රශාන් : thanks bro !! :D
Post a Comment
write your comments here!