<!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>Language Reference (API) \ Processing 3+</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="<!-- webcontentpath -->javascript/modernizr-2.6.2.touch.js" type="text/javascript"></script>
		<link href="<!-- webcontentpath -->css/style.css" rel="stylesheet" type="text/css" />


	</head>
	<body id="language" 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>
					<li><a href="http://pi.processing.org/">Processing for Pi</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="http://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>  
			<!--<div id="ribbon-announce">
				<ul class="center">
					<li><a href="https://donorbox.org/supportp52020" target="_blank">This season, we need your help. Click here to donate to #SupportP5!</a></li>
				</ul>
				<div class="clear"></div>
			</div>-->
			<div id="navigation">
				<!-- navigation -->
			</div>

		
			<a id="TOP" name="TOP"></a>
			
			<!-- ==================================== CONTENT - Headers ============================ -->
			<div class="content">
			
			 <h1 class="large-header"><span class="black">Reference.</span> Processing was designed to be a flexible software sketchbook.</h1>

			<!-- <script src="<!- - webcontentpath - - >javascript/mode-select.js" type="text/javascript"></script>
			<div class="ref-top">
				<div id="ref-mode-text" style="display: none">
					Processing code can be run in <a href="<!- - webcontentpath - - >environment/index.html#Programming_modes">different modes</a>. This reference unites the standard and Javascript flavours. Use the links to the left to highlight any differences.
				</div>
				<div id="ref-mode-switch"> 
					<ul><li><a href="#" mode="java">Standard Processing</a></li>
						<li><a href="#" mode="js">JavaScript (Processing.js)</a></li>
					</ul>
				</div>
				<div id="ref-mode-switch-bottom"></div>
			</div> -->
			
<div class="ref-col">
	
<div class="category">
<b>Structure</b>

<br /><br />
	<!-- structure -->

</div>
<div class="category">
<b>Environment</b>
<br /><br />
		<!-- environment -->

</div>
<div class="category">
<b>Data</b>
	<h5>Primitive</h5>
		<!-- data:primitive -->
	<h5>Composite</h5>
		<!-- data:composite -->
	<h5>Conversion</h5>
		<!-- data:conversion -->
	<h5>String Functions</h5>
		<!-- data:string_functions -->

	<h5>Array Functions</h5>
		<!-- data:array_functions -->

</div>
<div class="category">
<b>Control</b>

	<h5>Relational Operators</h5>
		<!-- control:relational_operators -->
	<h5>Iteration</h5>
		<!-- control:iteration -->
	<h5>Conditionals</h5>
		<!-- control:conditionals -->
	<h5>Logical Operators</h5>
		<!-- control:logical_operators -->

</div>
</div><div class="ref-col">

<div class="category">
<b>Shape</b>
<br /><br />
	<!-- shape -->
	<h5>2D Primitives</h5>
		<!-- shape:2d_primitives -->
	<h5>Curves</h5>

		<!-- shape:curves -->
		
	<h5>3D Primitives</h5>
		<!-- shape:3d_primitives -->
	<h5>Attributes</h5>
		<!-- shape:attributes -->
	<h5>Vertex</h5>
		<!-- shape:vertex -->
	<h5>Loading &amp; Displaying</h5>
		<!-- shape:loading_displaying -->
</div>
<div class="category">
<b>Input</b>
	<h5>Mouse</h5>

		<!-- input:mouse -->
	<h5>Keyboard</h5>

		<!-- input:keyboard -->

	<h5>Files</h5>
		<!-- input:files -->
	<!--<h5>Web</h5>-->
		<!-- input:web -->

	<h5>Time &amp; Date</h5>
		<!-- input:time_date -->

</div>
<div class="category">
<b>Output</b>
	<h5>Text Area</h5>
		<!-- output:text_area -->
	<h5>Image</h5>
		<!-- output:image -->
	<h5>Files</h5>
		<!-- output:files -->

</div>

<div class="category">
<b>Transform</b>
<br /><br />
	<!-- transform -->

</div>
<div class="category">
<b>Lights, Camera</b>
	<!-- lights_camera -->
	<h5>Lights</h5>
		<!-- lights_camera:lights -->

	<h5>Camera</h5>
		<!-- lights_camera:camera -->
	<h5>Coordinates</h5>
		<!-- lights_camera:coordinates -->
	<h5>Material Properties</h5>
		<!-- lights_camera:material_properties -->

</div>
</div><div class="ref-col">

<div class="category">
<b>Color</b>
	<!-- color -->
	<h5>Setting</h5>

		<!-- color:setting -->

	<h5>Creating &amp; Reading</h5>
		<!-- color:creating_reading -->

</div>

<div class="category">
<b>Image</b>
<br /><br />		
		<!-- image -->
	<h5>Loading &amp; Displaying</h5>
		<!-- image:loading_displaying -->
	<h5>Textures</h5>
		<!-- image:textures -->
	<h5>Pixels</h5>
		<!-- image:pixels -->

</div>
<div class="category">
<b>Rendering</b>
	<br /><br />		
	<!-- rendering -->
	<h5>Shaders</h5>
		<!-- rendering:shaders -->

</div>
<div class="category">
<b>Typography</b>
	<br/><br/>
	<!-- typography -->
	<h5>Loading &amp; Displaying</h5>
		<!-- typography:loading_displaying -->
	<h5>Attributes</h5>
		<!-- typography:attributes -->
	<h5>Metrics</h5>
		<!-- typography:metrics -->

</div>

<div class="category">
<b>Math</b>
	<br/><br/>
	<!-- math -->
	<h5>Operators</h5>
		
		<!-- math:operators -->
		
	<h5>Bitwise Operators</h5>
		
		<!-- math:bitwise_operators -->
		
	<h5>Calculation</h5>
		
		<!-- math:calculation -->
		
	<h5>Trigonometry</h5>
		
		<!-- math:trigonometry -->
		
	<h5>Random</h5>

		<!-- math:random -->

</div>

<div class="category">
<b>Constants</b>
<br /><br />
	<!-- constants -->

</div></div>

			
			</div>

			<!-- ==================================== FOOTER ============================ --> 
  			<div id="footer">
    			<div id="copyright">Processing was initiated 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="<!-- webcontentpath -->people/">small team of volunteers</a>.</div> 
    			<div id="colophon">

                    <a href="<!-- webcontentpath -->copyright.html">&copy; Info</a>

                </div>
  			</div>
  			
		</div>
		<!-- jquery -->
		<script src="<!-- webcontentpath -->javascript/site.js" type="text/javascript"></script>

		<script type="text/javascript">

		  var _gaq = _gaq || [];
		  _gaq.push(['_setAccount', 'UA-40016511-1']);
		  _gaq.push(['_setDomainName', 'processing.org']);
		  _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>
	</body>

</html>
