RENDER Examples

ZCubes Render Examples=

Example 1

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

Example 2

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

Example 3

American Flag

// 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

// american flag 4 final
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

	x=500..0..-10
	a=x.mergerows(0..0);
	b=x.mergerows(0..0).m(r=>r.reverse()).reverse();
	c=a.mergerows(b)
	d=c.m(r=>["line",r])
	ab=RENDER(d)
	e=d.map(r=>[r[0],[r[1][0],500-r[1][1],500-r[1][2],r[1][3]]])
	RENDER(e,ab)
	""

Example 6

Animation Demo

[
	["type"	,	"size"		,	"coordinates"						, "stroke"		, "fill"	, "label", "transform","animate","animationsettings"],
	["circle"	,	50		,	[300,200]						, "red"		, "yellow"	, "CenterOf", {translateX:100,rotate:50}],
	
	//[1	,	100		,	[100,100]						, "red"		, "green"	, "CenterOf", 
	//[1	,	null		,	null						, "red"		, "green"	, "CenterOf", 
	//[1	,	null		,	null						, 'rgba(255, 0, 0, 0.7)' 		, 'rgba(0, 255, 0, 0.7)' 	, "CenterOf", 
	//[1	,	null		,	[250,450]						, 'rgba(255, 0, 0, 0.7)' 		, 'rgba(0, 255, 0, 0.7)' 	, "CenterOf", 
	[1	,	300		,	[250,450]						, 'rgba(255, 0, 0, 0.7)' 		, 'rgba(0, 255, 0, 0.7)' 	, "CenterOf", 
		{translateX:50,rotate:90},
		"animate",
		{
			duration: 1000,
			delay: 1000,
			loop: true
			// when: 'now',
			// swing: true,
			// times: 5,
			// wait: 200
		}
	],
	
	["line"		,	null	,	[100,10,200,100]				, "yellow"	, "blue"	, "Line Center"	],
	["text"		,	"HELLO"	,	[300,200]						, "yellow"	, "brown"	, ""			],
	["polygon"	,	null	, [[100,100],[200,200],[300,200]]	, "yellow"	, "green"	, "TEST POLY"	],
	["path"		,	null	, "M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z"	, "yellow"	, "blue"	, "TEST POLY"	],
	[null		,	null	, "M0 0 V50 A60 20 0 1 0 100 50 v125 C150 125 0 85 0 185 z"	,null	, null	, null,
		null,//{translateX:50,rotate:90},
		"animate",
		{
			duration: 1000,
			delay: 1000,
			loop: true
			// when: 'now',
			// swing: true,
			// times: 5,
			// wait: 200
		}
		],
	["rect"		,	null	, [[200,100],[200,200]]				, "orange"	, "skyblue"	, "TEST RECT"	],
	["TEXTPATH"		,	null	,  "M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z"				, "blue"	, "moccasin"	, "TEST TXT PATH"	]
]