Users/Devi

<< 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: Two Circles

Draw two circles with radii as given.

RENDER(
   [
      ["type","size"],
      ["circle",100],
      ["circle",200]
   ]
)

Example 2: Ten Circles

Draw ten circles with radii as per the function given. Note that each ith circle will have the radius as given by the function. Note the use of count column to specify the number of circles to be generated.

RENDER(
   [
      ["type","size","count"],
      ["circle",(i)=>100+i*10,10]
   ]
)
""

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

Gradient Colors

RENDER( [ ["type","x","y","rx","ry","width","height","fill"], ["rect",50,20,20,20,120,120,"blue"], ["rect",100,50,20,20,120,120,"skyblue"], ["rect",150,80,20,20,120,120,"darkblue"], ["rect",200,110,20,20,120,120,"lightblue"],

]

); ""

To Check

// soldier test from config

RENDER3D(
	[
		["type"		,	"settings"	,	"coordinates", "size"	, "stroke"	, "fill", "helper", "material"	],
		["grid"		,			,	[0,0,0]		,[200,100,2]		, 0x00ff00		, "yellow" ,false	, "phong"],
		["load"		,	"soldier"		,	[1,3,3]		,[5,20,20]		, 0x00ff00		,  ,false	, "phong"]
	]
);
""

// parrot RENDER3D( [ ["type" , "settings" , "coordinates", "size" , "stroke" , "fill", "helper", "material" ], ["grid" , , [0,0,0] ,[200,100,2] , 0x00ff00 , "yellow" ,false , "phong"], ["load" , "parrot" , [1,3,3] ,[5,20,20] , 0x00ff00 , ,false , "phong"] ] ); ""

//Rectlight,Fog,Sphere and Light----Same Results RENDER3D( [ ["type" , "settings" , "coordinates", "size" , "stroke" , "fill", "helper", "material" ], ["scene" , [ ["background"], ["red"] ], ],

["camera" , [ ["fov" ,"aspect" ,"near" ,"far", "position" ,"focallength"], [60 ,"auto" ,0.1 ,1000 , [0,0,5] , 3] ], , , , ,],

["light" , [ ["type" , "color", "intensity", "width", "height"], ["rectarealight" , "red", 0.6, 10, 10] ] , [1,1,-5] ,[5,2,20] , 0x00ff00 , "yellow" ,false , "phong"], ["sphere" , , [1,3,3] ,[5,20,20] , 0x00ff00 , "yellow" ,false , "phong"] ] ) ""

// fog RENDER3D( [ ["type" , "settings" , "coordinates", "size" , "stroke" , "fill", "helper", "material" ], ["scene" , [ ["background"], ["red"] ], ],

["fog" , [ ["color","near","far"], ["red",10,2000] ], , , , , ,], /* ["fog" , [ ["color","density"], ["red",0.1] ], , , , , ,], */ ["camera" , [ ["fov" ,"aspect" ,"near" ,"far", "position" ,"focallength"], [60 ,"auto" ,0.1 ,1000 , [0,0,5] , 3] ], , , , ,],

["light" , [ ["type" , "color", "intensity", "distance", "decay"], ["pointlight" , "red", 0.6, 100, 2] ] , [1,1,-5] ,[5,2,20] , 0x00ff00 , "yellow" ,false , "phong"], ["sphere" , , [1,3,3] ,[5,20,20] , 0x00ff00 , "yellow" ,false , "phong"] ] ) "" //sphere and light RENDER3D( [ ["type" , "settings" , "coordinates", "size" , "stroke" , "fill", "helper", "material" ], ["scene" , [ ["background"], ["red"] ], , , , , ,], ["camera" , [ ["fov" ,"aspect" ,"near" ,"far", "position" ,"focallength"], [60 ,"auto" ,0.1 ,1000 , [0,0,5] , 3] ], , , , ,],

["light" , [ ["type" , "color", "intensity", "distance", "decay"], ["pointlight" , "red", 0.6, 100, 2] ] , [1,1,-5] ,[5,2,20] , 0x00ff00 , "yellow" ,false , "phong"], ["sphere" , , [1,3,3] ,[5,20,20] , 0x00ff00 , "yellow" ,false , "phong"] ] ) ""

Additional Examples WIP

Various RENDER Examples

<< Z3 home