Difference between revisions of "Users/Manu"

From ZCubes Wiki
Jump to navigation Jump to search
(Created page with " << Z3 home =ZCubes Render Examples= ZCubes Render feature allows users to make fascinatingly complex drawings and animations by simply using the spreadsheet, ar...")
 
 
(20 intermediate revisions by 2 users not shown)
Line 2: Line 2:
  
  
−
=ZCubes Render Examples=
+
=Example 1: Youtube Icon=
  
−
ZCubes Render feature allows users to make fascinatingly complex drawings and animations by simply using the spreadsheet, array or table features.
+
<syntaxhighlight lang="javascript">
  
−
==Example 1: Two Circles==
+
RENDER(
 +
[
 +
    ["type","x","y","rx","ry","width","height","points","fill",
 +
"stroke","stroke-width"],
 +
 +
    ["rect",5,10,15,15,70,50,,"red","red",5],
 +
 +
    ["polygon",,,,,,,[27 ,25, 50, 37, 27, 45],"white","white",2]
 +
 
 +
]);
 +
""
 +
 
 +
</syntaxhighlight>
 +
 
 +
[[File:Render_Youtube_Icon.png]]
 +
 
 +
 
 +
=Example 2:Emoji Smiley Face=
  
−
Draw two circles with radii as given.
+
<syntaxhighlight lang="javascript">
  
−
<pre>
 
 
RENDER(
 
RENDER(
 
   [
 
   [
−
      ["type","size"],
+
    ["type","x","y","coordinates","fill","cx","cy","r","stroke","stroke-width"],
−
      ["circle",100],
+
  ["circle",,,,"yellow",200,150,40,"Yellow",20],
−
      ["circle",200]
+
  ["circle",,,,"black",180,140,10,"white",5],
−
  ]
+
  ["circle",,,,"black",220,140,10,"white",5],
 +
  ["path",,, "M 180 165 C 190 185, 210 185, 220 165","transparent",,,,"black",5],
 +
 +
  ])
 +
""
 +
 
 +
</syntaxhighlight>
 +
 
 +
[[File:Render_Emoji_Smiley_face.png]]
 +
 
 +
 
 +
=Example 3:Emoji Sad Face=
 +
 
 +
<syntaxhighlight lang="javascript">
 +
 
 +
RENDER(
 +
  [
 +
    ["type","x","y","coordinates","fill","cx","cy","r","stroke","stroke-width"],
 +
  ["circle",,,,"yellow",195,170,40,"Yellow",20],
 +
  ["circle",,,,"black",175,160,10,"white",5],
 +
  ["circle",,,,"black",215,160,10,"white",5],
 +
  ["path",,, "M 175 200 C 185 185, 200 180, 215 200","transparent",,,,"black",5],
 +
 
 +
  ])
 +
""
 +
 
 +
</syntaxhighlight>
 +
 
 +
[[File:Render_Emoji_Sad_face.png]]
 +
 
 +
=Example 4:Golden Star=
 +
 
 +
<syntaxhighlight lang="javascript">
 +
 
 +
RENDER( [
 +
["type","points","stroke","stroke-width","fill"],
 +
        ["polygon",[100,10 40,198 190,78 10,78 160,198],"gold",5,["gold"]],
 +
] )
 +
""
 +
 
 +
</syntaxhighlight>
 +
 
 +
[[File:Render_Golden_Star.png]]
 +
 
 +
=Example 5: Curves on_Slanding_line=
 +
 
 +
<syntaxhighlight lang="javascript">
 +
 
 +
RENDER
 +
([
 +
 
 +
["type","coordinates","fill","stroke","stroke-width"],
 +
 
 +
[ "path","M100,350 l 50,-25 a25,25 -30 0,1 50,-25 l 50,-25 a25,50 -30 0,1 50,-25 l 50,-25 a25,75 -30 0,1 50,-25 l 50,-25 a25,100 -30 0,1 50,-25 l 50,-25","red","green","3" ],
 +
 
 +
 
 +
])
 +
 
 +
""
 +
 
 +
</syntaxhighlight>
 +
 
 +
[[File:Render_Curves on_Slanding_line.png]]
 +
 
 +
 
 +
 
 +
=Additional Examples WIP=
 +
 
 +
=RENDER 3D=
 +
 
 +
=Example 1: Planet Mars=
 +
 
 +
<syntaxhighlight lang="javascript">
 +
 
 +
RENDER3D(
 +
[
 +
["type" ,"fill"],
 +
["sphere", "mars"]
 +
]
 +
)
 +
""
 +
 
 +
</syntaxhighlight>
 +
 
 +
[[File:Render_3D_Planet _Mars.png]]
 +
 
 +
=Example 2:Planet Earth=
 +
 
 +
<syntaxhighlight lang="javascript">
 +
 
 +
RENDER3D(
 +
[
 +
["type" ,"fill", "size"],
 +
["sphere", "EARTH",[1,30,30]]
 +
]
 
)
 
)
−
</pre>
+
""
 +
 
 +
