Users/Vishnu
Jump to navigation
Jump to search
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],
]
)
""
