Difference between revisions of "Users/Naresh"

From ZCubes Wiki
Jump to navigation Jump to search
Line 74: Line 74:
 
""</pre>
 
""</pre>
  
==Example 4: Indian Flag==
+
==Example 4: Phase of Moon==
 +
 
  
Generating Indian Flag using RENDER feature.
 
 
<pre>
 
<pre>
 
+
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(
 
RENDER(
  [
+
[
      ["type","x","y",      "width","height","fill",            "count","shape","id","href","sides","size","cx","cy","r","stroke","stroke-width","points","transform"],
+
["id","animate","animationsettings"],
      ["rect",10,(i)=>i*90,  400,  90,    ["orange","white","green"]   ,3,,,,,,],
+
["cover","animate",[["loop","translateX","duration","easing"],[true,270,30*1000,"linear"]]]
      ["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})) ],
+
PhasesOfMoon
  ]
+
)
);
 
 
""
 
""
 
</pre>
 
</pre>
 
[[File:Render_Indian_Flag.png]]
 
  
 
=Additional Examples WIP=
 
=Additional Examples WIP=

Revision as of 06:08, 18 December 2020

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

Additional Examples WIP

Various RENDER Examples

<< Z3 home