Users/Vishnu
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: American Flag
Generating American Flag using RENDER feature.
// american flag 4 final
RENDER(
[
["type","x","y", "width","height","fill", "count","shape","id","href","sides","size"],
["rect",10,(i)=>i*20, 400, 20, (i)=>(i%2)?"white":"red" ,13,,,,,],
["rect",10, 0, 200, 140, "blue" ,1,,,,,],
["star",50, 0, 200, 140, "white" ,1,true,"star11","","12",10],
["use",(i)=>((i)%6)*30+30, (i)=>((i).intdiv(6))*25+15, 300, 140, "white" ,6*5,false,"","star11","",300],
["use",(i)=>((i)%5)*30+20+25, (i)=>((i).intdiv(5))*25+20+10, 300, 140, "white" ,4*5,false,"","star11","",300]
]
)
""
Example 4: Indian Flag
Generating Indian Flag using RENDER feature.
RENDER(
[
["type","x","y", "width","height","fill", "count","shape","id","href","sides","size","cx","cy","r","stroke","stroke-width","points","transform"],
["rect",10,(i)=>i*90, 400, 90, ["orange","white","green"] ,3,,,,,,],
["circle",,,,, ,1,,,,,,200,135,40,"blue",5,],
["circle",,,,, ,1,,,,,,200,135,5,"blue",10,],
["polyline",,,,, "blue" ,24,,,,,,,,,"blue",1,i=>[200,135,199,120, 200,95,201,120,200,135],(i=>({"rotation":(i+1)/24*360,"cx":200,"cy":135})) ],
]
);
""
Example 5: American Flag 2
Generating American Flag using RENDER feature.
// american flag 4 final
RENDER(
[
["type","x","y", "width","height","fill", "count","shape","id","href","sides","size"],
["rect",10,(i)=>i*20, 400, 20, (i)=>(i%2)?"white":"red" ,13,,,,,],
["rect",10, 0, 200, 140, "blue" ,1,,,,,],
["star",50, 0, 200, 140, "white" ,1,true,"star11","","12",10],
["use",(i)=>((i)%6)*30+30, (i)=>((i).intdiv(6))*25+15, 300, 140, "white" ,6*5,false,"","star11","",300],
["use",(i)=>((i)%5)*30+20+25, (i)=>((i).intdiv(5))*25+20+10, 300, 140, "white" ,4*5,false,"","star11","",300]
]
)
""