Gabi

Paper Programs

?

Paper

Program

Whaaat?

1st.

2nd.

and so on....

Community

Interact

Learn

Have fun

A video with the activity from dynamicland community.

?

So? How does it work?

Hardware components

A video camera/webcam to interpret the PP

A PC where the database and the server are living

A video projector which displays the result for the code that has been executed.

Write the code that should display something in the canvas context.

Generate and print the PP

The camera will interpret the program by its bullets color and position

We see this:

But the camera sees this:

Context

4 points to set the context

//transform the X / Y position into pixel position of each calibration point
let knobPoints = [{x: 0, y: 0}, {x: 1, y: 0}, {x: 1, y: 1}, {x: 0, y: 1}].map(mapToKnobPointMatrix);
//results is Region Of Interest
let roi = cv.roi(knobPoints);
//then scan

const knotsPos = [
    0: {x: 0.1722506054577151, y: 0.03212914963821511}
    1: {x: 0.9818725844001396, y: 0.034954314912706196}
    2: {x: 0.9908608620371012, y: 0.9261368735999805}
    3: {x: 0.18352770381014225, y: 0.9009349188435258}
];

const corners = [
    {x: 0, y: 0} //TL
    {x: 1, y: 0} //TR
    {x: 1, y: 1} //BR
    {x: 0, y: 1} //BL
];

Context Points

ROI

//find contours
let contours = cv.findContours(knobToPoints);

//find contour Area
let contourArea = cv.contourArea(contour);

Contour

Image befor contour process

Image after contour process

//segment details in pixel units
{ x, y, width, height }

//find contured segment area
let area = cv.arcLength(area);

Segment

Samples of segments that been selected

Segment data which we need to use later.

Filter Areas

Circularity

Color


const ratio = 4 * cv.CV_PI * area / (perimeter * perimeter);

if (ratio < minCircularity || ratio >= maxCircularity) continue;

if (params.filterByColor) {
    //check color from circle (1, 2, 3)
  if (binImg.ucharAt(Math.round(center.loc.y), Math.round(center.loc.x)) != param.blobColor) {
    continue;
  }
}

We will process the areas in order to have only the areas that we need. These two are one of several filters that we need to detect colored bullets

Filtered dots

//find contours
let contour = cv.findContours(knobToPoints);

//find contured perimeter area
let area = cv.arcLength(area);

//Details
{ x, y, width, height }

let colorIndex = colorIndexForColor(keyPoint.avgColor, config.colorsRGB);

New dot context

Index the position of the color in an matrix based on 7 fields with 4 dimensions < > TL , TR , BL , BR

Detect the vector orientation

Codes based on indexes

Program detected!!! (ID 179)

How program looks in the camera component

The program with ID 179 is detected

Program ID and position

Send to Projector

We get the program based on the ID and with the processed data it will be sent to the projector component

The program which we fetched from the DB and with the data that has been processed (position X/Y and width/height) we will tell the projector what, where and how big to render.

Projection

This is what it is rendered in the canvas

The program will be projected on the PP

Projection on a paper

The result

Resources

Detect circle 2nd way:

https://docs.opencv.org/2.4/doc/tutorials/imgproc/imgtrans/hough_circle/hough_circle.html

Detect contour: https://docs.opencv.org/2.4/doc/tutorials/imgproc/shapedescriptors/find_contours/find_contours.html

Detect color:

https://solarianprogrammer.com/2015/05/08/detect-red-circles-image-using-opencv/

Live App: https://paperprograms.org/

Github Repo: https://github.com/janpaul123/paperprograms

Community homepage: https://dynamicland.org/

Detect circle based on contour perimeter area: https://docs.opencv.org/3.1.0/dd/d49/tutorial_py_contour_features.html