</syntaxhighlight>
 +
 
 +
[[File:Render_3D_Planet _Earth.png]]
 +
 
 +
=Example 3:Animations Curve=
 +
 
 +
<syntaxhighlight lang="javascript">
 +
 
 +
RENDER3D(
 +
[
 +
["type" , "settings" , "coordinates", "size" , "stroke" , "fill", "helper", "material", "animation" ],
 +
["curve" , , [1,3,3] ,[5,20,20] , 0x00ff00 , "yellow" ,false , "phong", [["rpm"],[5]]]
 +
]
 +
);
 +
""
 +
 
 +
</syntaxhighlight>
 +
 
 +
[[File:Render_3D_Animation _Curve.png]]
 +
 
 +
=Example 4:Rotating Sphere=
 +
 
 +
<syntaxhighlight lang="javascript">
 +
 
 +
RENDER3D(
 +
[
 +
["type" , "settings" , "coordinates", "size" , "stroke" , "fill", "helper", "material", "animation" ],
 +
["sphere" , , [1,3,3] ,[5,20,20] , 0x00ff00 , "yellow" ,false , "phong",
 +
[
 +
["opm" ,"r" ],
 +
[20 ,10  ]
 +
]
 +
]
 +
]
 +
);
 +
""
 +
</syntaxhighlight>
 +
 
 +
[[File:Render_3D_Rotating_Sphere.png]]
 +
 
  
−
[[File:Two_Circles.png]]
+
=Example 5:Cube=
  
−
==Example 2: Ten Circles==
+
<syntaxhighlight lang="javascript">
  
−
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.
+
RENDER3D(
 +
[
 +
["type","material"],
 +
["cube","normal"]
 +
]
 +
)
 +
""
 +
</syntaxhighlight>
  
−
<pre>
+
[[File:Render_3D_Cube.png]]
−
RENDER(
+
 
−
  [
+
=Example 6:Heart=
−
      ["type","size","count"],
+
 
−
      ["circle",(i)=>100+i*10,10]
+
<syntaxhighlight lang="javascript">
−
  ]
+
 
 +
RENDER3D(
 +
[
 +
["type","fill"],
 +
["heart", "red",]
 +
]
 
)
 
)
 
""
 
""
−
</pre>
+
</syntaxhighlight>
 +
 
 +
[[File:Render_3D_Heart.png]]
 +
 
 +
=Example 7:TorusKnot=
 +
 
 +
<syntaxhighlight lang="javascript">
 +
 
 +
RENDER3D(
 +
[
 +
["type" , "settings" , "coordinates", "size" , "stroke" , "fill", "helper", "material"],
 +
 +
["knot" ,"Torus", ,[10,1,1] , 0x00ff00 , "violet" ,false , "phong"]
 +
]
 +
);
 +
""
 +
</syntaxhighlight>
  
−
[[File:Render_Ten_Circles.png]]
+
[[File:Render_3D_TorusKnot.png]]
  
−
==Example 3: American Flag==
+
=Example 8:HelixCurve=
  
−
Generating American Flag using RENDER feature.
+
<syntaxhighlight lang="javascript">
−
<pre>
+
 
