<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom">
	<channel>
      <title>Tagged with distsq() - Processing 2.x and 3.x Forum</title>
      <link>https://forum.processing.org/two/discussions/tagged/feed.rss?Tag=distsq%28%29</link>
      <pubDate>Sun, 08 Aug 2021 19:04:37 +0000</pubDate>
         <description>Tagged with distsq() - Processing 2.x and 3.x Forum</description>
   <language>en-CA</language>
   <atom:link href="/two/discussions/taggeddistsq%28%29/feed.rss" rel="self" type="application/rss+xml" />
   <item>
      <title>How to draw with color tracking?</title>
      <link>https://forum.processing.org/two/discussion/25866/how-to-draw-with-color-tracking</link>
      <pubDate>Mon, 08 Jan 2018 05:31:41 +0000</pubDate>
      <dc:creator>sph_831</dc:creator>
      <guid isPermaLink="false">25866@/two/discussions</guid>
      <description><![CDATA[<p>Hello,</p>

<p>I watched a lot of Daniel Shiffman tutorials and wanted to write a piece of code that draws out the path in which a certain color moves across the screen in my video. Lets say if my video were a skateboard, and I did a trick with color wheels on, I'd like to have the program draw the movement by following the colored wheels throughout it's movement.</p>

<p>What I have so far:</p>

<pre><code>// Most of this code I learned how to write thanks to Daniel Shiffman

import processing.video.*;

Movie video;

color trackColor; 
float threshold = 20;
float distThreshold = 75;

ArrayList&lt;Blob&gt; blobs = new ArrayList&lt;Blob&gt;();

void setup() {
  size(1080, 720);
  video = new Movie(this, "sk8.mov");
  video.loop();
  trackColor = color(206, 74, 129);
}

void movieEvent(Movie video) {
  video.read();
}

void keyPressed() {
  if (key == 'a') {
    distThreshold++;
  } else if (key == 'z') {
    distThreshold--;
  }
  println(distThreshold);
}

void draw() {
  video.loadPixels();
  image(video, 0, 0);

  blobs.clear();

  threshold = 62;

  for (int x = 0; x &lt; video.width; x++ ) {
    for (int y = 0; y &lt; video.height; y++ ) {
      int loc = x + y * video.width;
      color currentColor = video.pixels[loc];
      float r1 = red(currentColor);
      float g1 = green(currentColor);
      float b1 = blue(currentColor);
      float r2 = red(trackColor);
      float g2 = green(trackColor);
      float b2 = blue(trackColor);

      float d = distSq(r1, g1, b1, r2, g2, b2); 

      if (d &lt; threshold*threshold) {

        boolean found = false;
        for (Blob b : blobs) {
          if (b.isNear(x, y)) {
            b.add(x, y);
            found = true;
            break;
          }
        }

        if (!found) {
          Blob b = new Blob(x, y);
          blobs.add(b);
        }
      }
    }
  }

  for (Blob b : blobs) {
    if (b.size() &gt; 500) {
      b.show();
    }
  }
}


float distSq(float x1, float y1, float x2, float y2) {
  float d = (x2-x1)*(x2-x1) + (y2-y1)*(y2-y1);
  return d;
}

void mousePressed() {
  // Save color where the mouse is clicked in trackColor variable
  int loc = mouseX + mouseY*video.width;
  trackColor = video.pixels[loc];
}
class Blob {
  float minx;
  float miny;
  float maxx;
  float maxy;

  Blob(float x, float y) {
    minx = x;
    miny = y;
    maxx = x;
    maxy = y;
  }

  void show() {
    stroke(0);
    fill(255);
    strokeWeight(2);
    rectMode(CORNERS);
    rect(minx, miny, maxx, maxy);
  }

  void add(float x, float y) {
    minx = min(minx, x);
    miny = min(miny, y);
    maxx = max(maxx, x);
    maxy = max(maxy, y);
  }

  float size() {
    return (maxx-minx)*(maxy-miny); 
  }

  boolean isNear(float x, float y) {
    float cx = (minx + maxx) / 2;
    float cy = (miny + maxy) / 2;

    float d = distSq(cx, cy, x, y);
    if (d &lt; distThreshold*distThreshold) {
      return true;
    } else {
      return false;
    }
  }
}
</code></pre>

<p>What this code successfully does is track the color of the wheels on my skateboard, and follows the wheels throughout the clip. However, I am trying to figure out how to make it not just follow the wheels, but draw a line in the path where the wheels were before.</p>

<p>Any help would be greatly appreciated.</p>

<p>Thank you</p>
]]></description>
   </item>
   </channel>
</rss>