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"	]
		]