−
// american flag 4 final
+
RENDER3D(
−
RENDER(
+
[
−
  [
+
["type" , "settings" , "coordinates", "size" , "stroke" , "fill", "helper", "material"],
−
      ["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,,,,,],
+
["knot" ,"HelixCurve", ,[20,1,1] , 0x00ff00 , "violet" ,false , "phong"]
−
      ["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]
 
−
  ]
 
−
)        
 
 
""
 
""
−
</pre>
 
−
[[File:Render_American_Flag.png]]
 
  
−
==Example 4: Indian Flag==
+
</syntaxhighlight>
 +
 
 +
[[File:Render_3D_HelixCurve.png]]
 +
 
 +
=Example 9:CinquefoilKnot=
  
−
Generating Indian Flag using RENDER feature.
+
<syntaxhighlight lang="javascript">
−
<pre>
 
  
−
RENDER(
+
RENDER3D(
−
  [
+
[
−
      ["type","x","y",      "width","height","fill",            "count","shape","id","href","sides","size","cx","cy","r","stroke","stroke-width","points","transform"],
+
["type" , "settings" , "coordinates", "size" , "stroke" , "fill", "helper", "material"],
−
      ["rect",10,(i)=>i*90,  400,  90,    ["orange","white","green"]  ,3,,,,,,],
+
−
      ["circle",,,,,      ,1,,,,,,200,135,40,"blue",5,],
+
["knot" ,"Cinquefoil", ,[5,1,1] , 0x00ff00 , "violet" ,false , "phong"]
−
      ["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})) ],
 
−
  ]
 
 
);
 
);
 
""
 
""
−
</pre>
 
  
−
[[File:Render_Indian_Flag.png]]
+
</syntaxhighlight>
  
−
=Additional Examples WIP=
+
[[File:Render_3D_CinquefoilKnot.png]]
 +
 
 +
=Example 10:Circle1 and Circle2 are rotating and also Circle1 is going around Circle2 but not viceversa =
 +
 
 +
<syntaxhighlight lang="javascript">
  
 +
RENDER3D(
 +
[
 +
["type" , "settings" , "coordinates", "size" , "stroke" , "fill", "helper", "material", "animation" ],
 +
["circle" , , [1,5,5] ,[5,20,20] , 0x00ff00 , "yellow" ,false , "phong",
 +
[
 +
["opm" ,"r" ],
 +
[10 ,10 ]
 +
]
 +
 +
],
 +
 +
["circle" , , [1,2,2] ,[2,10,10] , 0x00ff00 , "red" ,false , "phong",
 +
    [["rpm"],[1]]
 +
]
 +
  
−
[[Various RENDER Examples| Various RENDER Examples]]
+
]
 +
);
 +
""
 +
</syntaxhighlight>
  
−
[[ Z3 | <<  Z3 home ]]
+
[[File:Render_3D_C1C2_rotate.png]]

Latest revision as of 02:20, 22 December 2020

<< Z3 home


Example 1: Youtube Icon

RENDER(
	[
	    ["type","x","y","rx","ry","width","height","points","fill",
						"stroke","stroke-width"],
		
	    ["rect",5,10,15,15,70,50,,"red","red",5],
		
	    ["polygon",,,,,,,[27 ,25, 50, 37, 27, 45],"white","white",2]

]);
""

Render Youtube Icon.png


Example 2:Emoji Smiley Face

RENDER(
   [
   	  ["type","x","y","coordinates","fill","cx","cy","r","stroke","stroke-width"],
	  ["circle",,,,"yellow",200,150,40,"Yellow",20],
	  ["circle",,,,"black",180,140,10,"white",5],
	  ["circle",,,,"black",220,140,10,"white",5],
	  ["path",,, "M 180 165 C 190 185, 210 185, 220 165","transparent",,,,"black",5],
	
	   ])
""

Render Emoji Smiley face.png


Example 3:Emoji Sad Face

 RENDER(
   [
   	  ["type","x","y","coordinates","fill","cx","cy","r","stroke","stroke-width"],
	  ["circle",,,,"yellow",195,170,40,"Yellow",20],
	  ["circle",,,,"black",175,160,10,"white",5],
	  ["circle",,,,"black",215,160,10,"white",5],
	  ["path",,, "M 175 200 C 185 185, 200 180, 215 200","transparent",,,,"black",5],

	   ])
""

Render Emoji Sad face.png

Example 4:Golden Star

 RENDER( [ 
		["type","points","stroke","stroke-width","fill"],
	        ["polygon",[100,10 40,198 190,78 10,78 160,198],"gold",5,["gold"]],
	] )
""

Render Golden Star.png

Example 5: Curves on_Slanding_line

RENDER
([

["type","coordinates","fill","stroke","stroke-width"],

[ "path","M100,350 l 50,-25 a25,25 -30 0,1 50,-25 l 50,-25 a25,50 -30 0,1 50,-25 l 50,-25 a25,75 -30 0,1 50,-25 l 50,-25 a25,100 -30 0,1 50,-25 l 50,-25","red","green","3" ],


])

""

Render Curves on Slanding line.png


Additional Examples WIP

RENDER 3D

Example 1: Planet Mars

RENDER3D(
	[
		["type"		,"fill"],
		["sphere", "mars"]
	]
)
""

Render 3D Planet Mars.png

Example 2:Planet Earth

RENDER3D(
	[
		["type"		,"fill", "size"],
		["sphere", "EARTH",[1,30,30]]
	]
)
""

Render 3D Planet Earth.png

Example 3:Animations Curve

 RENDER3D(
	[
		["type"		,	"settings"	,	"coordinates", "size"	, "stroke"	, "fill", "helper", "material", "animation"	],
		["curve"		,			,	[1,3,3]		,[5,20,20]		, 0x00ff00		, "yellow" ,false	, "phong", [["rpm"],[5]]]
	]
);
""

Render 3D Animation Curve.png

Example 4:Rotating Sphere

 RENDER3D(
	[
		["type"		,	"settings"	,	"coordinates", "size"	, "stroke"	, "fill", "helper", "material", "animation"	],
		["sphere"		,			,	[1,3,3]		,[5,20,20]		, 0x00ff00		, "yellow" ,false	, "phong", 
			[
				["opm"	,"r" ],
				[20		,10  ]
			]
		]
	]
);
""

Render 3D Rotating Sphere.png


Example 5:Cube

 RENDER3D(
	[
		["type","material"],
		["cube","normal"]
	]
)
""

Render 3D Cube.png

Example 6:Heart

 RENDER3D(
	[
		["type","fill"],
		["heart", "red",]
	]
)
""

Render 3D Heart.png

Example 7:TorusKnot

 RENDER3D(
	[
		["type"		,	"settings"	,	"coordinates", "size"	, "stroke"	, "fill", "helper", "material"],
		
		["knot"		,"Torus",		,[10,1,1]		, 0x00ff00		, "violet" ,false	, "phong"]
	]
);
""

Render 3D TorusKnot.png

Example 8:HelixCurve

 RENDER3D(
	[
		["type"		,	"settings"	,	"coordinates", "size"	, "stroke"	, "fill", "helper", "material"],
		
		["knot"		,"HelixCurve",		,[20,1,1]		, 0x00ff00		, "violet" ,false	, "phong"]
	]
);
""

Render 3D HelixCurve.png

Example 9:CinquefoilKnot

RENDER3D(
	[
		["type"		,	"settings"	,	"coordinates", "size"	, "stroke"	, "fill", "helper", "material"],
		
		["knot"		,"Cinquefoil",		,[5,1,1]		, 0x00ff00		, "violet" ,false	, "phong"]
	]
);
""

Render 3D CinquefoilKnot.png

Example 10:Circle1 and Circle2 are rotating and also Circle1 is going around Circle2 but not viceversa

RENDER3D(
	[
		["type"		,	"settings"	,	"coordinates", "size"	, "stroke"	, "fill", "helper", "material", "animation"	],
		["circle"		,			,	[1,5,5]		,[5,20,20]		, 	0x00ff00	, "yellow" ,false	, "phong", 
			[
				["opm"	,"r" ],
				[10		,10 ]
			]
		
		],
	
	["circle"		,			,	[1,2,2]		,[2,10,10]		, 0x00ff00		, "red" ,false	, "phong", 
	     [["rpm"],[1]]
	]
	

	]
);
""

Render 3D C1C2 rotate.png

Retrieved from "http://wiki.zcubes.com/index.php?title=Users/Manu&oldid=215642"