276 lines
11 KiB
HTML
276 lines
11 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
<head>
|
|
<title>beginShape() \ Language (API) \ Processing 2+</title>
|
|
|
|
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<meta name="Author" content="Processing Foundation" />
|
|
<meta name="Publisher" content="Processing Foundation" />
|
|
<meta name="Keywords" content="Processing, Sketchbook, Programming, Coding, Code, Art, Design" />
|
|
<meta name="Description" content="Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology." />
|
|
<meta name="Copyright" content="All contents copyright the Processing Foundation, Ben Fry, Casey Reas, and the MIT Media Laboratory" />
|
|
|
|
<script src="javascript/modernizr-2.6.2.touch.js" type="text/javascript"></script>
|
|
<link href="css/style.css" rel="stylesheet" type="text/css" />
|
|
|
|
</head>
|
|
<body id="Langauge-en" onload="" >
|
|
|
|
<!-- ==================================== PAGE ============================ -->
|
|
<div id="container">
|
|
|
|
|
|
<!-- ==================================== HEADER ============================ -->
|
|
|
|
<div id="ribbon">
|
|
<ul class="left">
|
|
<li class="highlight"><a href="http://processing.org/">Processing</a></li>
|
|
<li><a href="http://p5js.org/">p5.js</a></li>
|
|
<li><a href="http://py.processing.org/">Processing.py</a></li>
|
|
<li><a href="http://android.processing.org/">Processing for Android</a></li>
|
|
</ul>
|
|
<ul class="right">
|
|
<li><a href="https://processingfoundation.org/">Processing Foundation</a></li>
|
|
</ul>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div id="header">
|
|
<a href="/" title="Back to the Processing cover."><div class="processing-logo no-cover" alt="Processing cover"></div></a>
|
|
<form name="search" method="get" action="//www.google.com/search">
|
|
<p><input type="hidden" name="as_sitesearch" value="processing.org" />
|
|
<input type="text" name="as_q" value="" size="20" class="text" />
|
|
<input type="submit" value=" " /></p>
|
|
</form>
|
|
</div>
|
|
<a id="TOP" name="TOP"></a>
|
|
|
|
<div id="navigation">
|
|
<div class="navBar" id="mainnav">
|
|
<a href="index.html" class='active'>Language</a><br>
|
|
<a href="libraries/index.html" >Libraries</a><br>
|
|
<a href="tools/index.html">Tools</a><br>
|
|
<a href="environment/index.html">Environment</a><br>
|
|
</div>
|
|
|
|
<script> document.querySelectorAll(".processing-logo")[0].className = "processing-logo"; </script>
|
|
</div>
|
|
|
|
<!-- ==================================== CONTENT - Headers ============================ -->
|
|
<div class="content">
|
|
|
|
<p class="ref-notice">This reference is for Processing 3.0+. If you have a previous version, use the reference included with your software in the Help menu. If you see any errors or have suggestions, <a href="https://github.com/processing/processing-docs/issues?state=open">please let us know</a>. If you prefer a more technical reference, visit the <a href="http://processing.github.io/processing-javadocs/core/">Processing Core Javadoc</a> and <a href="http://processing.github.io/processing-javadocs/libraries/">Libraries Javadoc</a>.</p>
|
|
|
|
<table cellpadding="0" cellspacing="0" border="0" class="ref-item">
|
|
|
|
|
|
<tr class="name-row">
|
|
<th scope="row">Name</th>
|
|
|
|
<td><h3>beginShape()</h3></td>
|
|
</tr>
|
|
|
|
<tr class="">
|
|
|
|
<tr class=""><th scope="row">Examples</th><td><div class="example"><img src="images/beginShape_0.png" alt="example pic" /><pre class="margin">
|
|
beginShape();
|
|
vertex(30, 20);
|
|
vertex(85, 20);
|
|
vertex(85, 75);
|
|
vertex(30, 75);
|
|
endShape(CLOSE);
|
|
</pre></div>
|
|
|
|
<div class="example"><img src="images/beginShape_1.png" alt="example pic" /><pre class="margin">
|
|
beginShape(POINTS);
|
|
vertex(30, 20);
|
|
vertex(85, 20);
|
|
vertex(85, 75);
|
|
vertex(30, 75);
|
|
endShape();
|
|
</pre></div>
|
|
|
|
<div class="example"><img src="images/beginShape_2.png" alt="example pic" /><pre class="margin">
|
|
beginShape(LINES);
|
|
vertex(30, 20);
|
|
vertex(85, 20);
|
|
vertex(85, 75);
|
|
vertex(30, 75);
|
|
endShape();
|
|
</pre></div>
|
|
|
|
<div class="example"><img src="images/beginShape_3.png" alt="example pic" /><pre class="margin">
|
|
noFill();
|
|
beginShape();
|
|
vertex(30, 20);
|
|
vertex(85, 20);
|
|
vertex(85, 75);
|
|
vertex(30, 75);
|
|
endShape();
|
|
</pre></div>
|
|
|
|
<div class="example"><img src="images/beginShape_4.png" alt="example pic" /><pre class="margin">
|
|
noFill();
|
|
beginShape();
|
|
vertex(30, 20);
|
|
vertex(85, 20);
|
|
vertex(85, 75);
|
|
vertex(30, 75);
|
|
endShape(CLOSE);
|
|
</pre></div>
|
|
|
|
<div class="example"><img src="images/beginShape_5.png" alt="example pic" /><pre class="margin">
|
|
beginShape(TRIANGLES);
|
|
vertex(30, 75);
|
|
vertex(40, 20);
|
|
vertex(50, 75);
|
|
vertex(60, 20);
|
|
vertex(70, 75);
|
|
vertex(80, 20);
|
|
endShape();
|
|
</pre></div>
|
|
|
|
<div class="example"><img src="images/beginShape_6.png" alt="example pic" /><pre class="margin">
|
|
beginShape(TRIANGLE_STRIP);
|
|
vertex(30, 75);
|
|
vertex(40, 20);
|
|
vertex(50, 75);
|
|
vertex(60, 20);
|
|
vertex(70, 75);
|
|
vertex(80, 20);
|
|
vertex(90, 75);
|
|
endShape();
|
|
</pre></div>
|
|
|
|
<div class="example"><img src="images/beginShape_7.png" alt="example pic" /><pre class="margin">
|
|
beginShape(TRIANGLE_FAN);
|
|
vertex(57.5, 50);
|
|
vertex(57.5, 15);
|
|
vertex(92, 50);
|
|
vertex(57.5, 85);
|
|
vertex(22, 50);
|
|
vertex(57.5, 15);
|
|
endShape();
|
|
</pre></div>
|
|
|
|
<div class="example"><img src="images/beginShape_8.png" alt="example pic" /><pre class="margin">
|
|
beginShape(QUADS);
|
|
vertex(30, 20);
|
|
vertex(30, 75);
|
|
vertex(50, 75);
|
|
vertex(50, 20);
|
|
vertex(65, 20);
|
|
vertex(65, 75);
|
|
vertex(85, 75);
|
|
vertex(85, 20);
|
|
endShape();
|
|
</pre></div>
|
|
|
|
<div class="example"><img src="images/beginShape_9.png" alt="example pic" /><pre class="margin">
|
|
beginShape(QUAD_STRIP);
|
|
vertex(30, 20);
|
|
vertex(30, 75);
|
|
vertex(50, 20);
|
|
vertex(50, 75);
|
|
vertex(65, 20);
|
|
vertex(65, 75);
|
|
vertex(85, 20);
|
|
vertex(85, 75);
|
|
endShape();
|
|
</pre></div>
|
|
|
|
<div class="example"><img src="images/beginShape_10.png" alt="example pic" /><pre class="margin">
|
|
beginShape();
|
|
vertex(20, 20);
|
|
vertex(40, 20);
|
|
vertex(40, 40);
|
|
vertex(60, 40);
|
|
vertex(60, 60);
|
|
vertex(20, 60);
|
|
endShape(CLOSE);
|
|
</pre></div>
|
|
</td></tr>
|
|
|
|
<tr class="">
|
|
<th scope="row">Description</th>
|
|
<td>
|
|
Using the <b>beginShape()</b> and <b>endShape()</b> functions allow creating more complex forms. <b>beginShape()</b> begins recording vertices for a shape and <b>endShape()</b> stops recording. The value of the <b>kind</b> parameter tells it which types of shapes to create from the provided vertices. With no mode specified, the shape can be any irregular polygon. The parameters available for beginShape() are POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, and QUAD_STRIP. After calling the <b>beginShape()</b> function, a series of <b>vertex()</b> commands must follow. To stop drawing the shape, call <b>endShape()</b>. The <b>vertex()</b> function with two parameters specifies a position in 2D and the <b>vertex()</b> function with three parameters specifies a position in 3D. Each shape will be outlined with the current stroke color and filled with the fill color.
|
|
<br /><br />
|
|
Transformations such as <b>translate()</b>, <b>rotate()</b>, and <b>scale()</b> do not work within <b>beginShape()</b>. It is also not possible to use other shapes, such as <b>ellipse()</b> or <b>rect()</b> within <b>beginShape()</b>.
|
|
<br /><br />
|
|
The P2D and P3D renderers allow <b>stroke()</b> and <b>fill()</b> to be altered on a per-vertex basis, but the default renderer does not. Settings such as <b>strokeWeight()</b>, <b>strokeCap()</b>, and <b>strokeJoin()</b> cannot be changed while inside a <b>beginShape()</b>/<b>endShape()</b> block with any renderer.
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class=""><th scope="row">Syntax</th><td><pre>beginShape()
|
|
beginShape(<kbd>kind</kbd>)</pre></td></tr>
|
|
|
|
<tr class=""> <th scope="row">Parameters</th><td><table cellpadding="0" cellspacing="0" border="0"><tr class="">
|
|
<th scope="row" class="code">kind</th>
|
|
<td>int: Either POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, or QUAD_STRIP</td>
|
|
</tr></table></td> </tr>
|
|
<tr class=""><th scope="row">Returns</th><td class="code">void</td></tr>
|
|
<tr class=""><th scope="row">Related</th><td><a class="code" href="PShape.html">PShape</a><br />
|
|
<a class="code" href="endShape_.html">endShape()</a><br />
|
|
<a class="code" href="vertex_.html">vertex()</a><br />
|
|
<a class="code" href="curveVertex_.html">curveVertex()</a><br />
|
|
<a class="code" href="bezierVertex_.html">bezierVertex()</a><br /></td></tr>
|
|
</table>
|
|
|
|
Updated on April 30, 2017 02:33:17pm EDT<br /><br />
|
|
|
|
<!-- Creative Commons License -->
|
|
|
|
<div class="license">
|
|
<a rel="license" href="//creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border: none" src="https://licensebuttons.net/l/by-nc-sa/4.0/88x31.png" /></a>
|
|
</div>
|
|
<!--
|
|
|
|
<?xpacket begin='' id=''?>
|
|
<x:xmpmeta xmlns:x='adobe:ns:meta/'>
|
|
<rdf:RDF xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#'>
|
|
<rdf:Description rdf:about=''
|
|
xmlns:xapRights='http://ns.adobe.com/xap/1.0/rights/'>
|
|
<xapRights:Marked>True</xapRights:Marked>
|
|
</rdf:Description>
|
|
<rdf:Description rdf:about=''
|
|
xmlns:xapRights='http://ns.adobe.com/xap/1.0/rights/'
|
|
>
|
|
<xapRights:UsageTerms>
|
|
<rdf:Alt>
|
|
<rdf:li xml:lang='x-default' >This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.</rdf:li>
|
|
<rdf:li xml:lang='en' >This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.</rdf:li>
|
|
</rdf:Alt>
|
|
</xapRights:UsageTerms>
|
|
</rdf:Description>
|
|
<rdf:Description rdf:about=''
|
|
xmlns:cc='http://creativecommons.org/ns#'>
|
|
<cc:license rdf:resource='http://creativecommons.org/licenses/by-nc-sa/4.0/'/>
|
|
</rdf:Description>
|
|
|
|
</rdf:RDF>
|
|
</x:xmpmeta>
|
|
<?xpacket end='r'?>
|
|
|
|
-->
|
|
|
|
</div>
|
|
|
|
<!-- ==================================== FOOTER ============================ -->
|
|
<div id="footer">
|
|
|
|
<div id="copyright">Processing is an open project intiated by <a href="http://benfry.com/">Ben Fry</a> and <a href="http://reas.com">Casey Reas</a>. It is developed by a <a href="http://processing.org/about/people/">team of volunteers</a>.</div>
|
|
<div id="colophon">
|
|
|
|
<a href="copyright.html">© Info</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<script src="javascript/jquery-1.9.1.min.js"></script>
|
|
<script src="javascript/site.js" type="text/javascript"></script>
|
|
</body>
|
|
</html>
|