Permalink
Browse files

some site updates

  • Loading branch information...
1 parent a097e52 commit 12e5988575c4e849fffa76c80ef56b3d871240e6 @shiffman committed Aug 23, 2016
Showing with 60 additions and 41 deletions.
  1. +0 −2 _includes/header.html
  2. +1 −3 _includes/home-header.html
  3. +10 −3 _layouts/post.html
  4. +12 −12 js/youtube.js
  5. +17 −5 learning.html
  6. +9 −8 p5/kinect/index.md
  7. +11 −8 videos.html
@@ -8,9 +8,7 @@
<li><a href="/books/">BOOKS</a></li>
<li><a href="/videos/">VIDEOS</a></li>
<li><a href="/learning/">LEARNING</a></li>
- <span class="line-charm"></span>
<li><a href="/about/">ABOUT</a></li>
- <li><a href="/blog/">BLOG</a></li>
<span class="line-charm"></span>
<li><a href="http://twitter.com/shiffman" target="_blank">TWITTER</a></li>
<li><a href="http://github.com/shiffman" target="_blank">GITHUB</a></li>
@@ -11,9 +11,7 @@
<li><a href="/books/">BOOKS</a></li>
<li><a href="/videos/">VIDEOS</a></li>
<li><a href="/learning/">LEARNING</a></li>
- <span class="line-charm"></span>
<li><a href="/about/">ABOUT</a></li>
- <li><a href="/blog/">BLOG</a></li>
<span class="line-charm"></span>
<li><a href="http://twitter.com/shiffman">TWITTER</a></li>
<li><a href="http://github.com/shiffman">GITHUB</a></li>
@@ -25,4 +23,4 @@
<span class="nav-btn small-show"><img src="/images/nav-btn.svg"/></span>
</div>
-<span class="mobile-quick-links">BOOKS AND VIDEOS</span>
+<span class="mobile-quick-links">BOOKS AND VIDEOS</span>
View
@@ -15,17 +15,24 @@ <h1 class="no-btm">{{ page.title }}</h1>
</div>
</section>
-
+
<section class="right-container quick-links out">
- <h5>LATEST POSTS</h5>
+ <h5>HIGHLIGHTED TUTORIALS</h5>
+
+ <div class="quick-link">
+ <a href="/p5/kinect/" class="secondary">Microsoft Kinect with Processing</a>
+ </div>
+
+
+ <!-- <h5>LATEST POSTS</h5>
{% for post in site.posts limit:25 %}
<div class="quick-link">
<a href="{{ post.url }}" class="secondary">{{ post.title }}</a>
</div>
{% endfor %}
<div class="quick-link">
<a href="/blog.html" class="secondary">SEE ALL</a>
- </div>
+ </div> -->
</section>
<script src="/js/blog.js"></script>
View
@@ -1,7 +1,7 @@
var apiKey = "AIzaSyADOKEHZag2UMG52bd7ApxDOssdzVo0j8I";
var shiffmanChannelId = "UCvjgXvBlbQiydffZU7m1_aw";
// Change playlist IDs Here
-var shiffmanPlaylists = "PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA,PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX,PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r,PLRqwX-V7Uu6ZMlWHdcy8hAGDy6IaoxUKf,PLRqwX-V7Uu6atTSxoRiVnSuOn6JHnq2yV,PLRqwX-V7Uu6YVljJvFRCyRM6mmF5wMPeE";
+var shiffmanPlaylists = "PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH,PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA,PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX,PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r,PLRqwX-V7Uu6ZMlWHdcy8hAGDy6IaoxUKf,PLRqwX-V7Uu6atTSxoRiVnSuOn6JHnq2yV,PLRqwX-V7Uu6YVljJvFRCyRM6mmF5wMPeE";
$(document).ready(function(){
@@ -51,30 +51,30 @@ function populateData(data){
$.each(data.items, function(index, item){
if(index == 4) {
-
+
return false
-
+
} else {
-
+
var vidSnip = item.snippet;
var html = '<a class="video" href="http://youtube.com/video/'+vidSnip.resourceId.videoId+'" target="_blank">'+
'<div class="thumbnail"><img src="'+vidSnip.thumbnails.medium.url+'" /></div>'+
'<span class="video-label">'+vidSnip.title+'</span>'+
'<span class="watch-button">WATCH VIDEO</span>'
'</a>';
-
+
playlistHtml = playlistHtml + html;
-
+
}
});
-
+
buildBlock(playlistHtml);
}, 'JSON');
function buildBlock(playlistList) {
-
+
var block = $(
'<div class="video-playlist">'+
'<span class="line-charm"></span>'+
@@ -87,12 +87,12 @@ function populateData(data){
'</div>'+
'</div>'
);
-
+
$('#video-list').append(block);
-
+
}
-
+
});
-}
+}
View
@@ -6,7 +6,7 @@
<section class="left-container teaching out">
<div class="logo-set">
<h2>Learning</h2>
- <p class="intro">In addition to the many <a href="/videos/">video tutorials you can watch on YouTube</a>, here you'll find some additional written tutorials and resources.</p>
+ <p class="intro">In addition to the <a href="/videos/">video tutorials on YouTube</a>, here you'll find some additional written tutorials and resources.</p>
</div>
<div class="content-wrapper article">
<!-- <span class="line-charm"></span>
@@ -31,9 +31,9 @@
<img src="/images/atoz.png" width="800">
This course focuses on programming strategies and techniques behind procedural analysis and generation of text-based data. We'll explore topics ranging from evaluating text according to its statistical properties to the automated production of text with probabilistic methods to text visualization. Students will learn server-side and client-side JavaScript programming and develop projects that can be shared and interacted with online. There will be weekly homework assignments as well as a final project.
</p>
- <a href="http://shiffman.github.io/A2Z-F15/" class="body-link primary">Notes and examples from the course website</a>
- <a href="http://shiffman.github.io/A2Z-F15/" class="body-link primary">Notes and examples from the course website 2</a>
-
+ <a href="http://shiffman.github.io/A2Z-F16/" class="body-link primary">2016 course website</a>
+ <a href="http://shiffman.github.io/A2Z-F15/" class="body-link primary">2015 course website</a>
+
</div>
</section>
@@ -72,4 +72,16 @@
<div class="quick-link">
<a href="https://github.com/shiffman/Most-Pixels-Ever-Processing" target="_blank" class="secondary">Most Pixels Ever</a>
</div>
-</section>
+
+ <br>
+ <h5>OLD BLOG POSTS</h5>
+ {% for post in site.posts limit:25 %}
+ <div class="quick-link">
+ <a href="{{ post.url }}" class="secondary">{{ post.title }}</a>
+ </div>
+ {% endfor %}
+ <div class="quick-link">
+ <a href="/blog.html" class="secondary">SEE ALL</a>
+ </div>
+
+</section>
View
@@ -3,19 +3,19 @@ title: Getting Started with Kinect and Processing
author: Daniel
layout: post
dsq_thread_id:
- -
+ -
pvc_views:
- 149402s
dsq_needs_sync:
- 1
---
-<p><iframe src="https://player.vimeo.com/video/132727296" width="500" height="217" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <a href="https://vimeo.com/132727296"><br/>Open Kinect for Processing Demo</a> from <a href="https://vimeo.com/shiffman">shiffman</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
+<p><iframe width="560" height="315" src="https://www.youtube.com/embed/QmVNgdapJJM?list=PLRqwX-V7Uu6ZMlWHdcy8hAGDy6IaoxUKf" frameborder="0" allowfullscreen></iframe></p>
# Kinect and Processing
-The Microsoft Kinect sensor is a peripheral device (designed for XBox and windows PCs) that functions much like a webcam. However, in addition to providing an RGB image, it also provides a depth map. Meaning for every pixel seen by the sensor, the Kinect measures distance from the sensor. This makes a variety of computer vision problems like background removal, blob detection, and more easy and fun!
+The Microsoft Kinect sensor is a peripheral device (designed for XBox and windows PCs) that functions much like a webcam. However, in addition to providing an RGB image, it also provides a depth map. Meaning for every pixel seen by the sensor, the Kinect measures distance from the sensor. This makes a variety of computer vision problems like background removal, blob detection, and more easy and fun!
The Kinect sensor itself only measures color and depth. However, once that information is on your computer, lots more can be done like "skeleton" tracking (i.e. detecting a model of a person and tracking his/her movements). To do skeleton tracking you'll need to use Thomas Lengling's windows-only [Kinect v2 processing libray](https://github.com/ThomasLengeling/KinectPV2). However, if you're on a Mac and all you want is raw data from the Kinect, you are in luck! This library uses [libfreenect](https://github.com/OpenKinect/libfreenect) and [libfreenect2](https://github.com/OpenKinect/libfreenect2) open source drivers to access that data for Mac OS X ([windows support coming soon](https://github.com/shiffman/OpenKinect-for-Processing/issues/13)).
@@ -101,7 +101,7 @@ Once you’ve done this you can begin to access data from the kinect sensor. Cu
Let’s look at these one at a time. If you want to use the Kinect just like a regular old webcam, you can access the video image as a [PImage](http://processing.org/reference/PImage.html)!
{% highlight java %}
-PImage img = kinect.getVideoImage();
+PImage img = kinect.getVideoImage();
image(img, 0, 0);
{% endhighlight %}
@@ -188,7 +188,7 @@ There are four basic examples for both v1 and v2.
### Display RGB, IR, and Depth Images
-<iframe src="https://player.vimeo.com/video/132727296" width="500" height="217" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/FBmxc4EyVjs?list=PLRqwX-V7Uu6ZMlWHdcy8hAGDy6IaoxUKf" frameborder="0" allowfullscreen></iframe>
Code for v1:[RGBDepthTest](https://github.com/shiffman/OpenKinect-for-Processing/blob/master/OpenKinect-Processing/examples/Kinect_v1/RGBDepthTest/RGBDepthTest.pde)</p>
@@ -206,7 +206,7 @@ Code for v2:[MultiKinect2](https://github.com/shiffman/OpenKinect-for-Processing
### Point Cloud
-<iframe src="http://player.vimeo.com/video/18058700?title=0&amp;byline=0&amp;portrait=0&amp;color=ff9933" width="501" height="282" frameborder="0"></iframe>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/E1eIg54clGo?list=PLRqwX-V7Uu6ZMlWHdcy8hAGDy6IaoxUKf" frameborder="0" allowfullscreen></iframe>
Code for v1: [PointCloud](https://github.com/shiffman/OpenKinect-for-Processing/blob/master/OpenKinect-Processing/examples/Kinect_v1/PointCloud/PointCloud.pde)</p>
@@ -266,7 +266,7 @@ Finally, we can draw some points based on the depth values in meters:
The real magic of the kinect lies in its computer vision capabilities. With depth information, you can do all sorts of fun things like say: "the background is anything beyond 5 feet. Ignore it!" Without depth, background removal involves all sorts of painstaking pixel comparisons. As a quick demonstration of this idea, here is a very basic example that compute the average xy location of any pixels in front of a given depth threshold.
-<iframe src="http://player.vimeo.com/video/18750684?title=0&amp;byline=0&amp;portrait=0&amp;color=ff9933" width="500" height="313" frameborder="0"></iframe>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/Kr4s5sLoROY?list=PLRqwX-V7Uu6ZMlWHdcy8hAGDy6IaoxUKf" frameborder="0" allowfullscreen></iframe>
Source for v1: [AveragePointTracking](https://github.com/shiffman/OpenKinect-for-Processing/tree/master/OpenKinect-Processing/examples/Kinect_v1/AveragePointTracking)
@@ -304,9 +304,10 @@ if (count != 0) {
## What’s missing?
+
* Everything is being tracked [via github issues](https://github.com/shiffman/OpenKinect-for-Processing/issues).
## FAQ
+
1. What are there shadows in the depth image (v1)? [Kinect Shadow diagram](http://media.zero997.com/kinect_shadow.pdf)
2. What is the range of depth that the kinect can see? (v1) ~0.7–6 meters or 2.3–20 feet. Note you will get black pixels (or raw depth value of 2048) at both elements that are too far away and too close.
-
View
@@ -6,27 +6,30 @@
<section class="left-container video-page out">
<div class="logo-set">
<h2>Videos</h2>
- <span class="intro">I make tutorial videos about Processing (Java), p5.js (JavaScript), and related topics (node.js, computer vision, raspberry pi, and more).</span>
+ <span class="intro">I make tutorial videos about Processing (Java), p5.js (JavaScript), and related topics (node.js, computer vision, raspberry pi, and more). Please consider <a href="https://www.youtube.com/subscription_center?add_user=shiffman" target="_blank">subscribing on youtube</a> and <a href="http://patreon.com/codingrainbow" target="_blank">supporting my work on Patreon</a>.</span>
</div>
<div id="video-list" class="content-wrapper article">
-
+
</div>
<div class="more-videos content-wrapper article">
<div class="line-charm"></div>
- <h2>See all videos on YouTube</h2>
- <p>All of Daniel's video courses can be found on YouTube</p>
- <a href="http://youtube.com/shiffman" target="_blank" class="btn primary">SEE ALL COURSES ON YOUTUBE</a>
+ <h2>YouTube</h2>
+ <p>All video tutorials can be found on my "Coding Rainbow" YouTube channel.</p>
+ <a href="http://youtube.com/shiffman" target="_blank" class="btn primary">CODING RAINBOW ON YOUTUBE</a>
</div>
</section>
<section class="right-container quick-links video out">
<h5>QUICK LINKS</h5>
<div class="quick-link">
- <a href="https://www.youtube.com/subscription_center?add_user=shiffman" class="primary"><img src="/images/icon-youtube.png" class="icon"/><span>SUBSCRIBE TO SHIFFMAN ON YOUTUBE</span></a>
+ <a href="https://www.youtube.com/subscription_center?add_user=shiffman" target="_blank" class="primary"><img src="/images/icon-youtube.png" class="icon"/><span>SUBSCRIBE ON YOUTUBE</span></a>
+ </div>
+ <div class="quick-link">
+ <a href="http://patreon.com/codingrainbow" class="secondary" target="_blank"><span>SUPPORT ON PATREON</span></a>
</div>
<div class="quick-link">
- <a href="https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw" class="secondary">SEE ALL ON YOUTUBE</a>
+ <a href="https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw" target="_blank" class="secondary">SEE ALL ON YOUTUBE</a>
</div>
</section>
-<script src="/js/youtube.js"></script>
+<script src="/js/youtube.js"></script>

0 comments on commit 12e5988

Please sign in to comment.