pattern(s) - video / canvas / text / image(s)
<!--
</td><td>
-->
<div id="patterns">
<!--
<h2>choose a pattern:</h2>
-->
<!--
<br/>
-->
<br/>
<span>
canvas:
<br/>
<canvas id="pong" width="150" height="150" onclick="processor.updatePattern(this, true)"/>
</span>
<span>
text:
<br/>
<canvas id="yourtext" width="150" height="150" onclick="processor.updatePattern(this, false); document.getElementById('message').focus()"/>
<input id="message"/>
</span>
<span>
drawing:
<br/>
<canvas id="yourdrawing" width="150" height="150" onclick="processor.updatePattern(this, false)"/>
<input type="button" value="clear" onclick="processor.clearPainter()"/>
3 </span>
<br />
<span>
video:
<br/>
<video width="150" height="150" id="tiny_video" controls="true" src="showreel-create.ogg" onclick="processor.updatePattern(this, true)" autobuffer="true" tabindex="0"/>
</span>
<span>
image:
<br/>
<img width="150" height="150" id="token" src="@walk.gif" onclick="processor.updatePattern(this, true)" pattern="true"/>
</span>
<span>
image:
<br/>
<img width="150" height="150" id="ff" src="soutine.jpg" onclick="processor.updatePattern(this, false)"/>
</span>
</div>
<br/>
</td>
</tr>
</table>