Users/Naresh

<< Z3 home

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: Animating Magic Square using Linear Function

GridPointsx=RENDER(
	[
		["id","type","coordinates","r","fill","count","transform-origin"],
		["red1","circle",GRIDPOINTS(10,100),	20,"red",IM(2),],
		["yellow1","circle",GRIDPOINTS(10,100),10,"yellow",IM(2),],
	]
	
	
);
RENDER(
	[
		["id","animate","animationsettings"],
		["red1","animate",[["loop","translateX","duration","easing"],[true,270,60*1000,"linear"]]],
		["yellow1","animate",[["loop","translateY","duration","easing"],[true,270,30*1000,"linear"]]]
	]
	,
	GridPointsx
)
""

Example 2: Animating Magic Square using CubicBezier Function

GridPointsx=RENDER(
	[
		["id","type","coordinates","r","fill","count","transform-origin"],
		["red1","circle",GRIDPOINTS(10,100),	20,"red",IM(2),],
		["yellow1","circle",GRIDPOINTS(10,100),10,"yellow",IM(2),],
	]
	
	
);
RENDER(
	[
		["id","animate","animationsettings"],
		["red1","animate",[["loop","translateX","duration","easing"],[true,270,30*1000,"cubicBezier(.5, .05, .1, .3)"]]],
		["yellow1","animate",[["loop","translateX","duration","easing"],[true,270,30*1000,"cubicBezier(.5, .05, .1, .3)"]]]
	]
	,
	GridPointsx
)
""

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})) ],
   ]
);
""

Additional Examples WIP

Various RENDER Examples

<< Z3 home