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: Animating Rectangle using Spring Function

Nareshx=RENDER(
	[
		["id","type","coordinates","width","height","fill","count"],
		["one","rect",POLYPOINTS(10,10,10,10),100,100,"blue",1,]
	]
);
RENDER(
	[
		["id","animate","animationsettings"],
		["one","animate",[["loop","translateX","duration","easing"],[true,50,30*1000, "spring(1, 80, 10, 0)"]]]
	]
	,
	Nareshx
)
""

Example 4: Phase of Moon

PhasesOfMoon=RENDER(
	[
		["id","type","coordinates","r","fill","stroke","count","transform-origin"],
		["","circle",POLYPOINTS(109,208,222,228),	50,"https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/1024px-FullMoon2010.jpg",1,[100,100]],
		["cover","circle",POLYPOINTS(109,208,222,228),	50,"white","white",1,[100,100]]
	]
	
);
RENDER(
	[
		["id","animate","animationsettings"],
		["cover","animate",[["loop","translateX","duration","easing"],[true,270,30*1000,"linear"]]]
	]
	,
	PhasesOfMoon
)
""

Example 5: Steps

RENDER(
	[
		["type","points","stroke","stroke-width","fill"],
		["polygon",[0,40 40,40 40,80 80,80 80,120 120,120 120,160],"red",5,"white"]
	]
);			
""

Example 6: Circle with Gradiant

RENDER
(
	[
		["id","type","cx","cy","r","fill","stroke","count","transform-origin"],
		["First","circle",50,50,	50,["green","white","orange"],1]
	]
);

""

Example 7: Waves

RENDER
(
[
	["type","coordinates","fill","stroke","stroke-width"],
	["path", "M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80","transparent","black",5]
]
);
""

Example 8: Line and Curves

RENDER
(
[
	["type","coordinates","fill","stroke","stroke-width"],
	["path", "M 10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10","transparent","red",5]
]
);
""

Example 9: Simple Designs

RENDER
(
[
	["type","coordinates","fill","stroke","stroke-width"],
	["path", "M 80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z","transparent","green",5],
	["path", "M 230 80 A 45 45, 0, 1, 0, 275 125 L 275 80 Z","transparent","red",5],
	["path", "M 80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z","transparent","purple",5],
	["path", "M 230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z","transparent","blue",5]
]
);
""

Example 10: Pacman

RENDER
(
[
	["type","coordinates","fill","stroke","stroke-width"],
	["path", "M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z","white","black",5]
]
);
""

Example 11: Spade

RENDER
(
[
	["type","coordinates","fill","stroke","stroke-width"],
	["path", "M25.549 10.88c-6.049-4.496-8.133-8.094-9.549-10.88v0c-0 0-0-0-0-0v0c-1.415 2.785-3.5 6.384-9.549 10.88-10.314 7.665-0.606 18.365 7.93 12.476-0.556 3.654-2.454 6.318-4.381 7.465v1.179h12.001v-1.179c-1.928-1.147-3.825-3.811-4.382-7.465 8.535 5.889 18.244-4.811 7.93-12.476z","white","black",5]
]
);
""

Example 12: Apple Symbol

RENDER
(
[
	["type","coordinates","fill","stroke","stroke-width"],
	["path", "M54.734 17.003c-0.040-4.053 3.305-5.996 3.454-6.093-1.88-2.751-4.808-3.127-5.851-3.171-2.492-0.252-4.862 1.467-6.127 1.467-1.261 0-3.213-1.43-5.28-1.392-2.716 0.040-5.221 1.579-6.619 4.012-2.822 4.897-0.723 12.151 2.028 16.123 1.344 1.944 2.947 4.127 5.051 4.049 2.026-0.081 2.793-1.311 5.242-1.311s3.138 1.311 5.283 1.271c2.18-0.041 3.562-1.981 4.897-3.931 1.543-2.255 2.179-4.439 2.216-4.551-0.048-0.022-4.252-1.632-4.294-6.473zM50.705 5.11c1.117-1.355 1.871-3.235 1.665-5.11-1.609 0.066-3.559 1.072-4.713 2.423-1.036 1.199-1.942 3.113-1.699 4.951 1.796 0.14 3.629-0.913 4.747-2.264z","black","black",5]
]
);
""

Additional Examples WIP

Various RENDER Examples

<< Z3 home