Difference between revisions of "Users/Vishnu"

From ZCubes Wiki
Jump to navigation Jump to search
 
(16 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 19: Line 20:
 
["ellipse",40,35,5,5,,"black","black",5],
 
["ellipse",40,35,5,5,,"black","black",5],
 
["ellipse",80,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 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(
 
RENDER(
 
[
 
[
Line 35: Line 75:
 
]
 
]
 
);
 
);
−
“”
+
""
−
 
+
-------------------------------
 
RENDER
 
RENDER
 
(
 
(
Line 53: Line 93:
 
);
 
);
 
""
 
""
 +
 +
 +
  
  
−
</pre>
+
</syntaxhighlight>
  
−
[[File:Smiley1.PNG]]
+
[[File:Smileys.PNG]]
  
−
==Example 2: Ten Circles==
+
==Example 2: Controlled by Event==
  
−
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.
+
Draw shapes controlled by button click event.
  
−
<pre>
+
<syntaxhighlight lang="javascript">
 
RENDER(
 
RENDER(
−
  [
+
[
−
      ["type","size","count"],
+
  ["type","size","id","value","trigger","goto","x","y","coordinates"],
−
      ["circle",(i)=>100+i*10,10]
+
["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]
 +
 
 +
 
 +
]
 
)
 
)
 
""
 
""
−
</pre>
 
  
−
[[File:Render_Ten_Circles.png]]
+
</syntaxhighlight>
 +
 
 +
[[File:Buttonevent.PNG]]
 +
 
 +
==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==
  
−
==Example 3: American Flag==
+
Draw a polyline.
 +
<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","points", "fill","stroke","stroke-width"],
−
      ["rect",10,(i)=>i*20,  400,  20,    (i)=>(i%2)?"white":"red"  ,13,,,,,],
+
−
      ["rect",10,   0,        200,  140,  "blue"                  ,1,,,,,],
+
["polyline","10,40 40,40 40,80 80,80 80,120 120,120 120,160","white","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:Polyline.PNG]]
  
−
Generating Indian Flag using RENDER feature.  
+
==Example 5: Triangle using path==
−
<pre>
+
Draw a triangle using path.  
 +
<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","M150 0 L75 200 L225 200 Z","lime","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})) ],
+
−
  ]
+
]
−
);
+
);
 +
""
 +
 
 +
</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">
 +
 
 +
RENDER(
 +
[
 +
["type","coordinates", "fill","stroke","stroke-width"],
 +
 +
["path","M50,100 L200,30 L350,200 L500,350 L700,300","Blue","red",5],
 +
 +
 +
]
 +
);
 +
""
 +
 
 +
</syntaxhighlight>
 +
[[File:Shape1.PNG]]
 +
 
 +
==Example 10: Triangle ==
 +
Draw triangle .
 +
<syntaxhighlight lang="javascript">
 +
 
 +
RENDER(
 +
[
 +
["type","coordinates", "fill","stroke","stroke-width"],
 +
 +
["path","M 100 100 L 300 100 L 200 300 z","Blue","red",5],
 +
 +
 +
]
 +
)
 
""
 
""
−
</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"