356 lines
10 KiB
HTML
356 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
|
<title>beginShape() | reference | Processing.js</title>
|
|
<link rel="stylesheet" href="../../css/bootstrap.css" type="text/css" />
|
|
<link rel="stylesheet" href="../../css/syntax.css" type="text/css" />
|
|
<link rel="stylesheet" href="../../css/processing-js.css" type="text/css" />
|
|
<script src="../../js/processing.min.js" type="text/javascript"></script>
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
|
|
<script src="../../js/jquery.tweet.min.js" type="text/javascript"></script>
|
|
<script src="../../js/tabselector.js" type="text/javascript"></script>
|
|
<script src="http://cdn.webglstats.com/stat.js" defer="defer" async="async"></script>
|
|
<script type="text/javascript">
|
|
// Only do tracking on the actual site
|
|
if (document.location.host === "processingjs.org") {
|
|
var _gaq = _gaq || [];
|
|
_gaq.push(['_setAccount', 'UA-8565070-1']);
|
|
_gaq.push(['_trackPageview']);
|
|
(function() {
|
|
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|
}());
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<a href="http://processingjs.org/"><img src="../../images/header.png" width="177" height="42"></a>
|
|
</div>
|
|
<span class="tagline">a port of the Processing Visualization Language</span>
|
|
|
|
<div class="navbar">
|
|
<canvas width="940px" height="78px" data-processing-sources="/sketches/bannerSketch.pde"></canvas>
|
|
<ul>
|
|
<li><a href="http://processingjs.org/"><span>home</span></a></li>
|
|
<li><a href="http://processingjs.org/download/"><span>download</span></a></li>
|
|
<li><a href="../index.html"><span>reference</span></a></li>
|
|
<li><a href="http://processingjs.org/exhibition/"><span>exhibition</span></a></li>
|
|
<li><a href="http://processingjs.org/learning/"><span>learning</span></a></li>
|
|
<li><a href="http://processingjs.org/articles/"><span>articles</span></a></li>
|
|
<li><a href="http://processingjs.org/community/"><span>community</span></a></li>
|
|
<li><a href="http://processingjs.org/blog/"><span>blog</span></a></li>
|
|
</ul>
|
|
<a class="viewsource" href="http://processingjs.org/sketches/bannerSketch.pde">view source</a>
|
|
</div>
|
|
|
|
<div class="page row">
|
|
<div class="span11">
|
|
<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="">
|
|
|
|
<th scope="row">Examples</th>
|
|
|
|
<td><div class="example"><img src="../beginShape_0.gif" alt="example pic" /><pre class="margin">beginShape();
|
|
|
|
vertex(30, 20);
|
|
|
|
vertex(85, 20);
|
|
|
|
vertex(85, 75);
|
|
|
|
vertex(30, 75);
|
|
|
|
endShape();</pre></div><div class="example"><img src="../beginShape_.gif" 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="../beginShape_2.gif" 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="../beginShape_3.gif" 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="../beginShape_4.gif" 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="../beginShape_5.gif" 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="../beginShape_6.gif" 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="../beginShape_65.gif" 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="../beginShape_7.gif" 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="../beginShape_8.gif" 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="../beginShape_9.gif" 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>MODE</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. 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>.</td>
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr class="">
|
|
|
|
<th scope="row">Syntax</th>
|
|
|
|
<td><pre>beginShape(<kbd>MODE</kbd>)</pre></td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr class="">
|
|
|
|
|
|
|
|
<th scope="row">Parameters</th>
|
|
|
|
<td><table cellpadding="0" cellspacing="0" border="0">
|
|
|
|
<tr class="">
|
|
|
|
<th scope="row">MODE</th>
|
|
|
|
<td>Either POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP</td>
|
|
|
|
</tr>
|
|
|
|
</table></td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr class="">
|
|
|
|
<th scope="row">Usage</th>
|
|
|
|
<td>Web & Application</td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr class="">
|
|
|
|
<th scope="row">Related</th>
|
|
|
|
|
|
|
|
<td>
|
|
|
|
<a href="../endShape_.1">endShape()</a><br />
|
|
|
|
<a href="../vertex_.1">vertex()</a><br />
|
|
|
|
<a href="../curveVertex_.1">curveVertex()</a><br />
|
|
|
|
<a href="../bezierVertex_.1">bezierVertex()</a><br /></td>
|
|
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
|
|
<div class="cclicense">
|
|
<p>This reference is licensed under the CC BY-NC-SA 2.0 license:</p>
|
|
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.0/">
|
|
<img alt="Creative Commons License" border="0" src="../../images/somerights20.gif" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="sidebar span4">
|
|
<h3><a href="http://processingjs.org/download/">Downloads</a></h3>
|
|
<ul>
|
|
<li><a href="http://processingjs.org/download/">Download the latest version of Processing.js!</a></li>
|
|
</ul>
|
|
|
|
<h3><a href="http://processingjs.org/articles/">Articles</a></h3>
|
|
<ul>
|
|
<li><a href="http://processingjs.org/articles/jsQuickStart.html">Quick Start - JavaScript Developer</a></li>
|
|
<li><a href="http://processingjs.org/articles/p5QuickStart.html">Quick Start - Processing Developer</a></li>
|
|
<li><a href="http://processingjs.org/articles/RenderingModes.html">Rendering Modes</a></li>
|
|
<li><a href="http://processingjs.org/articles/PomaxGuide.html">Pomax's Guide to processing-js</a></li>
|
|
</ul>
|
|
|
|
<h3><a>Web IDEs</a></h3>
|
|
<ul>
|
|
<li><a href="http://sketchpad.cc">Sketchpad.cc</a></li>
|
|
<li><a href="http://processingjs.org/tools/processing-helper.html">Processing.js Helper</a></li>
|
|
<li><a href="http://www.openprocessing.org">OpenProcessing.org</a></li>
|
|
</ul>
|
|
|
|
<h3><a href="http://processingjs.org/community/">Community</a></h3>
|
|
<ul>
|
|
<li><a href="irc://irc.mozilla.org/processing.js">IRC Channel</a></li>
|
|
<li><a href="http://processing-js.lighthouseapp.com/">Bug Tracker</a></li>
|
|
<li><a href="http://github.com/processing-js/processing-js/">Github Repository</a></li>
|
|
<li><a href="http://groups.google.com/group/processingjs">Google Group</a></li>
|
|
<li><a href="http://zenit.senecac.on.ca/wiki/index.php/">Open Source @ Seneca</a></li>
|
|
</ul>
|
|
|
|
<h3><a href="http://twitter.com/processingjs">Twitter Feed</a></h3>
|
|
<div class="twitter"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
Processing is an open visualization language developed by
|
|
<a href="http://benfry.com/">Ben Fry</a> & <a href="http://reas.com/">Casey Reas</a>,
|
|
and originally ported to Javascript by
|
|
<a href="http://ejohn.org/blog/processingjs/">John Resig</a>.
|
|
Processing.js is maintained by the Processing.js team.
|
|
</div>
|
|
</div>
|
|
<a href="http://github.com/processing-js/processing-js/">
|
|
<img style="position: absolute; top: 0; right: 0; border: 0;" src="../../images/forkme-right-orange.png" alt="Fork me on GitHub">
|
|
</a>
|
|
</body>
|
|
</html>
|