Difference between revisions of "Users/Vishnu"

From ZCubes Wiki
Jump to navigation Jump to search
 
(12 intermediate revisions by one other user not shown)
Line 10: Line 10:
 
Draw  whatsApp Smileys.
 
Draw  whatsApp Smileys.
  
−
<pre>
+
<syntaxhighlight lang="javascript">
  
 
RENDER
 
RENDER
Line 98: Line 98:
  
  
−
</pre>
+
</syntaxhighlight>
  
 
[[File:Smileys.PNG]]
 
[[File:Smileys.PNG]]
Line 106: Line 106:
 
Draw shapes controlled by button click event.
 
Draw shapes controlled by button click event.
  
−
<pre>
+
<syntaxhighlight lang="javascript">
 
RENDER(
 
RENDER(
 
[
 
[
Line 136: Line 136:
 
""
 
""
  
−
</pre>
+
</syntaxhighlight>
  
 
[[File:Buttonevent.PNG]]
 
[[File:Buttonevent.PNG]]
  
−
==Example 3: American Flag==
+
==Example 3: Ellipse==
 +
 
 +
Generating Ellipse in Horizontal view using RENDER feature.
 +
<syntaxhighlight lang="javascript">
 +
 
 +
RENDER(
 +
[
 +
["type","cx","cy", "rx", "ry","fill","stroke","stroke-dasharray"],
 +
 +
["ellipse",240,100,220,30,"purple"],
 +
["ellipse",220,70,190,20,"lime"],
 +
["ellipse",210,45,170,15,"yellow"],
 +
 +
]
 +
);
 +
""
 +
 
 +
</syntaxhighlight>
 +
[[File:Ellipsein.PNG]]
 +
 
 +
==Example 4: Polyline==
 +
 
 +
Draw a polyline.
 +
<syntaxhighlight lang="javascript">
 +
 
 +
RENDER(
 +
[
 +
["type","points", "fill","stroke","stroke-width"],
 +
 +
["polyline","10,40 40,40 40,80 80,80 80,120 120,120 120,160","white","red",5],
 +
 +
 +
]
 +
)
 +
""
 +
 
 +
</syntaxhighlight>
 +
 
 +
[[File:Polyline.PNG]]
 +
 
 +
==Example 5: Triangle using path==
 +
Draw a triangle using path.
 +
<syntaxhighlight lang="javascript">
 +
 
 +
RENDER(
 +
[
 +
["type","coordinates", "fill","stroke","stroke-width"],
 +
 +
["path","M150 0 L75 200 L225 200 Z","lime","red",5],
 +
 +
 +
]
 +
);
 +
""
 +
 
 +
</syntaxhighlight>
 +
[[File:Trianglebypath.PNG]]
 +
 
 +
==Example 6: Dashed Lines==
 +
 
 +
Draw Lines using path.
 +
<syntaxhighlight lang="javascript">
 +
 
 +
RENDER(
 +
[
 +
["type","coordinates", "fill","stroke","stroke-dasharray","stroke-width"],
 +
 +
["path","M5 20 l215 0","","black","5,5",5],
 +
["path","M5 40 l215 0","","black","10,10",5],
 +
["path","M5 60 l215 0","","black","20,10,5,5,5,10",5],
 +
 +
 +
]
 +
)
 +
""
 +
</syntaxhighlight>
 +
[[File:Dashed_lines.PNG]]
 +
 
 +
==Example 7: Sound waves==
 +
 
 +
Draw Sound waves using path.
 +
<syntaxhighlight lang="javascript">
 +
 
 +
RENDER(
 +
[
 +
["type","coordinates", "fill","stroke","stroke-width"],
 +
 +
["path","M100,200 C100,100 250,100 250,200 S400,300 400,200","","red",5],
 +
 +
 +
]
 +
);
 +
""
 +
 
 +
------------------------
 +
RENDER(
 +
[
 +
["type","coordinates", "fill","stroke","stroke-width"],
 +
 +
["path","M100,200 C100,100 250,100 250,200 S400,300 400,200","Blue","red",5],
 +
 +
 +
]
 +
);
 +
""
 +
 
 +
</syntaxhighlight>
 +
[[File:Wave1.PNG]]
 +
 
 +
==Example 8: Shapes by path==
 +
 
 +
Draw shapes using path.
 +
 
 +
<syntaxhighlight lang="javascript">
 +
 
 +
RENDER(
 +
[
 +
["type","coordinates", "fill","stroke","stroke-width"],
 +
 +
["path","M20,20 L80,20 L20,50 L80,50 L20,80 L80,80","white","green",3],
 +
["path","M120,50 S120,-20 140,50 S170,80 180,40","white","green",3],
 +
 +
 +
 +
 +
]
 +
)
 +
""
 +
 
 +
 
 +
</syntaxhighlight>
 +
[[File:Shapes.PNG]]
 +
 
 +
==Example 9:Shapes==
 +
 
 +
Draw shapes using path.
 +
<syntaxhighlight lang="javascript">
  
−
Generating American Flag using RENDER feature.
 
−
<pre>
 
−
// american flag 4 final
 
 
RENDER(
 
RENDER(
−
  [
+
[
−
      ["type","x","y",      "width","height","fill",           "count","shape","id","href","sides","size"],
+
["type","coordinates", "fill","stroke","stroke-width"],
−
      ["rect",10,(i)=>i*20,  400,  20,    (i)=>(i%2)?"white":"red"  ,13,,,,,],
+
−
      ["rect",10,  0,        200,  140,  "blue"                  ,1,,,,,],
+
["path","M50,100 L200,30 L350,200 L500,350 L700,300","Blue","red",5],
−
      ["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:Shape1.PNG]]
  
−
Generating Indian Flag using RENDER feature.  
+
==Example 10: Triangle ==
−
<pre>
+
Draw triangle .  
 +
<syntaxhighlight lang="javascript">
  
 
RENDER(
 
RENDER(
−
  [
+
[
−
      ["type","x","y",      "width","height","fill",            "count","shape","id","href","sides","size","cx","cy","r","stroke","stroke-width","points","transform"],
+
["type","coordinates", "fill","stroke","stroke-width"],
−
      ["rect",10,(i)=>i*90,  400,  90,    ["orange","white","green"]  ,3,,,,,,],
+
−
      ["circle",,,,,      ,1,,,,,,200,135,40,"blue",5,],
+
["path","M 100 100 L 300 100 L 200 300 z","Blue","red",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})) ],
+
−
  ]
+
]
−
);
+
)
 
""
 
""
−
</pre>
 
  
−
[[File:Render_Indian_Flag.png]]
+
 
 +
</syntaxhighlight>
 +
[[File:Triangle_render.PNG]]
  
 
=Additional Examples WIP=
 
=Additional Examples WIP=

Latest revision as of 02:54, 4 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: smileys

Draw whatsApp Smileys. 

RENDER
(
[
	["type","cx","cy","rx","ry","coordinates","fill","stroke","stroke-width"],
    
   ["ellipse",60,43,40,40,,"yellow","black",5],
	 ["ellipse",40,35,5,5,,"black","black",5],
	["ellipse",80,35,5,5,,"black","black",5],
	
	
	
	["path",,,,, "M 30 50 C 40 60, 60 80, 90 50","transparent","black",5],


]
);
""
----------------------------------------

RENDER
(
[
	["type","cx","cy","rx","ry","coordinates","fill","stroke","stroke-width"],
    
   ["ellipse",60,43,40,40,,"yellow","black",5],
	["ellipse",43,35,7,7,,"white","white",5],
	 ["ellipse",43,35,4,4,,"black","black",5],
	["ellipse",75,35,7,7,,"white","white",5],
	["ellipse",75,35,4,4,,"black","black",5],
	
	

]
);
""

------------------------------------
RENDER
(
[
	["type","cx","cy","rx","ry","coordinates","fill","stroke","stroke-width"],
    
   ["ellipse",60,43,40,40,,"yellow","black",5],
	 ["ellipse",43,35,4,4,,"black","black",5],
	["ellipse",75,35,4,4,,"black","black",5],
	["line",,,,,[40,60,80,60],"black","black",5]
	

]
);
""
------------------------------
RENDER(
[
	["type","cx","cy","rx","ry","coordinates","fill","stroke","stroke-width"],
    
   ["ellipse",60,43,40,40,,"yellow","black",5],
	 ["ellipse",40,35,5,5,,"black","black",5],
	["ellipse",80,35,5,5,,"black","black",5],		
	["path",,,,, "M 30 50 C 40 60, 60 80, 90 50","transparent","black",5],
	["path",,,,, "M 30 50 C 40 70, 65 90, 90 50","transparent","black",5],
]
);
""
-------------------------------
RENDER
(
[
	["type","cx","cy","rx","ry","coordinates","fill","stroke","stroke-width"],
    
   ["ellipse",60,45,40,40,,"yellow","black",5],
	 ["ellipse",40,35,5,5,,"black","black",5],
	["ellipse",80,35,5,5,,"black","black",5],
	
	
	["path",,,,, "M 40 65 C 50 50, 60 40, 80 65","transparent","black",5],


]
);
""

Smileys.PNG

Example 2: Controlled by Event

Draw shapes controlled by button click event. 

RENDER(
[
  ["type","size","id","value","trigger","goto","x","y","coordinates"],
	["input:button",100,"d1","Circle","click",":cir",40,30,[20,20]],
	["input:button",100,"d2","Rectangle","click",":rect",40,50],
	["input:button",100,"d3","Triangle","click",":tri",40,70],
	["input:button",300,"d3","Line","click",":line",40,70],
    ["."],
	[":cir"],
  	["type","cx","cy","r","stroke","stroke-width","fill"],
	["circle",350,200,50,"green",5,"red"],
	["."],
	[":rect"],
	["type","x","y","width","height","fill","stroke"],
	["rect",100,250,150,250,"blue","red"],
	["."],
	[":tri"],
	["type","points","stroke","stroke-width","fill"],
	["polygon",[150,100 200,200 100,200],"red",5,["green","blue","lime"]],
	["."],
	[":line"],
	["type","x1","y1","x2","y2","stroke","stroke-width"],
	["line",30,40,100,100,"blue",5]

  
]
)
""

Buttonevent.PNG

Example 3: Ellipse

Generating Ellipse in Horizontal view using RENDER feature. 

RENDER(
[
	["type","cx","cy", "rx", "ry","fill","stroke","stroke-dasharray"],
	
	["ellipse",240,100,220,30,"purple"],
	["ellipse",220,70,190,20,"lime"],
	["ellipse",210,45,170,15,"yellow"],
	
	]
	);
""

Ellipsein.PNG

Example 4: Polyline

Draw a polyline. 

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

Polyline.PNG

Example 5: Triangle using path

Draw a triangle using path. 

RENDER(
[
	["type","coordinates", "fill","stroke","stroke-width"],
	
	["path","M150 0 L75 200 L225 200 Z","lime","red",5],
	
	
	]
	);
""

Trianglebypath.PNG

Example 6: Dashed Lines

Draw Lines using path. 

RENDER(
[
	["type","coordinates", "fill","stroke","stroke-dasharray","stroke-width"],
	
	["path","M5 20 l215 0","","black","5,5",5],
	["path","M5 40 l215 0","","black","10,10",5],
	["path","M5 60 l215 0","","black","20,10,5,5,5,10",5],
	
	
	]
	)
""

Dashed lines.PNG

Example 7: Sound waves

Draw Sound waves using path. 

RENDER(
[
	["type","coordinates", "fill","stroke","stroke-width"],
	
	["path","M100,200 C100,100 250,100 250,200 S400,300 400,200","","red",5],
	
	
	]
	);
""

------------------------
RENDER(
[
	["type","coordinates", "fill","stroke","stroke-width"],
	
	["path","M100,200 C100,100 250,100 250,200 S400,300 400,200","Blue","red",5],
	
	
	]
	);
""

Wave1.PNG

Example 8: Shapes by path

Draw shapes using path. 

RENDER(
[
	["type","coordinates", "fill","stroke","stroke-width"],
	
	["path","M20,20 L80,20 L20,50 L80,50 L20,80 L80,80","white","green",3],
	["path","M120,50 S120,-20 140,50 S170,80 180,40","white","green",3],
	
	
	
	
	]
	)
""

Shapes.PNG

Example 9:Shapes

Draw shapes using path. 

RENDER(
[
	["type","coordinates", "fill","stroke","stroke-width"],
	
	["path","M50,100 L200,30 L350,200 L500,350 L700,300","Blue","red",5],
	
	
	]
	);
""

Shape1.PNG

Example 10: Triangle

Draw triangle . 

RENDER(
[
	["type","coordinates", "fill","stroke","stroke-width"],
	
	["path","M 100 100 L 300 100 L 200 300 z","Blue","red",5],
	
	
	]
	)
""

Triangle render.PNG

Additional Examples WIP

Various RENDER Examples

<< Z3 home

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