<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>HTML5 &#8211; Matthew Petroff</title>
	<atom:link href="https://mpetroff.net/tag/html5/feed/" rel="self" type="application/rss+xml" />
	<link>https://mpetroff.net</link>
	<description>mpetroff.net</description>
	<lastBuildDate>Thu, 21 Aug 2025 00:27:22 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	
	<item>
		<title>HTML5 Night Sky Viewer</title>
		<link>https://mpetroff.net/2014/02/html5-night-sky-viewer/</link>
					<comments>https://mpetroff.net/2014/02/html5-night-sky-viewer/#comments</comments>
		
		<dc:creator><![CDATA[Matthew Petroff]]></dc:creator>
		<pubDate>Sun, 09 Feb 2014 23:41:29 +0000</pubDate>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[night sky]]></category>
		<category><![CDATA[SVG]]></category>
		<guid isPermaLink="false">http://www.mpetroff.net/?p=1292</guid>

					<description><![CDATA[For HopHacks last weekend, I wrote an HTML5 night sky viewer. Using D3.js and SunCalc, the 750 brightest stars are rendered using SVG and Javascript. One&#8217;s location can either be found using the HTML5 Geolocation API, or it can be &#8230; <a href="https://mpetroff.net/2014/02/html5-night-sky-viewer/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
										<content:encoded><![CDATA[<p><span class="dropcap">F</span>or <a href="http://hophacks.com/">HopHacks</a> last weekend, I wrote an HTML5 night sky viewer. Using <a href="http://d3js.org/">D3.js</a> and <a href="https://github.com/mourner/suncalc">SunCalc</a>, the 750 brightest stars are rendered using SVG and Javascript. One&#8217;s location can either be found using the HTML5 Geolocation API, or it can be entered manually. The keyboard is used to navigate, and mousing over a star will display some information about it. As it was written in a weekend, there may be bugs.</p>
<p>Here is the viewer:<br />
<a href="/files/nightsky/">https://mpetroff.net/files/nightsky/</a></p>
<p>The code is available on <a href="https://github.com/mpetroff/nightsky">Github</a>.</p>
<p><a href="https://cdn0.mpetroff.net/wp-content/uploads/2014/02/nightsky.png" data-sbox="1292"><img decoding="async" class="aligncenter size-large wp-image-1296" alt="Night Sky" src="https://cdn0.mpetroff.net/wp-content/uploads/2014/02/nightsky-640x418.png" width="640" height="418" /></a></p>
]]></content:encoded>
					
					<wfw:commentRss>https://mpetroff.net/2014/02/html5-night-sky-viewer/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
		<item>
		<title>Pannellum 1.2</title>
		<link>https://mpetroff.net/2012/08/pannellum-1-2/</link>
					<comments>https://mpetroff.net/2012/08/pannellum-1-2/#comments</comments>
		
		<dc:creator><![CDATA[Matthew Petroff]]></dc:creator>
		<pubDate>Tue, 28 Aug 2012 16:34:42 +0000</pubDate>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[pannellum]]></category>
		<category><![CDATA[panorama]]></category>
		<category><![CDATA[WebGL]]></category>
		<guid isPermaLink="false">http://www.mpetroff.net/?p=652</guid>

					<description><![CDATA[With a few new features, a few improvements, and a bug fix, Pannellum 1.2 has been released. The new release includes keyboard panning controls, support for a fallback URL if WebGL is not supported by a browser, clarified load button &#8230; <a href="https://mpetroff.net/2012/08/pannellum-1-2/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
										<content:encoded><![CDATA[<p><span class="dropcap">W</span>ith a few new features, a few improvements, and a bug fix, Pannellum 1.2 has been released. The new release includes keyboard panning controls, support for a fallback URL if WebGL is not supported by a browser, clarified load button text, and vector icons. Also included is a workaround for a, now resolved, <a href="https://bugs.webkit.org/show_bug.cgi?id=93525">regression in WebKit&#8217;s fullscreen API support</a>. Enjoy!</p>
<div style="width:600px; margin-left:auto; margin-right:auto; overflow:hidden;"><iframe loading="lazy" title="pannellum panorama viewer" width="600" height="400" webkitAllowFullScreen mozallowfullscreen allowFullScreen style="border-style:none;" id="pannellum_fua5cQ4qlI" src="/files/pannellum/pannellum.htm?panorama=https://cdn0.mpetroff.net/wp-content/uploads/2012/05/examplepano.jpg&amp;title=Jordan%20Pond&amp;author=Matthew%20Petroff&amp;license=1"></iframe></div>
<p>&#32;<br />
Update: Pannellum 1.2.1 has been released with a fix for a minor mouse dragging bug.</p>
<p>The new release can be downloaded <a href="https://github.com/mpetroff/pannellum/archive/1.2.1.zip">here</a>, or one can see the project on <a href="https://github.com/mpetroff/pannellum">Github</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://mpetroff.net/2012/08/pannellum-1-2/feed/</wfw:commentRss>
			<slash:comments>4</slash:comments>
		
		
			</item>
		<item>
		<title>Introducing Pannellum</title>
		<link>https://mpetroff.net/2012/05/introducing-pannellum/</link>
					<comments>https://mpetroff.net/2012/05/introducing-pannellum/#comments</comments>
		
		<dc:creator><![CDATA[Matthew Petroff]]></dc:creator>
		<pubDate>Tue, 29 May 2012 02:06:20 +0000</pubDate>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[pannellum]]></category>
		<category><![CDATA[panorama]]></category>
		<category><![CDATA[WebGL]]></category>
		<guid isPermaLink="false">http://www.mpetroff.net/?p=547</guid>

					<description><![CDATA[After a year of on and off development, Pannellum, a free and open source panorama viewer for the web, is ready for release. Built using HTML5, CSS3, JavaScript, and WebGL, it is plug-in free. The lightweight viewer, just 18kB gzipped, &#8230; <a href="https://mpetroff.net/2012/05/introducing-pannellum/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
										<content:encoded><![CDATA[<p><span class="dropcap">A</span>fter a year of on and off development, Pannellum, a free and open source panorama viewer for the web, is ready for release. Built using HTML5, CSS3, JavaScript, and WebGL, it is plug-in free. The lightweight viewer, just 18kB gzipped, can be deployed using a single file and displays full equirectangular panoramas. One can easily embed panoramas in web pages as an &lt;iframe&gt;, using code generated by the included configuration utility.</p>
<div style="width:600px; margin-left:auto; margin-right:auto; overflow:hidden;"><iframe loading="lazy" title="pannellum panorama viewer" width="600" height="400" webkitAllowFullScreen mozallowfullscreen allowFullScreen style="border-style:none;" id="pannellum_fua5cQ4qlI" src="/files/pannellum/pannellum.htm?panorama=https://cdn0.mpetroff.net/wp-content/uploads/2012/05/examplepano.jpg&amp;title=Jordan%20Pond&amp;author=Matthew%20Petroff"></iframe></div>
<p>&#32;<br />
Almost all previous web panorama viewers have been plug-in based, be it Java, Flash, QuickTime, <em>et cetera</em>. With growing browser support for WebGL, this is no longer necessary. As of writing, approximately half of the browsers currently in use support WebGL. With proper graphics drivers, recent versions of Firefox and Chrome support WebGL by default. In addition, recent versions of Safari and preview versions of Opera have WebGL support, although it is turned off by default. The notable exception to WebGL support is Internet Explorer, with no versions, including the preview release of IE 10, having support. Although large swaths of Internet users run browsers that do not support WebGL, support is steadily growing. Plug-in based solutions may have better support today, but WebGL and standards based development is the future.</p>
<p>One last feature that gave Flash an advantage over HTML5, was full screen support, but in the past few months this has changed. While still an early draft, the Full Screen API allows for web applications to programmatically enter full screen much in the way Flash does, allowing for a more immersive experience. When development on Pannellum started, this was not the case, and I originally implemented more limited full window support by opening a larger popup window. This original method is still supported for older browsers that support WebGL but do not support the Full Screen API.</p>
<p>Pannellum was started as I could not find a good plug-in free panorama viewer. The closest I could find was a <a href="https://github.com/mrdoob/three.js">three.js</a> demo that displayed an equirectangular panorama. While it worked for the one image, everything was hard-coded, it lacked user friendly controls, and was missing basic features. In addition, it relied on a large,&nbsp;64kB gzipped, JavaScript library. Pannellum displays a panorama using the same method as this demo, but the similarities end there. Although featuring a much improved user interface; embedding support; configuration using URL parameters; title, author, and license information; and full screen support among other things, Pannellum is still much smaller and easier to deploy. This is in large part due to work to carefully strip the three.js library down to the bare minimum needed using a JavaScript profiler. A Python build system is used to first minify the JavaScript using the <a href="https://developers.google.com/closure/compiler/">Closure Compiler</a> and the CSS using the <a href="http://yuilibrary.com/projects/yuicompressor/">YUI Compressor</a>, then insert these along with data URIs of the images into the HTML file before finally running it through an <a href="http://code.google.com/p/htmlcompressor/">HTML Compressor</a> to produce the final viewer.</p>
<p>The initial release of Pannellum can be downloaded <a href="https://github.com/mpetroff/pannellum/archive/1.0.zip">here</a>, or one can see the project on <a href="https://github.com/mpetroff/pannellum">Github</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://mpetroff.net/2012/05/introducing-pannellum/feed/</wfw:commentRss>
			<slash:comments>28</slash:comments>
		
		
			</item>
		<item>
		<title>Introducing “A Jackson Pollock-esque Art Generator”</title>
		<link>https://mpetroff.net/2011/06/introducing-a-jackson-pollock-esque-art-generator/</link>
					<comments>https://mpetroff.net/2011/06/introducing-a-jackson-pollock-esque-art-generator/#respond</comments>
		
		<dc:creator><![CDATA[Matthew Petroff]]></dc:creator>
		<pubDate>Thu, 16 Jun 2011 00:07:37 +0000</pubDate>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[art]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[Jackson Pollock]]></category>
		<category><![CDATA[processing]]></category>
		<category><![CDATA[programming]]></category>
		<guid isPermaLink="false">http://www.mpetroff.net/?p=142</guid>

					<description><![CDATA[Originally written in the desktop version of Processing, with PDF export, and intended to be used to generate backgrounds, “A Jackson Pollock-esque Art Generator” has now been ported to Processing.js, running in any HTML5 canvas compatible browser. Simply click and &#8230; <a href="https://mpetroff.net/2011/06/introducing-a-jackson-pollock-esque-art-generator/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
										<content:encoded><![CDATA[<p><span class="dropcap">O</span>riginally written in the desktop version of <a title="Processing.org" href="http://www.processing.org/">Processing</a>, with PDF export, and intended to be used to generate backgrounds, “<a title="A Jackson Pollock-esque Art Generator" href="/files/processing/backgroundgenerator/">A Jackson Pollock-esque Art Generator</a>” has now been ported to <a title="Processing.js" href="http://processingjs.org/">Processing.js</a>, running in any HTML5 canvas compatible browser. Simply click and drag to <del>waste time</del> create beautiful artwork. You can even export an image of your masterpieces!</p>
<p>Available (with full source code) here:<br />
<a href="/files/processing/backgroundgenerator/" target="_blank">https://mpetroff.net/files/processing/backgroundgenerator/</a></p>
]]></content:encoded>
					
					<wfw:commentRss>https://mpetroff.net/2011/06/introducing-a-jackson-pollock-esque-art-generator/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>

<!--
Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/?utm_source=w3tc&utm_medium=footer_comment&utm_campaign=free_plugin

Page Caching using Disk: Enhanced 
Content Delivery Network via Amazon Web Services: CloudFront: cdn0.mpetroff.net
Minified using Disk

Served from: mpetroff.net @ 2026-03-29 12:24:30 by W3 Total Cache
-->