Difference between revisions of "Users/Vishnu"
Jump to navigation
Jump to search
| Line 10: | Line 10: | ||
Draw whatsApp Smileys. | Draw whatsApp Smileys. | ||
| − | < | + | <syntaxhighlight lang="javascript"> |
RENDER | RENDER | ||
| Line 98: | Line 98: | ||
| − | </ | + | </syntaxhighlight> |
[[File:Smileys.PNG]] | [[File:Smileys.PNG]] | ||
| Line 106: | Line 106: | ||
Draw shapes controlled by button click event. | Draw shapes controlled by button click event. | ||
| − | < | + | <syntaxhighlight lang="javascript"> |
RENDER( | RENDER( | ||
[ | [ | ||
| Line 136: | Line 136: | ||
"" | "" | ||
| − | </ | + | </syntaxhighlight> |
[[File:Buttonevent.PNG]] | [[File:Buttonevent.PNG]] | ||
| Line 143: | Line 143: | ||
Generating Ellipse in Horizontal view using RENDER feature. | Generating Ellipse in Horizontal view using RENDER feature. | ||
| − | < | + | <syntaxhighlight lang="javascript"> |
RENDER( | RENDER( | ||
| Line 157: | Line 157: | ||
"" | "" | ||
| − | </ | + | </syntaxhighlight> |
[[File:Ellipsein.PNG]] | [[File:Ellipsein.PNG]] | ||
| Line 163: | Line 163: | ||
Draw a polyline. | Draw a polyline. | ||
| − | < | + | <syntaxhighlight lang="javascript"> |
RENDER( | RENDER( | ||
| Line 176: | Line 176: | ||
"" | "" | ||
| − | </ | + | </syntaxhighlight> |
[[File:Polyline.PNG]] | [[File:Polyline.PNG]] | ||
| Line 182: | Line 182: | ||
==Example 5: Triangle using path== | ==Example 5: Triangle using path== | ||
Draw a triangle using path. | Draw a triangle using path. | ||
| − | < | + | <syntaxhighlight lang="javascript"> |
RENDER( | RENDER( | ||
| Line 195: | Line 195: | ||
"" | "" | ||
| − | </ | + | </syntaxhighlight> |
[[File:Trianglebypath.PNG]] | [[File:Trianglebypath.PNG]] | ||
| Line 201: | Line 201: | ||
Draw Lines using path. | Draw Lines using path. | ||
| − | < | + | <syntaxhighlight lang="javascript"> |
RENDER( | RENDER( | ||
| Line 215: | Line 215: | ||
) | ) | ||
"" | "" | ||
| − | </ | + | </syntaxhighlight> |
[[File:Dashed_lines.PNG]] | [[File:Dashed_lines.PNG]] | ||
| Line 221: | Line 221: | ||
Draw Sound waves using path. | Draw Sound waves using path. | ||
| − | < | + | <syntaxhighlight lang="javascript"> |
RENDER( | RENDER( | ||
| Line 246: | Line 246: | ||
"" | "" | ||
| − | </ | + | </syntaxhighlight> |
[[File:Wave1.PNG]] | [[File:Wave1.PNG]] | ||
| Line 252: | Line 252: | ||
Draw shapes using path. | Draw shapes using path. | ||
| − | < | + | |
| + | <syntaxhighlight lang="javascript"> | ||
RENDER( | RENDER( | ||
| Line 269: | Line 270: | ||
| − | </ | + | </syntaxhighlight> |
[[File:Shapes.PNG]] | [[File:Shapes.PNG]] | ||
| Line 275: | Line 276: | ||
Draw shapes using path. | Draw shapes using path. | ||
| − | < | + | <syntaxhighlight lang="javascript"> |
RENDER( | RENDER( | ||
| Line 288: | Line 289: | ||
"" | "" | ||
| − | </ | + | </syntaxhighlight> |
[[File:Shape1.PNG]] | [[File:Shape1.PNG]] | ||
==Example 10: Triangle == | ==Example 10: Triangle == | ||
Draw triangle . | Draw triangle . | ||
| − | < | + | <syntaxhighlight lang="javascript"> |
RENDER( | RENDER( | ||
| Line 307: | Line 308: | ||
| − | </ | + | </syntaxhighlight> |
[[File:Triangle_render.PNG]] | [[File:Triangle_render.PNG]] | ||
Latest revision as of 02:54, 4 December 2020
ZCubes Render Examples
ZCubes Render feature allows users to make fascinatingly complex drawings and animations by simply using the spreadsheet, array or table features.
Example 1: smileys
Draw whatsApp Smileys.
RENDER
(
[
["type","cx","cy","rx","ry","coordinates","fill","stroke","stroke-width"],
["ellipse",60,43,40,40,,"yellow","black",5],
["ellipse",40,35,5,5,,"black","black",5],
["ellipse",80,35,5,5,,"black","black",5],
["path",,,,, "M 30 50 C 40 60, 60 80, 90 50","transparent","black",5],
]
);
""
----------------------------------------
RENDER
(
[
["type","cx","cy","rx","ry","coordinates","fill","stroke","stroke-width"],
["ellipse",60,43,40,40,,"yellow","black",5],
["ellipse",43,35,7,7,,"white","white",5],
["ellipse",43,35,4,4,,"black","black",5],
["ellipse",75,35,7,7,,"white","white",5],
["ellipse",75,35,4,4,,"black","black",5],
]
);
""
------------------------------------
RENDER
(
[
["type","cx","cy","rx","ry","coordinates","fill","stroke","stroke-width"],
["ellipse",60,43,40,40,,"yellow","black",5],
["ellipse",43,35,4,4,,"black","black",5],
["ellipse",75,35,4,4,,"black","black",5],
["line",,,,,[40,60,80,60],"black","black",5]
]
);
""
------------------------------
RENDER(
[
["type","cx","cy","rx","ry","coordinates","fill","stroke","stroke-width"],
["ellipse",60,43,40,40,,"yellow","black",5],
["ellipse",40,35,5,5,,"black","black",5],
["ellipse",80,35,5,5,,"black","black",5],
["path",,,,, "M 30 50 C 40 60, 60 80, 90 50","transparent","black",5],
["path",,,,, "M 30 50 C 40 70, 65 90, 90 50","transparent","black",5],
]
);
""
-------------------------------
RENDER
(
[
["type","cx","cy","rx","ry","coordinates","fill","stroke","stroke-width"],
["ellipse",60,45,40,40,,"yellow","black",5],
["ellipse",40,35,5,5,,"black","black",5],
["ellipse",80,35,5,5,,"black","black",5],
["path",,,,, "M 40 65 C 50 50, 60 40, 80 65","transparent","black",5],
]
);
""
Example 2: Controlled by Event
Draw shapes controlled by button click event.
RENDER(
[
["type","size","id","value","trigger","goto","x","y","coordinates"],
["input:button",100,"d1","Circle","click",":cir",40,30,[20,20]],
["input:button",100,"d2","Rectangle","click",":rect",40,50],
["input:button",100,"d3","Triangle","click",":tri",40,70],
["input:button",300,"d3","Line","click",":line",40,70],
["."],
[":cir"],
["type","cx","cy","r","stroke","stroke-width","fill"],
["circle",350,200,50,"green",5,"red"],
["."],
[":rect"],
["type","x","y","width","height","fill","stroke"],
["rect",100,250,150,250,"blue","red"],
["."],
[":tri"],
["type","points","stroke","stroke-width","fill"],
["polygon",[150,100 200,200 100,200],"red",5,["green","blue","lime"]],
["."],
[":line"],
["type","x1","y1","x2","y2","stroke","stroke-width"],
["line",30,40,100,100,"blue",5]
]
)
""
Example 3: Ellipse
Generating Ellipse in Horizontal view using RENDER feature.
RENDER(
[
["type","cx","cy", "rx", "ry","fill","stroke","stroke-dasharray"],
["ellipse",240,100,220,30,"purple"],
["ellipse",220,70,190,20,"lime"],
["ellipse",210,45,170,15,"yellow"],
]
);
""
Example 4: Polyline
Draw a polyline.
RENDER(
[
["type","points", "fill","stroke","stroke-width"],
["polyline","10,40 40,40 40,80 80,80 80,120 120,120 120,160","white","red",5],
]
)
""
Example 5: Triangle using path
Draw a triangle using path.
RENDER(
[
["type","coordinates", "fill","stroke","stroke-width"],
["path","M150 0 L75 200 L225 200 Z","lime","red",5],
]
);
""
Example 6: Dashed Lines
Draw Lines using path.
RENDER(
[
["type","coordinates", "fill","stroke","stroke-dasharray","stroke-width"],
["path","M5 20 l215 0","","black","5,5",5],
["path","M5 40 l215 0","","black","10,10",5],
["path","M5 60 l215 0","","black","20,10,5,5,5,10",5],
]
)
""
Example 7: Sound waves
Draw Sound waves using path.
RENDER(
[
["type","coordinates", "fill","stroke","stroke-width"],
["path","M100,200 C100,100 250,100 250,200 S400,300 400,200","","red",5],
]
);
""
------------------------
RENDER(
[
["type","coordinates", "fill","stroke","stroke-width"],
["path","M100,200 C100,100 250,100 250,200 S400,300 400,200","Blue","red",5],
]
);
""
Example 8: Shapes by path
Draw shapes using path.
RENDER(
[
["type","coordinates", "fill","stroke","stroke-width"],
["path","M20,20 L80,20 L20,50 L80,50 L20,80 L80,80","white","green",3],
["path","M120,50 S120,-20 140,50 S170,80 180,40","white","green",3],
]
)
""
Example 9:Shapes
Draw shapes using path.
RENDER(
[
["type","coordinates", "fill","stroke","stroke-width"],
["path","M50,100 L200,30 L350,200 L500,350 L700,300","Blue","red",5],
]
);
""
Example 10: Triangle
Draw triangle .
RENDER(
[
["type","coordinates", "fill","stroke","stroke-width"],
["path","M 100 100 L 300 100 L 200 300 z","Blue","red",5],
]
)
""
