q5.js
Version:
[q5 fork] p5.js small & fast alternative (experimental) implementation.
239 lines (234 loc) • 39.6 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>q5.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=no" />
<meta name="author" content="@LingDong- / @alterebro" />
<meta name="description" content="A small and fast alternative implementation of p5.js" />
<link rel="stylesheet" href="./css/docs.css" />
</head>
<body>
<header>
<h1>q5<sub>＊</sub>js</h1>
<p>A small and fast alternative implementation of <strong><a href="https://p5js.org/">p5.js</a></strong>.</p>
<p>
<a href="./js/q5.min.js">[Download (33KB minified)]</a> |
<a href="https://mark-this-down.glitch.me/?https://raw.githubusercontent.com/alterebro/q5.js/master/README.md">README</a> |
<a href="https://github.com/alterebro/q5.js/">Source Code</a></p>
</header>
<nav><select onchange="openEg(this.value)">
<option value="">Select...</option>
<option value="alpha">alpha</option>
<option value="blue">blue</option>
<option value="brightness">brightness</option>
<option value="color__0">color I</option>
<option value="color__1">color II</option>
<option value="color__2">color III</option>
<option value="green">green</option>
<option value="hue">hue</option>
<option value="lerpColor">lerpColor</option>
<option value="red">red</option>
<option value="saturation">saturation</option>
<option value="Color_setRed">Color/setRed</option>
<option value="Color_setGreen">Color/setGreen</option>
<option value="Color_setBlue">Color/setBlue</option>
<option value="Color_setAlpha">Color/setAlpha</option>
<option value="background">background</option>
<option value="clear">clear</option>
<option value="colorMode__0">colorMode I</option>
<option value="colorMode__1">colorMode II</option>
<option value="fill">fill</option>
<option value="noFill">noFill</option>
<option value="noStroke">noStroke</option>
<option value="stroke__0">stroke I</option>
<option value="stroke__1">stroke II</option>
<option value="arc__0">arc I</option>
<option value="arc__1">arc II</option>
<option value="arc__2">arc III</option>
<option value="ellipse">ellipse</option>
<option value="circle">circle</option>
<option value="line__0">line I</option>
<option value="line__1">line II</option>
<option value="point__0">point I</option>
<option value="point__1">point II</option>
<option value="point__2">point III</option>
<option value="quad">quad</option>
<option value="rect__0">rect I</option>
<option value="rect__1">rect II</option>
<option value="rect__2">rect III</option>
<option value="square__0">square I</option>
<option value="square__1">square II</option>
<option value="square__2">square III</option>
<option value="triangle">triangle</option>
<option value="ellipseMode__0">ellipseMode I</option>
<option value="ellipseMode__1">ellipseMode II</option>
<option value="rectMode__0">rectMode I</option>
<option value="rectMode__1">rectMode II</option>
<option value="strokeCap">strokeCap</option>
<option value="strokeJoin__0">strokeJoin I</option>
<option value="strokeJoin__1">strokeJoin II</option>
<option value="strokeJoin__2">strokeJoin III</option>
<option value="strokeWeight">strokeWeight</option>
<option value="bezier">bezier</option>
<option value="bezierPoint">bezierPoint</option>
<option value="bezierTangent__0">bezierTangent I</option>
<option value="bezierTangent__1">bezierTangent II</option>
<option value="curve__0">curve I</option>
<option value="curve__1">curve II</option>
<option value="curve__2">curve III</option>
<option value="curveTightness">curveTightness</option>
<option value="curvePoint">curvePoint</option>
<option value="curveTangent">curveTangent</option>
<option value="beginContour">beginContour</option>
<option value="beginShape">beginShape</option>
<option value="bezierVertex__0">bezierVertex I</option>
<option value="bezierVertex__1">bezierVertex II</option>
<option value="curveVertex">curveVertex</option>
<option value="endShape">endShape</option>
<option value="quadraticVertex__0">quadraticVertex I</option>
<option value="quadraticVertex__1">quadraticVertex II</option>
<option value="vertex">vertex</option>
<option value="cursor">cursor</option>
<option value="noCursor">noCursor</option>
<option value="preload">preload</option>
<option value="setup">setup</option>
<option value="draw">draw</option>
<option value="noLoop__0">noLoop I</option>
<option value="noLoop__1">noLoop II</option>
<option value="loop">loop</option>
<option value="push__0">push I</option>
<option value="push__1">push II</option>
<option value="redraw">redraw</option>
<option value="createCanvas">createCanvas</option>
<option value="createGraphics">createGraphics</option>
<option value="blendMode__0">blendMode I</option>
<option value="blendMode__1">blendMode II</option>
<option value="drawingContext">drawingContext</option>
<option value="applyMatrix__0">applyMatrix I</option>
<option value="applyMatrix__1">applyMatrix II</option>
<option value="applyMatrix__2">applyMatrix III</option>
<option value="applyMatrix__3">applyMatrix IV</option>
<option value="resetMatrix">resetMatrix</option>
<option value="rotate">rotate</option>
<option value="scale">scale</option>
<option value="shearX">shearX</option>
<option value="shearY">shearY</option>
<option value="translate__0">translate I</option>
<option value="translate__1">translate II</option>
<option value="translate__2">translate III</option>
<option value="keyIsPressed">keyIsPressed</option>
<option value="key">key</option>
<option value="keyCode__0">keyCode I</option>
<option value="keyCode__1">keyCode II</option>
<option value="keyPressed__0">keyPressed I</option>
<option value="keyPressed__1">keyPressed II</option>
<option value="keyReleased">keyReleased</option>
<option value="keyIsDown__0">keyIsDown I</option>
<option value="keyIsDown__1">keyIsDown II</option>
<option value="mouseX">mouseX</option>
<option value="mouseY">mouseY</option>
<option value="pmouseX">pmouseX</option>
<option value="pmouseY">pmouseY</option>
<option value="mouseButton">mouseButton</option>
<option value="mouseIsPressed">mouseIsPressed</option>
<option value="mouseMoved">mouseMoved</option>
<option value="mouseDragged">mouseDragged</option>
<option value="mousePressed">mousePressed</option>
<option value="mouseReleased">mouseReleased</option>
<option value="mouseClicked">mouseClicked</option>
<option value="touches">touches</option>
<option value="touchStarted">touchStarted</option>
<option value="touchMoved">touchMoved</option>
<option value="touchEnded">touchEnded</option>
<option value="createImage__0">createImage I</option>
<option value="createImage__1">createImage II</option>
<option value="createImage__2">createImage III</option>
<option value="Image">Image</option>
<option value="Image_loadPixels">Image/loadPixels</option>
<option value="Image_get">Image/get</option>
<option value="Image_resize">Image/resize</option>
<option value="Image_mask">Image/mask</option>
<option value="Image_filter">Image/filter</option>
<option value="Image_save">Image/save</option>
<option value="pixels">pixels</option>
<option value="filter__0">filter I</option>
<option value="filter__1">filter II</option>
<option value="filter__2">filter III</option>
<option value="filter__3">filter IV</option>
<option value="filter__4">filter V</option>
<option value="filter__5">filter VI</option>
<option value="filter__6">filter VII</option>
<option value="filter__7">filter VIII</option>
<option value="filter__8">filter IX</option>
<option value="get__0">get I</option>
<option value="get__1">get II</option>
<option value="loadPixels">loadPixels</option>
<option value="set__0">set I</option>
<option value="set__1">set II</option>
<option value="set__2">set III</option>
<option value="createVector">createVector</option>
<option value="Vector">Vector</option>
<option value="Vector_toString">Vector/toString</option>
<option value="Vector_set">Vector/set</option>
<option value="Vector_add">Vector/add</option>
<option value="Vector_sub">Vector/sub</option>
<option value="Vector_mult">Vector/mult</option>
<option value="Vector_div">Vector/div</option>
<option value="Vector_mag">Vector/mag</option>
<option value="Vector_magSq">Vector/magSq</option>
<option value="Vector_dist">Vector/dist</option>
<option value="Vector_normalize">Vector/normalize</option>
<option value="Vector_limit">Vector/limit</option>
<option value="Vector_setMag">Vector/setMag</option>
<option value="Vector_heading">Vector/heading</option>
<option value="Vector_rotate">Vector/rotate</option>
<option value="Vector_angleBetween">Vector/angleBetween</option>
<option value="Vector_lerp">Vector/lerp</option>
<option value="Vector_reflect">Vector/reflect</option>
<option value="Vector_fromAngle">Vector/fromAngle</option>
<option value="Vector_random2D">Vector/random2D</option>
<option value="textAlign__0">textAlign I</option>
<option value="textAlign__1">textAlign II</option>
<option value="textLeading">textLeading</option>
<option value="textSize">textSize</option>
<option value="textStyle">textStyle</option>
<option value="textWidth">textWidth</option>
<option value="textAscent">textAscent</option>
<option value="textDescent">textDescent</option>
<option value="randomSeed">randomSeed</option>
<option value="random__0">random I</option>
<option value="random__1">random II</option>
<option value="random__2">random III</option>
<option value="randomGaussian__0">randomGaussian I</option>
<option value="randomGaussian__1">randomGaussian II</option>
<option value="noise__0">noise I</option>
<option value="noise__1">noise II</option>
<option value="noiseDetail">noiseDetail</option>
<option value="noiseSeed">noiseSeed</option>
</select> <input list="reference-list" id="reference-item" name="reference-item" placeholder="Search" onchange="selection(this)" />
<datalist id="reference-list">
<option value="Alpha" data-id="alpha" data-guid="0"></option><option value="Blue" data-id="blue" data-guid="1"></option><option value="Brightness" data-id="brightness" data-guid="2"></option><option value="Color I" data-id="color__0" data-guid="3"></option><option value="Color II" data-id="color__1" data-guid="4"></option><option value="Color III" data-id="color__2" data-guid="5"></option><option value="Green" data-id="green" data-guid="6"></option><option value="Hue" data-id="hue" data-guid="7"></option><option value="LerpColor" data-id="lerpColor" data-guid="8"></option><option value="Red" data-id="red" data-guid="9"></option><option value="Saturation" data-id="saturation" data-guid="10"></option><option value="Color/setRed" data-id="Color_setRed" data-guid="11"></option><option value="Color/setGreen" data-id="Color_setGreen" data-guid="12"></option><option value="Color/setBlue" data-id="Color_setBlue" data-guid="13"></option><option value="Color/setAlpha" data-id="Color_setAlpha" data-guid="14"></option><option value="Background" data-id="background" data-guid="15"></option><option value="Clear" data-id="clear" data-guid="16"></option><option value="ColorMode I" data-id="colorMode__0" data-guid="17"></option><option value="ColorMode II" data-id="colorMode__1" data-guid="18"></option><option value="Fill" data-id="fill" data-guid="19"></option><option value="NoFill" data-id="noFill" data-guid="20"></option><option value="NoStroke" data-id="noStroke" data-guid="21"></option><option value="Stroke I" data-id="stroke__0" data-guid="22"></option><option value="Stroke II" data-id="stroke__1" data-guid="23"></option><option value="Arc I" data-id="arc__0" data-guid="24"></option><option value="Arc II" data-id="arc__1" data-guid="25"></option><option value="Arc III" data-id="arc__2" data-guid="26"></option><option value="Ellipse" data-id="ellipse" data-guid="27"></option><option value="Circle" data-id="circle" data-guid="28"></option><option value="Line I" data-id="line__0" data-guid="29"></option><option value="Line II" data-id="line__1" data-guid="30"></option><option value="Point I" data-id="point__0" data-guid="31"></option><option value="Point II" data-id="point__1" data-guid="32"></option><option value="Point III" data-id="point__2" data-guid="33"></option><option value="Quad" data-id="quad" data-guid="34"></option><option value="Rect I" data-id="rect__0" data-guid="35"></option><option value="Rect II" data-id="rect__1" data-guid="36"></option><option value="Rect III" data-id="rect__2" data-guid="37"></option><option value="Square I" data-id="square__0" data-guid="38"></option><option value="Square II" data-id="square__1" data-guid="39"></option><option value="Square III" data-id="square__2" data-guid="40"></option><option value="Triangle" data-id="triangle" data-guid="41"></option><option value="EllipseMode I" data-id="ellipseMode__0" data-guid="42"></option><option value="EllipseMode II" data-id="ellipseMode__1" data-guid="43"></option><option value="RectMode I" data-id="rectMode__0" data-guid="44"></option><option value="RectMode II" data-id="rectMode__1" data-guid="45"></option><option value="StrokeCap" data-id="strokeCap" data-guid="46"></option><option value="StrokeJoin I" data-id="strokeJoin__0" data-guid="47"></option><option value="StrokeJoin II" data-id="strokeJoin__1" data-guid="48"></option><option value="StrokeJoin III" data-id="strokeJoin__2" data-guid="49"></option><option value="StrokeWeight" data-id="strokeWeight" data-guid="50"></option><option value="Bezier" data-id="bezier" data-guid="51"></option><option value="BezierPoint" data-id="bezierPoint" data-guid="52"></option><option value="BezierTangent I" data-id="bezierTangent__0" data-guid="53"></option><option value="BezierTangent II" data-id="bezierTangent__1" data-guid="54"></option><option value="Curve I" data-id="curve__0" data-guid="55"></option><option value="Curve II" data-id="curve__1" data-guid="56"></option><option value="Curve III" data-id="curve__2" data-guid="57"></option><option value="CurveTightness" data-id="curveTightness" data-guid="58"></option><option value="CurvePoint" data-id="curvePoint" data-guid="59"></option><option value="CurveTangent" data-id="curveTangent" data-guid="60"></option><option value="BeginContour" data-id="beginContour" data-guid="61"></option><option value="BeginShape" data-id="beginShape" data-guid="62"></option><option value="BezierVertex I" data-id="bezierVertex__0" data-guid="63"></option><option value="BezierVertex II" data-id="bezierVertex__1" data-guid="64"></option><option value="CurveVertex" data-id="curveVertex" data-guid="65"></option><option value="EndShape" data-id="endShape" data-guid="66"></option><option value="QuadraticVertex I" data-id="quadraticVertex__0" data-guid="67"></option><option value="QuadraticVertex II" data-id="quadraticVertex__1" data-guid="68"></option><option value="Vertex" data-id="vertex" data-guid="69"></option><option value="Cursor" data-id="cursor" data-guid="70"></option><option value="NoCursor" data-id="noCursor" data-guid="71"></option><option value="Preload" data-id="preload" data-guid="72"></option><option value="Setup" data-id="setup" data-guid="73"></option><option value="Draw" data-id="draw" data-guid="74"></option><option value="NoLoop I" data-id="noLoop__0" data-guid="75"></option><option value="NoLoop II" data-id="noLoop__1" data-guid="76"></option><option value="Loop" data-id="loop" data-guid="77"></option><option value="Push I" data-id="push__0" data-guid="78"></option><option value="Push II" data-id="push__1" data-guid="79"></option><option value="Redraw" data-id="redraw" data-guid="80"></option><option value="CreateCanvas" data-id="createCanvas" data-guid="81"></option><option value="CreateGraphics" data-id="createGraphics" data-guid="82"></option><option value="BlendMode I" data-id="blendMode__0" data-guid="83"></option><option value="BlendMode II" data-id="blendMode__1" data-guid="84"></option><option value="DrawingContext" data-id="drawingContext" data-guid="85"></option><option value="ApplyMatrix I" data-id="applyMatrix__0" data-guid="86"></option><option value="ApplyMatrix II" data-id="applyMatrix__1" data-guid="87"></option><option value="ApplyMatrix III" data-id="applyMatrix__2" data-guid="88"></option><option value="ApplyMatrix IV" data-id="applyMatrix__3" data-guid="89"></option><option value="ResetMatrix" data-id="resetMatrix" data-guid="90"></option><option value="Rotate" data-id="rotate" data-guid="91"></option><option value="Scale" data-id="scale" data-guid="92"></option><option value="ShearX" data-id="shearX" data-guid="93"></option><option value="ShearY" data-id="shearY" data-guid="94"></option><option value="Translate I" data-id="translate__0" data-guid="95"></option><option value="Translate II" data-id="translate__1" data-guid="96"></option><option value="Translate III" data-id="translate__2" data-guid="97"></option><option value="KeyIsPressed" data-id="keyIsPressed" data-guid="98"></option><option value="Key" data-id="key" data-guid="99"></option><option value="KeyCode I" data-id="keyCode__0" data-guid="100"></option><option value="KeyCode II" data-id="keyCode__1" data-guid="101"></option><option value="KeyPressed I" data-id="keyPressed__0" data-guid="102"></option><option value="KeyPressed II" data-id="keyPressed__1" data-guid="103"></option><option value="KeyReleased" data-id="keyReleased" data-guid="104"></option><option value="KeyIsDown I" data-id="keyIsDown__0" data-guid="105"></option><option value="KeyIsDown II" data-id="keyIsDown__1" data-guid="106"></option><option value="MouseX" data-id="mouseX" data-guid="107"></option><option value="MouseY" data-id="mouseY" data-guid="108"></option><option value="PmouseX" data-id="pmouseX" data-guid="109"></option><option value="PmouseY" data-id="pmouseY" data-guid="110"></option><option value="MouseButton" data-id="mouseButton" data-guid="111"></option><option value="MouseIsPressed" data-id="mouseIsPressed" data-guid="112"></option><option value="MouseMoved" data-id="mouseMoved" data-guid="113"></option><option value="MouseDragged" data-id="mouseDragged" data-guid="114"></option><option value="MousePressed" data-id="mousePressed" data-guid="115"></option><option value="MouseReleased" data-id="mouseReleased" data-guid="116"></option><option value="MouseClicked" data-id="mouseClicked" data-guid="117"></option><option value="Touches" data-id="touches" data-guid="118"></option><option value="TouchStarted" data-id="touchStarted" data-guid="119"></option><option value="TouchMoved" data-id="touchMoved" data-guid="120"></option><option value="TouchEnded" data-id="touchEnded" data-guid="121"></option><option value="CreateImage I" data-id="createImage__0" data-guid="122"></option><option value="CreateImage II" data-id="createImage__1" data-guid="123"></option><option value="CreateImage III" data-id="createImage__2" data-guid="124"></option><option value="Image" data-id="Image" data-guid="125"></option><option value="Image/loadPixels" data-id="Image_loadPixels" data-guid="126"></option><option value="Image/get" data-id="Image_get" data-guid="127"></option><option value="Image/resize" data-id="Image_resize" data-guid="128"></option><option value="Image/mask" data-id="Image_mask" data-guid="129"></option><option value="Image/filter" data-id="Image_filter" data-guid="130"></option><option value="Image/save" data-id="Image_save" data-guid="131"></option><option value="Pixels" data-id="pixels" data-guid="132"></option><option value="Filter I" data-id="filter__0" data-guid="133"></option><option value="Filter II" data-id="filter__1" data-guid="134"></option><option value="Filter III" data-id="filter__2" data-guid="135"></option><option value="Filter IV" data-id="filter__3" data-guid="136"></option><option value="Filter V" data-id="filter__4" data-guid="137"></option><option value="Filter VI" data-id="filter__5" data-guid="138"></option><option value="Filter VII" data-id="filter__6" data-guid="139"></option><option value="Filter VIII" data-id="filter__7" data-guid="140"></option><option value="Filter IX" data-id="filter__8" data-guid="141"></option><option value="Get I" data-id="get__0" data-guid="142"></option><option value="Get II" data-id="get__1" data-guid="143"></option><option value="LoadPixels" data-id="loadPixels" data-guid="144"></option><option value="Set I" data-id="set__0" data-guid="145"></option><option value="Set II" data-id="set__1" data-guid="146"></option><option value="Set III" data-id="set__2" data-guid="147"></option><option value="CreateVector" data-id="createVector" data-guid="148"></option><option value="Vector" data-id="Vector" data-guid="149"></option><option value="Vector/toString" data-id="Vector_toString" data-guid="150"></option><option value="Vector/set" data-id="Vector_set" data-guid="151"></option><option value="Vector/add" data-id="Vector_add" data-guid="152"></option><option value="Vector/sub" data-id="Vector_sub" data-guid="153"></option><option value="Vector/mult" data-id="Vector_mult" data-guid="154"></option><option value="Vector/div" data-id="Vector_div" data-guid="155"></option><option value="Vector/mag" data-id="Vector_mag" data-guid="156"></option><option value="Vector/magSq" data-id="Vector_magSq" data-guid="157"></option><option value="Vector/dist" data-id="Vector_dist" data-guid="158"></option><option value="Vector/normalize" data-id="Vector_normalize" data-guid="159"></option><option value="Vector/limit" data-id="Vector_limit" data-guid="160"></option><option value="Vector/setMag" data-id="Vector_setMag" data-guid="161"></option><option value="Vector/heading" data-id="Vector_heading" data-guid="162"></option><option value="Vector/rotate" data-id="Vector_rotate" data-guid="163"></option><option value="Vector/angleBetween" data-id="Vector_angleBetween" data-guid="164"></option><option value="Vector/lerp" data-id="Vector_lerp" data-guid="165"></option><option value="Vector/reflect" data-id="Vector_reflect" data-guid="166"></option><option value="Vector/fromAngle" data-id="Vector_fromAngle" data-guid="167"></option><option value="Vector/random2D" data-id="Vector_random2D" data-guid="168"></option><option value="TextAlign I" data-id="textAlign__0" data-guid="169"></option><option value="TextAlign II" data-id="textAlign__1" data-guid="170"></option><option value="TextLeading" data-id="textLeading" data-guid="171"></option><option value="TextSize" data-id="textSize" data-guid="172"></option><option value="TextStyle" data-id="textStyle" data-guid="173"></option><option value="TextWidth" data-id="textWidth" data-guid="174"></option><option value="TextAscent" data-id="textAscent" data-guid="175"></option><option value="TextDescent" data-id="textDescent" data-guid="176"></option><option value="RandomSeed" data-id="randomSeed" data-guid="177"></option><option value="Random I" data-id="random__0" data-guid="178"></option><option value="Random II" data-id="random__1" data-guid="179"></option><option value="Random III" data-id="random__2" data-guid="180"></option><option value="RandomGaussian I" data-id="randomGaussian__0" data-guid="181"></option><option value="RandomGaussian II" data-id="randomGaussian__1" data-guid="182"></option><option value="Noise I" data-id="noise__0" data-guid="183"></option><option value="Noise II" data-id="noise__1" data-guid="184"></option><option value="NoiseDetail" data-id="noiseDetail" data-guid="185"></option><option value="NoiseSeed" data-id="noiseSeed" data-guid="186"></option>
</datalist></nav>
<main>
<section id="index"><ul>
<li><a href="javascript:void(0)" onclick="openEg('alpha');">alpha</a></li><li><a href="javascript:void(0)" onclick="openEg('blue');">blue</a></li><li><a href="javascript:void(0)" onclick="openEg('brightness');">brightness</a></li><li><a href="javascript:void(0)" onclick="openEg('color__0');">color I</a></li><li><a href="javascript:void(0)" onclick="openEg('color__1');">color II</a></li><li><a href="javascript:void(0)" onclick="openEg('color__2');">color III</a></li><li><a href="javascript:void(0)" onclick="openEg('green');">green</a></li><li><a href="javascript:void(0)" onclick="openEg('hue');">hue</a></li><li><a href="javascript:void(0)" onclick="openEg('lerpColor');">lerpColor</a></li><li><a href="javascript:void(0)" onclick="openEg('red');">red</a></li><li><a href="javascript:void(0)" onclick="openEg('saturation');">saturation</a></li><li><a href="javascript:void(0)" onclick="openEg('Color_setRed');">Color/setRed</a></li><li><a href="javascript:void(0)" onclick="openEg('Color_setGreen');">Color/setGreen</a></li><li><a href="javascript:void(0)" onclick="openEg('Color_setBlue');">Color/setBlue</a></li><li><a href="javascript:void(0)" onclick="openEg('Color_setAlpha');">Color/setAlpha</a></li><li><a href="javascript:void(0)" onclick="openEg('background');">background</a></li><li><a href="javascript:void(0)" onclick="openEg('clear');">clear</a></li><li><a href="javascript:void(0)" onclick="openEg('colorMode__0');">colorMode I</a></li><li><a href="javascript:void(0)" onclick="openEg('colorMode__1');">colorMode II</a></li><li><a href="javascript:void(0)" onclick="openEg('fill');">fill</a></li><li><a href="javascript:void(0)" onclick="openEg('noFill');">noFill</a></li><li><a href="javascript:void(0)" onclick="openEg('noStroke');">noStroke</a></li><li><a href="javascript:void(0)" onclick="openEg('stroke__0');">stroke I</a></li><li><a href="javascript:void(0)" onclick="openEg('stroke__1');">stroke II</a></li><li><a href="javascript:void(0)" onclick="openEg('arc__0');">arc I</a></li><li><a href="javascript:void(0)" onclick="openEg('arc__1');">arc II</a></li><li><a href="javascript:void(0)" onclick="openEg('arc__2');">arc III</a></li><li><a href="javascript:void(0)" onclick="openEg('ellipse');">ellipse</a></li><li><a href="javascript:void(0)" onclick="openEg('circle');">circle</a></li><li><a href="javascript:void(0)" onclick="openEg('line__0');">line I</a></li><li><a href="javascript:void(0)" onclick="openEg('line__1');">line II</a></li><li><a href="javascript:void(0)" onclick="openEg('point__0');">point I</a></li><li><a href="javascript:void(0)" onclick="openEg('point__1');">point II</a></li><li><a href="javascript:void(0)" onclick="openEg('point__2');">point III</a></li><li><a href="javascript:void(0)" onclick="openEg('quad');">quad</a></li><li><a href="javascript:void(0)" onclick="openEg('rect__0');">rect I</a></li><li><a href="javascript:void(0)" onclick="openEg('rect__1');">rect II</a></li><li><a href="javascript:void(0)" onclick="openEg('rect__2');">rect III</a></li><li><a href="javascript:void(0)" onclick="openEg('square__0');">square I</a></li><li><a href="javascript:void(0)" onclick="openEg('square__1');">square II</a></li><li><a href="javascript:void(0)" onclick="openEg('square__2');">square III</a></li><li><a href="javascript:void(0)" onclick="openEg('triangle');">triangle</a></li><li><a href="javascript:void(0)" onclick="openEg('ellipseMode__0');">ellipseMode I</a></li><li><a href="javascript:void(0)" onclick="openEg('ellipseMode__1');">ellipseMode II</a></li><li><a href="javascript:void(0)" onclick="openEg('rectMode__0');">rectMode I</a></li><li><a href="javascript:void(0)" onclick="openEg('rectMode__1');">rectMode II</a></li><li><a href="javascript:void(0)" onclick="openEg('strokeCap');">strokeCap</a></li><li><a href="javascript:void(0)" onclick="openEg('strokeJoin__0');">strokeJoin I</a></li><li><a href="javascript:void(0)" onclick="openEg('strokeJoin__1');">strokeJoin II</a></li><li><a href="javascript:void(0)" onclick="openEg('strokeJoin__2');">strokeJoin III</a></li><li><a href="javascript:void(0)" onclick="openEg('strokeWeight');">strokeWeight</a></li><li><a href="javascript:void(0)" onclick="openEg('bezier');">bezier</a></li><li><a href="javascript:void(0)" onclick="openEg('bezierPoint');">bezierPoint</a></li><li><a href="javascript:void(0)" onclick="openEg('bezierTangent__0');">bezierTangent I</a></li><li><a href="javascript:void(0)" onclick="openEg('bezierTangent__1');">bezierTangent II</a></li><li><a href="javascript:void(0)" onclick="openEg('curve__0');">curve I</a></li><li><a href="javascript:void(0)" onclick="openEg('curve__1');">curve II</a></li><li><a href="javascript:void(0)" onclick="openEg('curve__2');">curve III</a></li><li><a href="javascript:void(0)" onclick="openEg('curveTightness');">curveTightness</a></li><li><a href="javascript:void(0)" onclick="openEg('curvePoint');">curvePoint</a></li><li><a href="javascript:void(0)" onclick="openEg('curveTangent');">curveTangent</a></li><li><a href="javascript:void(0)" onclick="openEg('beginContour');">beginContour</a></li><li><a href="javascript:void(0)" onclick="openEg('beginShape');">beginShape</a></li><li><a href="javascript:void(0)" onclick="openEg('bezierVertex__0');">bezierVertex I</a></li><li><a href="javascript:void(0)" onclick="openEg('bezierVertex__1');">bezierVertex II</a></li><li><a href="javascript:void(0)" onclick="openEg('curveVertex');">curveVertex</a></li><li><a href="javascript:void(0)" onclick="openEg('endShape');">endShape</a></li><li><a href="javascript:void(0)" onclick="openEg('quadraticVertex__0');">quadraticVertex I</a></li><li><a href="javascript:void(0)" onclick="openEg('quadraticVertex__1');">quadraticVertex II</a></li><li><a href="javascript:void(0)" onclick="openEg('vertex');">vertex</a></li><li><a href="javascript:void(0)" onclick="openEg('cursor');">cursor</a></li><li><a href="javascript:void(0)" onclick="openEg('noCursor');">noCursor</a></li><li><a href="javascript:void(0)" onclick="openEg('preload');">preload</a></li><li><a href="javascript:void(0)" onclick="openEg('setup');">setup</a></li><li><a href="javascript:void(0)" onclick="openEg('draw');">draw</a></li><li><a href="javascript:void(0)" onclick="openEg('noLoop__0');">noLoop I</a></li><li><a href="javascript:void(0)" onclick="openEg('noLoop__1');">noLoop II</a></li><li><a href="javascript:void(0)" onclick="openEg('loop');">loop</a></li><li><a href="javascript:void(0)" onclick="openEg('push__0');">push I</a></li><li><a href="javascript:void(0)" onclick="openEg('push__1');">push II</a></li><li><a href="javascript:void(0)" onclick="openEg('redraw');">redraw</a></li><li><a href="javascript:void(0)" onclick="openEg('createCanvas');">createCanvas</a></li><li><a href="javascript:void(0)" onclick="openEg('createGraphics');">createGraphics</a></li><li><a href="javascript:void(0)" onclick="openEg('blendMode__0');">blendMode I</a></li><li><a href="javascript:void(0)" onclick="openEg('blendMode__1');">blendMode II</a></li><li><a href="javascript:void(0)" onclick="openEg('drawingContext');">drawingContext</a></li><li><a href="javascript:void(0)" onclick="openEg('applyMatrix__0');">applyMatrix I</a></li><li><a href="javascript:void(0)" onclick="openEg('applyMatrix__1');">applyMatrix II</a></li><li><a href="javascript:void(0)" onclick="openEg('applyMatrix__2');">applyMatrix III</a></li><li><a href="javascript:void(0)" onclick="openEg('applyMatrix__3');">applyMatrix IV</a></li><li><a href="javascript:void(0)" onclick="openEg('resetMatrix');">resetMatrix</a></li><li><a href="javascript:void(0)" onclick="openEg('rotate');">rotate</a></li><li><a href="javascript:void(0)" onclick="openEg('scale');">scale</a></li><li><a href="javascript:void(0)" onclick="openEg('shearX');">shearX</a></li><li><a href="javascript:void(0)" onclick="openEg('shearY');">shearY</a></li><li><a href="javascript:void(0)" onclick="openEg('translate__0');">translate I</a></li><li><a href="javascript:void(0)" onclick="openEg('translate__1');">translate II</a></li><li><a href="javascript:void(0)" onclick="openEg('translate__2');">translate III</a></li><li><a href="javascript:void(0)" onclick="openEg('keyIsPressed');">keyIsPressed</a></li><li><a href="javascript:void(0)" onclick="openEg('key');">key</a></li><li><a href="javascript:void(0)" onclick="openEg('keyCode__0');">keyCode I</a></li><li><a href="javascript:void(0)" onclick="openEg('keyCode__1');">keyCode II</a></li><li><a href="javascript:void(0)" onclick="openEg('keyPressed__0');">keyPressed I</a></li><li><a href="javascript:void(0)" onclick="openEg('keyPressed__1');">keyPressed II</a></li><li><a href="javascript:void(0)" onclick="openEg('keyReleased');">keyReleased</a></li><li><a href="javascript:void(0)" onclick="openEg('keyIsDown__0');">keyIsDown I</a></li><li><a href="javascript:void(0)" onclick="openEg('keyIsDown__1');">keyIsDown II</a></li><li><a href="javascript:void(0)" onclick="openEg('mouseX');">mouseX</a></li><li><a href="javascript:void(0)" onclick="openEg('mouseY');">mouseY</a></li><li><a href="javascript:void(0)" onclick="openEg('pmouseX');">pmouseX</a></li><li><a href="javascript:void(0)" onclick="openEg('pmouseY');">pmouseY</a></li><li><a href="javascript:void(0)" onclick="openEg('mouseButton');">mouseButton</a></li><li><a href="javascript:void(0)" onclick="openEg('mouseIsPressed');">mouseIsPressed</a></li><li><a href="javascript:void(0)" onclick="openEg('mouseMoved');">mouseMoved</a></li><li><a href="javascript:void(0)" onclick="openEg('mouseDragged');">mouseDragged</a></li><li><a href="javascript:void(0)" onclick="openEg('mousePressed');">mousePressed</a></li><li><a href="javascript:void(0)" onclick="openEg('mouseReleased');">mouseReleased</a></li><li><a href="javascript:void(0)" onclick="openEg('mouseClicked');">mouseClicked</a></li><li><a href="javascript:void(0)" onclick="openEg('touches');">touches</a></li><li><a href="javascript:void(0)" onclick="openEg('touchStarted');">touchStarted</a></li><li><a href="javascript:void(0)" onclick="openEg('touchMoved');">touchMoved</a></li><li><a href="javascript:void(0)" onclick="openEg('touchEnded');">touchEnded</a></li><li><a href="javascript:void(0)" onclick="openEg('createImage__0');">createImage I</a></li><li><a href="javascript:void(0)" onclick="openEg('createImage__1');">createImage II</a></li><li><a href="javascript:void(0)" onclick="openEg('createImage__2');">createImage III</a></li><li><a href="javascript:void(0)" onclick="openEg('Image');">Image</a></li><li><a href="javascript:void(0)" onclick="openEg('Image_loadPixels');">Image/loadPixels</a></li><li><a href="javascript:void(0)" onclick="openEg('Image_get');">Image/get</a></li><li><a href="javascript:void(0)" onclick="openEg('Image_resize');">Image/resize</a></li><li><a href="javascript:void(0)" onclick="openEg('Image_mask');">Image/mask</a></li><li><a href="javascript:void(0)" onclick="openEg('Image_filter');">Image/filter</a></li><li><a href="javascript:void(0)" onclick="openEg('Image_save');">Image/save</a></li><li><a href="javascript:void(0)" onclick="openEg('pixels');">pixels</a></li><li><a href="javascript:void(0)" onclick="openEg('filter__0');">filter I</a></li><li><a href="javascript:void(0)" onclick="openEg('filter__1');">filter II</a></li><li><a href="javascript:void(0)" onclick="openEg('filter__2');">filter III</a></li><li><a href="javascript:void(0)" onclick="openEg('filter__3');">filter IV</a></li><li><a href="javascript:void(0)" onclick="openEg('filter__4');">filter V</a></li><li><a href="javascript:void(0)" onclick="openEg('filter__5');">filter VI</a></li><li><a href="javascript:void(0)" onclick="openEg('filter__6');">filter VII</a></li><li><a href="javascript:void(0)" onclick="openEg('filter__7');">filter VIII</a></li><li><a href="javascript:void(0)" onclick="openEg('filter__8');">filter IX</a></li><li><a href="javascript:void(0)" onclick="openEg('get__0');">get I</a></li><li><a href="javascript:void(0)" onclick="openEg('get__1');">get II</a></li><li><a href="javascript:void(0)" onclick="openEg('loadPixels');">loadPixels</a></li><li><a href="javascript:void(0)" onclick="openEg('set__0');">set I</a></li><li><a href="javascript:void(0)" onclick="openEg('set__1');">set II</a></li><li><a href="javascript:void(0)" onclick="openEg('set__2');">set III</a></li><li><a href="javascript:void(0)" onclick="openEg('createVector');">createVector</a></li><li><a href="javascript:void(0)" onclick="openEg('Vector');">Vector</a></li><li><a href="javascript:void(0)" onclick="openEg('Vector_toString');">Vector/toString</a></li><li><a href="javascript:void(0)" onclick="openEg('Vector_set');">Vector/set</a></li><li><a href="javascript:void(0)" onclick="openEg('Vector_add');">Vector/add</a></li><li><a href="javascript:void(0)" onclick="openEg('Vector_sub');">Vector/sub</a></li><li><a href="javascript:void(0)" onclick="openEg('Vector_mult');">Vector/mult</a></li><li><a href="javascript:void(0)" onclick="openEg('Vector_div');">Vector/div</a></li><li><a href="javascript:void(0)" onclick="openEg('Vector_mag');">Vector/mag</a></li><li><a href="javascript:void(0)" onclick="openEg('Vector_magSq');">Vector/magSq</a></li><li><a href="javascript:void(0)" onclick="openEg('Vector_dist');">Vector/dist</a></li><li><a href="javascript:void(0)" onclick="openEg('Vector_normalize');">Vector/normalize</a></li><li><a href="javascript:void(0)" onclick="openEg('Vector_limit');">Vector/limit</a></li><li><a href="javascript:void(0)" onclick="openEg('Vector_setMag');">Vector/setMag</a></li><li><a href="javascript:void(0)" onclick="openEg('Vector_heading');">Vector/heading</a></li><li><a href="javascript:void(0)" onclick="openEg('Vector_rotate');">Vector/rotate</a></li><li><a href="javascript:void(0)" onclick="openEg('Vector_angleBetween');">Vector/angleBetween</a></li><li><a href="javascript:void(0)" onclick="openEg('Vector_lerp');">Vector/lerp</a></li><li><a href="javascript:void(0)" onclick="openEg('Vector_reflect');">Vector/reflect</a></li><li><a href="javascript:void(0)" onclick="openEg('Vector_fromAngle');">Vector/fromAngle</a></li><li><a href="javascript:void(0)" onclick="openEg('Vector_random2D');">Vector/random2D</a></li><li><a href="javascript:void(0)" onclick="openEg('textAlign__0');">textAlign I</a></li><li><a href="javascript:void(0)" onclick="openEg('textAlign__1');">textAlign II</a></li><li><a href="javascript:void(0)" onclick="openEg('textLeading');">textLeading</a></li><li><a href="javascript:void(0)" onclick="openEg('textSize');">textSize</a></li><li><a href="javascript:void(0)" onclick="openEg('textStyle');">textStyle</a></li><li><a href="javascript:void(0)" onclick="openEg('textWidth');">textWidth</a></li><li><a href="javascript:void(0)" onclick="openEg('textAscent');">textAscent</a></li><li><a href="javascript:void(0)" onclick="openEg('textDescent');">textDescent</a></li><li><a href="javascript:void(0)" onclick="openEg('randomSeed');">randomSeed</a></li><li><a href="javascript:void(0)" onclick="openEg('random__0');">random I</a></li><li><a href="javascript:void(0)" onclick="openEg('random__1');">random II</a></li><li><a href="javascript:void(0)" onclick="openEg('random__2');">random III</a></li><li><a href="javascript:void(0)" onclick="openEg('randomGaussian__0');">randomGaussian I</a></li><li><a href="javascript:void(0)" onclick="openEg('randomGaussian__1');">randomGaussian II</a></li><li><a href="javascript:void(0)" onclick="openEg('noise__0');">noise I</a></li><li><a href="javascript:void(0)" onclick="openEg('noise__1');">noise II</a></li><li><a href="javascript:void(0)" onclick="openEg('noiseDetail');">noiseDetail</a></li><li><a href="javascript:void(0)" onclick="openEg('noiseSeed');">noiseSeed</a></li>
</ul></section>
<section id="content">
<h2></h2>
<figure>
<iframe id="q5frame"></iframe>
<figcaption>q5.js<sub>(this)</sub></figcaption>
</figure>
<figure>
<iframe id="p5frame"></iframe>
<figcaption>p5.js<sub>(reference)</sub></figcaption>
</figure>
<pre></pre>
<footer><p><sub>From the original p5 example at <a></a></sub></p></footer>
</section>
</main>
<script src="./js/data.js"></script>
<script src="./js/docs.js"></script>
</body>
</html>