Rotation of a puzzle by color detection through my webcam? [hard]

Core Library Questions

victoryma..

Rotation of a puzzle by color detection through my webcam? [hard]

in Core Library Questions • 1 year ago

Hello my dear (wish I could say fellow) Processing Pro's out there!

First of all, I'd like to start with letting you all know that I'm almost entirely new to Processing, a.k.a. a total noob.

Second, Processing is required for my study.

Third, I'm from Holland so if I'm not completely clear with my questions or explanations, please say so!

What's the idea?

We had to create a concept for a processing project. What did I create:

With the code in this post you're screen will be filled with a webcam feed on the left side and a rotary puzzle on the right side. This rotary puzzle consists out of 5 circles which move independently from eachother.

At this very moment you can solve this puzzle using your UP, DOWN, LEFT and RIGHT arrow keys.

It looks, in my opinion, pretty neat so far.

However, we need to create some sort of interface through the webcam (that was the main assignment).

So what I want to do is to be able to rotate the puzzle pieces by holding my hand in front of the cam.

The selection of which inner or outer circle you'll be rotating will still be done with the UP & DOWN arrow keys.

The rotation, however, has to be done by hand as I said.

I was thinking of doing this by wearing a glove or holding an object with a Red and a Blue section.

So what I need (atleast that's what I think I need ) is something that recognizes/detects those colors (color detection), and calculates the distance and angle between them. Then I need to link this webcam feed to the puzzle. So when I rotate my hand or the object with the two colors in front of the camera, the puzzle will rotate as well.

This is our current code (that still works with the arrow keys):

import processing.serial.*;
import ddf.minim.*;
import processing.video.*;
Capture cam;
PImage spiegel;
AudioPlayer klik, roterendeklik, succes, verkeerd;
Minim minim;
Movie myMovie;
int counter, counter2 = 0;
int stage = 0;
PImage[] puzzles;
PImage[] masks;
PImage backdrop, intro, einde;
PImage pijllinks, pijlrechts, pijl2, pijl1;
int selection = 4;
int[] rads = {
-40, 200, 20, 60, 60
};
void setup() {
minim = new Minim(this);
klik = minim.loadFile("klik.mp3");
roterendeklik = minim.loadFile("roterendeklik.mp3");
succes = minim.loadFile("succes.mp3");
verkeerd = minim.loadFile("verkeerd.mp3");
imageMode(CENTER);
intro = loadImage("intro.jpg");
einde = loadImage("einde.jpg");
puzzles = new PImage[5];
masks = new PImage[5];
for ( int t=0; t < 5; t++ ) {
puzzles[t] = loadImage("puzzle" + str( t+1 ) + ".jpg");
masks[t] = loadImage("puzzle" + str( t+1 ) + "mask.jpg");
}
pijllinks = loadImage("pijl_links.png");
pijlrechts = loadImage("pijl_rechts.png");
pijl1 = loadImage("pijl_omhoog.png");
pijl2 = loadImage("pijl_omlaag.png");
size(1200, 700, P2D);
cam = new Capture(this, 500, 480, 60);
spiegel = createImage (500, 480, RGB);
}
void draw() {
switch(stage) {
case 0:
background(0, 0, 0);
image(intro, 700, height/2);
break;
case 1:
background(0, 0, 0);
image(pijllinks, 75, 350);
image(pijlrechts, 485, 350);
image(pijl1, 275, 155);
image(pijl2, 275, 545);
if (cam.available() == true) {
cam.read();
}
cam.loadPixels();
for (int i = 0; i <cam.pixels.length; i++) {
spiegel.pixels[i] = cam.pixels[cam.width + (cam.width*(i/cam.width)) - 1 - iÊm.width]; //hier gebeurd de spiegel magie.
}
spiegel.updatePixels();
image(spiegel, 280, height/2);
for ( int t = 0; t < rads.length; t++ ) {
rads[t]%=360;
}
selection = constrain( selection, 0, 4 );
for ( int t = 4; t >= 0; t-- ) {
pushMatrix();
translate(850, height/2);
tint(255, (selection==t)?255:153);
rotate(radians(rads[t]));
puzzles[t].mask(masks[t]);
image(puzzles[t], 0, 0);
popMatrix();
}
break;
case 2:
fill(0, 10);
rectMode(CORNER);
rect(0, 0, width, height);
counter++;
if (counter > 10) {
stage = 3;
}
break;
case 3:
background(0);
image(einde, 700, height/2);
break;
case 4:
rectMode(CORNER);
fill(0, 0, 0);
rect(0, 0, width, height);
selection = 4;
rads[0] = -40;
rads[1] = 200;
rads[2] = 20;
rads[3] = 60;
rads[4] = 60;
counter = 0;
counter2 = 0;
stage = 0;
break;
}
}
void keyPressed() {
switch(stage) {
case 0:
if (key == ' ') {
stage = 1;
}
break;
case 1:
if (key == CODED) {
if (keyCode == DOWN) {
roterendeklik.play();
selection++;
roterendeklik.rewind();
}
if (keyCode == UP) {
roterendeklik.play();
selection--;
roterendeklik.rewind();
}
if (keyCode == RIGHT) {
klik.play();
switch( selection ) {
case 0:
rads[0]+=10;
break;
case 1:
rads[1]+=10;
break;
case 2:
rads[2]+=10;
break;
case 3:
rads[3]+=10;
break;
case 4:
rads[4]+=10;
break;
}
klik.rewind();
}
else if (keyCode == LEFT) {
klik.play();
rads[selection]-=10;
klik.rewind();
}
}
if (key == ENTER || key == RETURN) {
if (rads[0] == 0 && rads[1] == 0 && rads[2] == 0 && rads[3] == 0 && rads[4] == 0) {
stage = 2;
succes.play();
delay(2000);
succes.rewind();
}
else {
verkeerd.play();
delay(1000);
verkeerd.rewind();
}
}
break;
case 3:
if (key == ENTER || key == RETURN) {
stage = 4;
}
}
}

And this is a code I found about the calculating part:

float pangle, angle;
color bg;
int px,py;
void setup(){
size(200,200);
bg = rcolor();
px = int(random( 50,150 ));
py = int(random( 50,150 ));
}
void draw(){
background(bg);
line(px,py, mouseX, mouseY);
angle = int(degrees(HALF_PI+atan2( mouseY-py, mouseX-px )))/10;
if( angle != pangle ){
println( angle );
bg = rcolor();
pangle = angle;
}
}
color rcolor(){
return color( random(255),random(255),random(255) );
}

The question about this code is, is how the hell do I combine it with my own code?

And I think the color detection part comes first..

But I can't really find a color detection code that detects TWO colors..

The only ones out there find ONE color..

And if someone out here does find a code that detects two colors, it'll be very helpful BUT what I really need to know then is how to combine it with my current code..

So.. any help is appreciated.

I really hope anyone out there can help me out with this.

My deadline is Thursday and there has been some unexpected situations that slowed me down on this, this week.

Thanks alot all!

Replies(90)

calsign

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Huh... I wanted to test your code, but came across an error complaining about a random backslash. I figured it referred to the fancy E character you have in this variable: iÊm, on line 70...

I'd like to help you, but I sort of wanted to see what you had first...

tfguy44

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

... Are you serious?

First of all, that code that you've posted... Sure, some of it is based on what you had, but don't take all the credit. What you have there is my cleaned up version of code from a thread from like a week ago, posted under a different name, which I can no longer find (I assume that means you deleted the thread). As for your second block of code, that's an example I wrote for you to show you how you could, given two points, detect the change in the angle of the line between them, and use that change to trigger some other event.

Basically, what you have posted there is not your code. It's my code. It even has the same weird E in it.
And now you're back again trying to get someone to just do your assignment for you. It's not going to happen.
I had posted what you needed to do in the last thread (which is now deleted).

Let me reiterate it for you:

At about line 68, remember, in two variables, the indexes for the best pixels found so far. Maybe position 0 would be a good starting point.
Notice that you are looking for TWO indexes. So you want TWO variables to remember the best ones.
You might name them bestIndexRed and bestIndexBlue.
Iterate through the pixel array (line 69) for the image the cam sees.

Compare each pixel in that image to see if it is a better match than the currently best pixels.
Update the best index if you find a pixel that's a better match.
Now that you know the indexes of the two pixels that match the best, find their positions.

Here's a big hint:
bestX = bestIndex %image.width;

bestY = bestIndex / image.width;
Now you know the two best positions.
Try drawing a line between them. (Like I did on line 13 of the second block of code above).
Find the angle the line makes (Line 14).
Compare it with the previous angle... Well, now you're copying the second example, aren't you?

Use it's logic to work out how much the angle has changed.
When it has changed enough, call a modified version of keyPressed:
void doControl( int whichControl ){
if( whichControl == 0 ){ // THIS MEANS "UP"
// do whatever up does...
} else if (whichControl == 1 ){ /// THIS MEANS "LEFT"
// do whatever left does. ETC.

This is the third time I've tried to help you. Now you need to ACTUALLY DO SOME WORK. So far I have seen you do NOTHING except POST SAMPLE CODE and RIP OFF EXAMPLE THAT I'VE GIVEN YOU. If you need specific lines of code explained, ASK.

NO ONE IS GOING TO HELP YOU FURTHER UNTIL YOU HAVE TRIED TO DO IT YOURSELF.

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

tfguy44!

I know it's the improved version by you.

However, our own code already worked almost the same, you re-wrote it with arrays which we didn't use. It didn't change what the actual code did?

What you did was very helpful, and for what we are still very thankful.

As you may see, I only said, this is our current code..

I'm sorry if I had to refer to you for helping us in the beginning.

And the other code I found thanks to you. So I'm sorry again if I didn't refer to you.

Now about the trying to do it myself part..

I've been trying this for TWO ENTIRE days but I can't find ANYthing that's closely related to this.

And no one at school can help! I just don't know where to start.

So I decided to re-write the topic in a more clear way, hoping from some extra HELP and NOT someone who can write the code for me. Don't be mad please.

I'm just stuck. Not a clue how to combine several codes, as I said before, I'm a noob at Processing and this is very hard assignment. I do NOT want people to do this for me. I just need some sort of tip that gives me the right direction (as Calsign did in my other post). So I can figure this out myself, but with some guidance of you guys.

I did NOT mean to make you angry in any way. I am still VERY thankful for your previous help.

Thanks for your new big hint!

I'll try to work with it and I'll repost what I've done, hopefully you're not mad and you'd like to help me.. As I said before, there's no one else besides this forum that can help me..

@Calsign..

Maybe the code doesn't work cause there's images involved. If you'd like, I can send you an e-mail with .zip that includes a file with everything I need for my code to work?

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

So..

In this part?

cam.loadPixels();
for (int i = 0; i <cam.pixels.length; i++) {
spiegel.pixels[i] = cam.pixels[cam.width + (cam.width*(i/cam.width)) - 1 - iÊm.width]; //hier gebeurd de spiegel magie.
}

I don't get it, I don't know what you mean with two variables and starting with 0 as a good point.

I'm sorry that I don't get it.

tfguy44

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

You need two variables to remember which indexes in the pixels array are the ones that you want. As you check each pixel in the cam's image, you can remember a new index if the new pixel is a better match.

cam.loadPixels(); // This loads the pixel array.
int bestRedIndex = 0; // For remembering the index of the most red pixel.
int bestBlueIndex = 0; // For remembering the index of the most blue pixel.
for( int i = 0; i < cam.pixels.length ; i++ ){ // Now we look at each pixel in the image.
// This next line contains "IS MORE RED THAN", which is not real code!
// You will have to work out how to compare two pixels to see which one is more like the red point you're trying to find.
// I believe the pixel finding code you had before did that, right?
if( cam.pixels[i] IS MORE RED THAN cam.pixels[bestRedIndex] ){ // If the pixel we're looking at is more red
bestRedIndex = i; // Then this pixel is the better one.
}
// In the same manner, you can also look for the bluest pixel in the image.
if( cam.pixels[i] IS MORE BLUE THAN cam.pixels[bestBlueIndex] ){
// MISSING CODE: You should update the remembered best blue index here.
}
}
// So at this point, the variable bestRedIndex is the index in cam.pixels of the most-red pixel, assuming you worked out a way compare the colors of two pixels to find out which one is a better match.
// Now get the pixels' X and Y positions, which are based on their Indexes.
int bestRedX = bestRedIndex % cam.width;
int bestRedY = bestRedIndex / cam.width;
// MISSING CODE: Do the same for the blue ones.
// For now, let's draw a line:
stroke(0);
line( bestRedX, bestRedY, bestBlueX, bestBlueY );
// You should be able to keep going from here.

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

I mad this for the line between the two colors..

Any tips of how to combine it with the other code?

import processing.video.*;
Capture cam;
color trackColor = color(255,0,0);
color trackColor2 = color(0,0,255);
int x = 0;
int y = 0;
void setup() {
size(320,240);
cam = new Capture(this,320,240);
}
void draw() {
if (cam.available()) {
cam.read();
}
cam.loadPixels();
int bestRedindex = 0;
int bestBlueindex = 0;
float bestScore = 50000; // heel groot getal
for (int i = 0; i < cam.pixels.length; i ++ ) {
float distance = colorDist(cam.pixels[i], trackColor);
if (distance < bestScore) {
bestScore = distance;
bestRedindex = i;
}
}
for (int t = 0; t < cam.pixels.length; t ++ ) {
float distance = colorDist(cam.pixels[t], trackColor2);
if (distance < bestScore) {
bestScore = distance;
bestBlueindex = t;
}
}
image(cam,0,0);
//fill(trackColor);
//fill(trackColor2);
int bestRedX = bestRedindex % cam.width;
int bestRedY = bestRedindex / cam.width;
int bestBlueX = bestBlueindex % cam.width;
int bestBlueY = bestBlueindex / cam.width;
stroke(0);
line(bestRedX, bestRedY, bestBlueX, bestBlueY);
}
float colorDist(color c1, color c2){
return dist(red(c1), green(c1), blue(c1), red(c2), green(c2), blue(c2));
}

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Oh and I tried to get the most blue and red pixel with your example and I ended up with a syntax error.

So I'm making mistakes combining the codes..

import processing.serial.*;
import ddf.minim.*;
import processing.video.*;
Capture cam;
PImage spiegel;
AudioPlayer klik, roterendeklik, succes, verkeerd;
Minim minim;
Movie myMovie;
int counter, counter2 = 0;
int stage = 0;
PImage[] puzzles;
PImage[] masks;
PImage backdrop, intro, einde;
PImage pijllinks, pijlrechts, pijl2, pijl1;
int selection = 4;
int[] rads = {
-40, 200, 20, 60, 60
};
void setup() {
minim = new Minim(this);
klik = minim.loadFile("klik.mp3");
roterendeklik = minim.loadFile("roterendeklik.mp3");
succes = minim.loadFile("succes.mp3");
verkeerd = minim.loadFile("verkeerd.mp3");
imageMode(CENTER);
intro = loadImage("intro.jpg");
einde = loadImage("einde.jpg");
puzzles = new PImage[5];
masks = new PImage[5];
for ( int t=0; t < 5; t++ ) {
puzzles[t] = loadImage("puzzle" + str( t+1 ) + ".jpg");
masks[t] = loadImage("puzzle" + str( t+1 ) + "mask.jpg");
}
pijllinks = loadImage("pijl_links.png");
pijlrechts = loadImage("pijl_rechts.png");
pijl1 = loadImage("pijl_omhoog.png");
pijl2 = loadImage("pijl_omlaag.png");
size(1200, 700, P2D);
cam = new Capture(this, 500, 480, 60);
spiegel = createImage (500, 480, RGB);
}
void draw() {
switch(stage) {
case 0:
background(0, 0, 0);
image(intro, 700, height/2);
break;
case 1:
background(0, 0, 0);
image(pijllinks, 75, 350);
image(pijlrechts, 485, 350);
image(pijl1, 275, 155);
image(pijl2, 275, 545);
if (cam.available() == true) {
cam.read();
}
cam.loadPixels(); //dit laad de pixel array
int bestRedIndex = 0; //onthouden van de meest rode pixel
int bestBlueIndex = 0; //onthouden van de meest blauwe pizel
for (int i = 0; i <cam.pixels.length; i++) { //gekeken naar elke pixel in de image
if (cam.pixels[i] cam.pixels[bestRedIndex] ) { // als de pixel waar we naar kijken roder is
bestRedIndex = i; //dan is dit de betere pixel
}
if (cam.pixels[i] cam.pixels[bestBlueIndex] ) { //als de pixel waar we naar kijken blauwer is
bestBlueIndex = i; //dan is dit de betere pixel
}
spiegel.pixels[i] = cam.pixels[cam.width + (cam.width*(i/cam.width)) - 1 - i%cam.width]; //hier gebeurd de spiegel magie.
}
spiegel.updatePixels();
image(spiegel, 280, height/2);
for ( int t = 0; t < rads.length; t++ ) {
rads[t]%=360;
}
selection = constrain( selection, 0, 4 );
for ( int t = 4; t >= 0; t-- ) {
pushMatrix();
translate(850, height/2);
tint(255, (selection==t)?255:153);
rotate(radians(rads[t]));
puzzles[t].mask(masks[t]);
image(puzzles[t], 0, 0);
popMatrix();
}
break;
case 2:
fill(0, 10);
rectMode(CORNER);
rect(0, 0, width, height);
counter++;
if (counter > 10) {
stage = 3;
}
break;
case 3:
background(0);
image(einde, 700, height/2);
break;
case 4:
rectMode(CORNER);
fill(0, 0, 0);
rect(0, 0, width, height);
selection = 4;
rads[0] = -40;
rads[1] = 200;
rads[2] = 20;
rads[3] = 60;
rads[4] = 60;
counter = 0;
counter2 = 0;
stage = 0;
break;
}
}
void keyPressed() {
switch(stage) {
case 0:
if (key == ' ') {
stage = 1;
}
break;
case 1:
if (key == CODED) {
if (keyCode == DOWN) {
roterendeklik.play();
selection++;
roterendeklik.rewind();
}
if (keyCode == UP) {
roterendeklik.play();
selection--;
roterendeklik.rewind();
}
if (keyCode == RIGHT) {
klik.play();
switch( selection ) {
case 0:
rads[0]+=10;
break;
case 1:
rads[1]+=10;
break;
case 2:
rads[2]+=10;
break;
case 3:
rads[3]+=10;
break;
case 4:
rads[4]+=10;
break;
}
klik.rewind();
}
else if (keyCode == LEFT) {
klik.play();
rads[selection]-=10;
klik.rewind();
}
}
if (key == ENTER || key == RETURN) {
if (rads[0] == 0 && rads[1] == 0 && rads[2] == 0 && rads[3] == 0 && rads[4] == 0) {
stage = 2;
succes.play();
delay(2000);
succes.rewind();
}
else {
verkeerd.play();
delay(1000);
verkeerd.rewind();
}
}
break;
case 3:
if (key == ENTER || key == RETURN) {
stage = 4;
}
}
}

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Forget previous replies, this is my try:

import processing.serial.*;
import ddf.minim.*;
import processing.video.*;
Capture cam;
PImage spiegel;
color trackColor = color(255,0,0);
color trackColor2 = color(0,0,255);
AudioPlayer klik, roterendeklik, succes, verkeerd;
Minim minim;
Movie myMovie;
int counter, counter2 = 0;
int stage = 0;
PImage[] puzzles;
PImage[] masks;
PImage backdrop, intro, einde;
PImage pijllinks, pijlrechts, pijl2, pijl1;
int selection = 4;
int[] rads = {
-40, 200, 20, 60, 60
};
void setup() {
minim = new Minim(this);
klik = minim.loadFile("klik.mp3");
roterendeklik = minim.loadFile("roterendeklik.mp3");
succes = minim.loadFile("succes.mp3");
verkeerd = minim.loadFile("verkeerd.mp3");
imageMode(CENTER);
intro = loadImage("intro.jpg");
einde = loadImage("einde.jpg");
puzzles = new PImage[5];
masks = new PImage[5];
for ( int t=0; t < 5; t++ ) {
puzzles[t] = loadImage("puzzle" + str( t+1 ) + ".jpg");
masks[t] = loadImage("puzzle" + str( t+1 ) + "mask.jpg");
}
size(1200, 700, P2D);
cam = new Capture(this, 500, 480, 60);
spiegel = createImage (500, 480, RGB);
}
void draw() {
switch(stage) {
case 0:
background(0, 0, 0);
image(intro, 700, height/2);
break;
case 1:
background(0, 0, 0);
if (cam.available() == true) {
cam.read();
}
cam.loadPixels();
int bestRedindex = 0;
int bestBlueindex = 0;
float bestScore = 50000; // heel groot getal
for (int i = 0; i < cam.pixels.length; i ++ ) {
float distance = colorDist(cam.pixels[i], trackColor);
if (distance < bestScore) {
bestScore = distance;
bestRedindex = i;
}
}
for (int t = 0; t < cam.pixels.length; t ++ ) {
float distance = colorDist(cam.pixels[t], trackColor2);
if (distance < bestScore) {
bestScore = distance;
bestBlueindex = t;
}
}
for (int i = 0; i <cam.pixels.length; i++) {
spiegel.pixels[i] = cam.pixels[cam.width + (cam.width*(i/cam.width)) - 1 - i%cam.width]; //hier gebeurd de spiegel magie.
}
spiegel.updatePixels();
image(spiegel, 280, height/2);
int bestRedX = bestRedindex % cam.width;
int bestRedY = bestRedindex / cam.width;
int bestBlueX = bestBlueindex % cam.width;
int bestBlueY = bestBlueindex / cam.width;
stroke(0);
line(bestRedX, bestRedY, bestBlueX, bestBlueY);
for ( int t = 0; t < rads.length; t++ ) {
rads[t]%=360;
}
selection = constrain( selection, 0, 4 );
for ( int t = 4; t >= 0; t-- ) {
pushMatrix();
translate(850, height/2);
tint(255, (selection==t)?255:153);
rotate(radians(rads[t]));
puzzles[t].mask(masks[t]);
image(puzzles[t], 0, 0);
popMatrix();
}
break;
case 2:
fill(0, 10);
rectMode(CORNER);
rect(0, 0, width, height);
counter++;
if (counter > 10) {
stage = 3;
}
break;
case 3:
background(0);
image(einde, 700, height/2);
break;
case 4:
rectMode(CORNER);
fill(0, 0, 0);
rect(0, 0, width, height);
selection = 4;
rads[0] = -40;
rads[1] = 200;
rads[2] = 20;
rads[3] = 60;
rads[4] = 60;
counter = 0;
counter2 = 0;
stage = 0;
break;
}
}
void keyPressed() {
switch(stage) {
case 0:
if (key == ' ') {
stage = 1;
}
break;
case 1:
if (key == CODED) {
if (keyCode == DOWN) {
roterendeklik.play();
selection++;
roterendeklik.rewind();
}
if (keyCode == UP) {
roterendeklik.play();
selection--;
roterendeklik.rewind();
}
if (keyCode == RIGHT) {
klik.play();
switch( selection ) {
case 0:
rads[0]+=10;
break;
case 1:
rads[1]+=10;
break;
case 2:
rads[2]+=10;
break;
case 3:
rads[3]+=10;
break;
case 4:
rads[4]+=10;
break;
}
klik.rewind();
}
else if (keyCode == LEFT) {
klik.play();
rads[selection]-=10;
klik.rewind();
}
}
if (key == ENTER || key == RETURN) {
if (rads[0] == 0 && rads[1] == 0 && rads[2] == 0 && rads[3] == 0 && rads[4] == 0) {
stage = 2;
succes.play();
delay(2000);
succes.rewind();
}
else {
verkeerd.play();
delay(1000);
verkeerd.rewind();
}
}
break;
case 3:
if (key == ENTER || key == RETURN) {
stage = 4;
}
}
}
float colorDist(color c1, color c2){
return dist(red(c1), green(c1), blue(c1), red(c2), green(c2), blue(c2));
}

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Does it work? Where doesn't it work? What do you need? etc.

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Well, it kinda works.

What I tried with the last version of the code is to detect a red and a blue color on the screen at the same time and to connect those first with a straight line.

But since I mirrored the cam, the line mirrors too.

So when for example, it detects a red and blue color on the left side, the line is drawn on the right side, far away from the actual two points.

And that's just a start of what I need to do Chrisir.. (see the very beginning of this post)..

I'm kinda stressed out since my teammates failed and I'm alone at the moment!

I've got to finish this before tomorrow morning, and it has to work.

If it doesn't, I won't get my full points in the first year :( Which I've really been fighting for the entire year!

If you'd like me to send a .zip to you, please message me.

then you know what this code actually does and what I mean with what it has to be doing!;)

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

I can't help, because I don't have a cam

but put the zip on dropbox (or export the thing to openprocessing.org) so maybe somebody can help you

at the moment nobody can help because many pictures involved

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Aawwh mannn! That's a bummer. Haha.

Since you really give helpful information and you reply fast :)

I uploaded it in openprocessing:

http://www.openprocessing.org/sketch/64757

Do you think I should repost this to get more/new help?

This forum is my final/last chance haha.

Isn't there any chance you could help me without having a cam?

About combining the codes for color recognition, angles etc.?

Or do you happen to know another processing "pro" who could give me a hand?

Thanks alot though!

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

well, it doesn't run in openprocessing

How come?

calsign

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

We can't simply run your code because it requires external files, and the download isn't working...

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Oh.. I don't know! I thought I did it the right way..

I quickly created a dropbox account on which you guys can log in.

(with an old mail adress)

Here are the username and password:

Poker-ghost@live.nl

Foryouguys

It's the puzzel.zip you guys need :)

Can you guys open it?

calsign

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Okay... got everything downloaded and unzipped, but it appears that my version of QuickTime isn't installed correctly. Sorry, it's all on you, Chrisir...

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Do we need QuickTime for this?:O

Aawh.. Too bad. Thanks anyway Calsign!

Chrisir doesn't have a webcam. So that leaves nobody.

I'm not gonna make it by myself, so.. No clue what to do now.

Guess I won't make the full points this year :(

Anyways!

A THOUSAND thanks do both of you for helping me as far as you both could!!!

You guys are the best!

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Does the program Run at all?

Or do you get a simple error?

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Did you see my answer on the other thread regarding C?

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Yes it runs perfectly?

I don't get why it doesn't run with you guys?!

Yes I did! And I responded too didn't I? ;)

Thanks alot again Chrisir!

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Is your camera program finished then? Solved?

Or do you have questions about it?

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

no, I don't see an answer from you in the other thread

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

No it's far from finished.

I need to be able to rotate the puzzle on the right by rotating two points on the webcam screen..

For example a glove with a red and a blue finger.

When I rotate my hand in front of the camera the puzzle has to rotate the same way..

I can't get ANY rotation in it.. and that's all I need.

When I can solve the puzzle by rotating in real life, my project is finished and I will get all my points..

But I'm stuk at my current code.

The application is almost finished except for the rotating part.

What I've been trying to do is to have two colors detected, and draw a line between those two.

That's what I've managed to do so far.. But now it somehow has to be linked to the puzzle. I think by using angels and math and stuff, but I've got no clue how!

*edit* and because I mirrored the webcam image, the line-drawing doesn't work as it's supposed too..

calsign

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

What code, specifically, are you using for color detection?

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Ok, the line that is wrong is on line 113.

Is it mirrored left/right?

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

I combined this code with my current code (this code is already combined with the last version of code I posted in this topic!

import processing.video.*;
Capture cam;
color trackColor = color(255, 0, 0);
color trackColor2 = color(0, 0, 255);
//int x = 0;
//int y = 0;
void setup() {
size(320, 240);
cam = new Capture(this, 320, 240);
}
void draw() {
if (cam.available()) {
cam.read();
}
cam.loadPixels();
int bestRedindex = 0;
int bestBlueindex = 0;
float bestScore = 50000; // heel groot getal
for (int i = 0; i < cam.pixels.length; i ++ ) {
float distance = colorDist(cam.pixels[i], trackColor);
if (distance < bestScore) {
bestScore = distance;
bestRedindex = i;
}
}
for (int t = 0; t < cam.pixels.length; t ++ ) {
float distance = colorDist(cam.pixels[t], trackColor2);
if (distance < bestScore) {
bestScore = distance;
bestBlueindex = t;
}
}
image(cam, 0, 0);
//fill(trackColor);
//fill(trackColor2);
int bestRedX = bestRedindex % cam.width;
int bestRedY = bestRedindex / cam.width;
int bestBlueX = bestBlueindex % cam.width;
int bestBlueY = bestBlueindex / cam.width;
stroke(0);
line(bestRedX, bestRedY, bestBlueX, bestBlueY);
}
float colorDist(color c1, color c2) {
return dist(red(c1), green(c1), blue(c1), red(c2), green(c2), blue(c2));
}

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Chrisir, what do you mean?

It's mirrored from left to right yeah..

So when you put your left hand up in the air, it's also up on the left side on-screen ;)

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

In which line the Puzzle is drawn?

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

add this iat the end of your program:

float circularAngleBetween (PVector myPVector1, PVector myPVector2) {
// from http://forum.processing.org/topic/pvector-anglebetween
// with thanks.
// delivers an angle in rad where myPVector1 is considered as a
// point being the center of a circle and myPVector2 a point being on the
// circumference.
//
float a = atan2(myPVector1.y-myPVector2.y, myPVector1.x-myPVector2.x);
if (a<0) {
a+=TWO_PI;
}
return a;
} // func

then

instead of your line 123

rotate(radians(rads[t]));

try:

PVector pointBlue=new PVector(bestBlueX,bestBlueY);
PVector pointRed=new PVector(bestRedX,bestRedY);
float myAngle = circularAngleBetween (pointBlue, pointRed);
rotate(myAngle);

not tested -

Greetings, Chrisir

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

By doing exactly what you say, it says: Cannot find anything named myAngle?

(at the Pvector's)

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Sorry have float before it

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

unexpected token: float

PVector pointBlue=new PVector(bestBlueX, bestBlueY);
PVector pointRed=new PVector(bestRedX, bestRedY);
float = myAngle = circularAngleBetween (pointBlue, pointRed);
rotate(myAngle);

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

There are 4 tiles in the Puzzle, but you have only 2 points - so all 4 rotate the same way?

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

float myangle without =

So it's

float myangle = circ.....

tfguy44

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

I just don't get you.

You have neaten up code that does the puzzle.
You have example code that detects the pixel in an image that is most like the color you want.
You have example code that, given the index of a pixel, finds it's X and Y positions on the image.
You have example code that takes two positions, draws the line between them, and tracks when the angle that line makes has changed.
You've been told what changes you need to make to keyPressed() to make it trigger actions based on some input.
I've posted at least twice explaining what you need to change.
You still can't make it come together.

Like most people, I don't have the ability to do camera input.
What I do have is the ability to fake a camera input.
Here's a last ditch effort to pull it all together into one example for you.
The beauty here is that others can now help you work on the problem without needing cam inputs themselves:

PGraphics fakeCam;
// Real poisitons of the most red and blue points
int camrx=100,camry=100,cambx=100,camby=100;
// For tracking is the spacebar is pressed
boolean spaceDown;
color bg = color(0);
float angle = 0;
float pangle = 0;
float rotateAngle = 0;
void setup(){
fakeCam = createGraphics(200,200,P2D);
size(200,200);
}
void draw(){
simulateFakeCam();
background(bg);
pushMatrix();
translate(width/2,height/2);
rotate(rotateAngle);
noStroke();
fill(0,128,0);
rect(-40,-40,80,80);
fill(0,0,128);
rect(-40,-40,5,80);
fill(128,0,0);
rect(35,-40,5,80);
popMatrix();
fakeCam.loadPixels();
int rI = 0; // Index of most red pixel found.
int bI = 0; // Index of most blue pixel found.
int rF = int(red(fakeCam.pixels[rI])); // Value of the reddest pixel so far.
int bF = int(blue(fakeCam.pixels[bI])); // Value of the bluest pixel so far.
// Serach the cam's image for the most red and most blue pixels.
for( int i = 0; i < fakeCam.pixels.length; i ++ ){
// You may want to use a different means of comparing the pixels's colors.
// This comparison thinks that a pure white pixel is as red as a pure red pixel!
// It isn't bothering to check that there is very little green or blue in the pixel's color!
if( int(red(fakeCam.pixels[i])) > rF ){
rI = i;
rF = int(red(fakeCam.pixels[i]));
// println( "Better red found at: " + rI + " Redness: " + rF );
}
// Same thing here with blue. It's not checking that there is very little red and green in the pixel!
if( int(blue(fakeCam.pixels[i])) > bF ){
bI = i;
bF = int(blue(fakeCam.pixels[i]));
// println( "Better blue found at: " + bI + " Blueness: " + bF );
}
}
int rX = rI % fakeCam.width;
int rY = rI / fakeCam.width;
int bX = bI % fakeCam.width;
int bY = bI / fakeCam.width;
//println( "" + rX + " " + rY + " " + bX + " " + bY );
// Show the line between the two best points.
stroke(255);
line(rX,rY,bX,bY);
// Find the angle of that line.
angle = atan2( rY-bY, rX-bX );
if( angle != pangle ){
//println( angle );
pangle = angle;
causeTrouble( angle );
}
// If the spacebar is pressed, show what the fakeCamera sees.
if( spaceDown ){
image( fakeCam, 0,0 );
}
}
void causeTrouble( float someAngle ){
rotateAngle = someAngle;
// SOMEONE ELSE TAKE IT FROM HERE, WOULD YOU?
}
// Draw the fake camera input.
void simulateFakeCam(){
fakeCam.beginDraw();
fakeCam.background(64);
fakeCam.fill(0);
fakeCam.text( "CAM", 20, 20 );
// Add some random colorful (but not too colorful) static.
for( int t = 0; t < 250; t++ ){
fakeCam.stroke(t,0,0);
fakeCam.point(random(fakeCam.width),random(fakeCam.height));
fakeCam.stroke(0,t,0);
fakeCam.point(random(fakeCam.width),random(fakeCam.height));
fakeCam.stroke(0,0,t);
fakeCam.point(random(fakeCam.width),random(fakeCam.height));
}
// Randomly move the best matching pixel's positions around.
camrx+=(random(1)<.5?-1:1);
camry+=(random(1)<.5?-1:1);
cambx+=(random(1)<.5?-1:1);
camby+=(random(1)<.5?-1:1);
// Keep them contatined to the window.
camrx+=width;
camry+=height;
cambx+=width;
camby+=height;
camrx%=width;
camry%=height;
cambx%=width;
camby%=height;
// Draw the most red pixel.
fakeCam.stroke(255,0,0);
fakeCam.point(camrx,camry);
// Draw the most blue pixel.
fakeCam.stroke(0,0,255);
fakeCam.point(cambx,camby);
// Circle those point for increased visability.
fakeCam.noFill();
fakeCam.ellipseMode(CENTER);
fakeCam.stroke(128,0,0);
fakeCam.ellipse(camrx, camry,10,10);
fakeCam.stroke(0,0,128);
fakeCam.ellipse(cambx, camby,10,10);
// That's the fake camera drawn.
fakeCam.endDraw();
fakeCam.updatePixels();
}
// Used to set the cam's fake best pixels with the mouse pointer.
void mousePressed(){
if( mouseButton == LEFT ){
camrx = mouseX;
camry = mouseY;
}
if( mouseButton == RIGHT ){
cambx = mouseX;
camby = mouseY;
}
}
// Used to track is the spacebar is pressed.
void keyPressed(){
if( key == ' ' ){
spaceDown = true;
}
}
void keyReleased(){
if( key == ' ' ){
spaceDown = false;
}
}
color rcolor(){
return color( random(64) ) ;
}

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Omg.. It starts doing something (makes my heart jump of excitement haha).

There are 5 circles/pieces of the puzzle.

And they used to move undependable from each other.

UP and DOWN used to be the functions too go from an inner to an outer circle, and the other way around.

And LEFT and RIGHT decided wether you rotate the selected piece to the left or the right.

With your adjustment they act as 1 solved puzzle.

And somehow, my webcam doesn't really find the red and the blue spots very good..

It kinda "trips" and it doesn't really show a straight line for longer than 0,5seconds or so, haha.

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Wow tfguy44, thank you very much for this perfect example of code to help me and others.

It's possible that you don't get me..

But didn't I tell you that I'm a total noob at this?

I've been processing for about a week now.

This is a pretty hard assigment for someone who hasn't had any experience with Processing, isn't it?

So please don't be that hard that I can't connect the different codes together as it should..

I'm trying. That counts right?

But again, thank you very much.

I'm going to try and understand the code now!;)

And hopefully others can use it to assist me too!:D

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Let's start with showing the latest version of the code:

import processing.serial.*;
import ddf.minim.*;
import processing.video.*;
Capture cam;
PImage spiegel;
color trackColor = color(255, 0, 0);
color trackColor2 = color(0, 0, 255);
AudioPlayer klik, roterendeklik, succes, verkeerd;
Minim minim;
Movie myMovie;
int counter, counter2 = 0;
int stage = 0;
PImage[] puzzles;
PImage[] masks;
PImage backdrop, intro, einde;
PImage pijllinks, pijlrechts, pijl2, pijl1;
int selection = 4;
int[] rads = {
-40, 200, 20, 60, 60
};
void setup() {
minim = new Minim(this);
klik = minim.loadFile("klik.mp3");
roterendeklik = minim.loadFile("roterendeklik.mp3");
succes = minim.loadFile("succes.mp3");
verkeerd = minim.loadFile("verkeerd.mp3");
imageMode(CENTER);
intro = loadImage("intro.jpg");
einde = loadImage("einde.jpg");
puzzles = new PImage[5];
masks = new PImage[5];
for ( int t=0; t < 5; t++ ) {
puzzles[t] = loadImage("puzzle" + str( t+1 ) + ".jpg");
masks[t] = loadImage("puzzle" + str( t+1 ) + "mask.jpg");
}
size(1200, 700, P2D);
cam = new Capture(this, 500, 480, 60);
spiegel = createImage (500, 480, RGB);
}
void draw() {
switch(stage) {
case 0:
background(0, 0, 0);
image(intro, 700, height/2);
break;
case 1:
background(0, 0, 0);
if (cam.available() == true) {
cam.read();
}
cam.loadPixels();
int bestRedindex = 0;
int bestBlueindex = 0;
float bestScore = 50000; // heel groot getal
for (int i = 0; i < cam.pixels.length; i ++ ) {
float distance = colorDist(cam.pixels[i], trackColor);
if (distance < bestScore) {
bestScore = distance;
bestRedindex = i;
}
}
for (int t = 0; t < cam.pixels.length; t ++ ) {
float distance = colorDist(cam.pixels[t], trackColor2);
if (distance < bestScore) {
bestScore = distance;
bestBlueindex = t;
}
}
for (int i = 0; i <cam.pixels.length; i++) {
spiegel.pixels[i] = cam.pixels[cam.width + (cam.width*(i/cam.width)) - 1 - i%cam.width]; //hier gebeurd de spiegel magie.
}
spiegel.updatePixels();
image(spiegel, 280, height/2);
int bestRedX = bestRedindex % cam.width;
int bestRedY = bestRedindex / cam.width;
int bestBlueX = bestBlueindex % cam.width;
int bestBlueY = bestBlueindex / cam.width;
stroke(0);
line(bestRedX, bestRedY, bestBlueX, bestBlueY);
for ( int t = 0; t < rads.length; t++ ) {
rads[t]%=360;
}
selection = constrain( selection, 0, 4 );
for ( int t = 4; t >= 0; t-- ) {
pushMatrix();
translate(850, height/2);
tint(255, (selection==t)?255:153);
PVector pointBlue=new PVector(bestBlueX, bestBlueY);
PVector pointRed=new PVector(bestRedX, bestRedY);
float myAngle = circularAngleBetween (pointBlue, pointRed);
rotate(myAngle);
puzzles[t].mask(masks[t]);
image(puzzles[t], 0, 0);
popMatrix();
}
break;
case 2:
fill(0, 10);
rectMode(CORNER);
rect(0, 0, width, height);
counter++;
if (counter > 10) {
stage = 3;
}
break;
case 3:
background(0);
image(einde, 700, height/2);
break;
case 4:
rectMode(CORNER);
fill(0, 0, 0);
rect(0, 0, width, height);
selection = 4;
rads[0] = -40;
rads[1] = 200;
rads[2] = 20;
rads[3] = 60;
rads[4] = 60;
counter = 0;
counter2 = 0;
stage = 0;
break;
}
}
void keyPressed() {
switch(stage) {
case 0:
if (key == ' ') {
stage = 1;
}
break;
case 1:
if (key == CODED) {
if (keyCode == DOWN) {
roterendeklik.play();
selection++;
roterendeklik.rewind();
}
if (keyCode == UP) {
roterendeklik.play();
selection--;
roterendeklik.rewind();
}
if (keyCode == RIGHT) {
klik.play();
switch( selection ) {
case 0:
rads[0]+=10;
break;
case 1:
rads[1]+=10;
break;
case 2:
rads[2]+=10;
break;
case 3:
rads[3]+=10;
break;
case 4:
rads[4]+=10;
break;
}
klik.rewind();
}
else if (keyCode == LEFT) {
klik.play();
rads[selection]-=10;
klik.rewind();
}
}
if (key == ENTER || key == RETURN) {
if (rads[0] == 0 && rads[1] == 0 && rads[2] == 0 && rads[3] == 0 && rads[4] == 0) {
stage = 2;
succes.play();
delay(2000);
succes.rewind();
}
else {
verkeerd.play();
delay(1000);
verkeerd.rewind();
}
}
break;
case 3:
if (key == ENTER || key == RETURN) {
stage = 4;
}
}
}
float colorDist(color c1, color c2) {
return dist(red(c1), green(c1), blue(c1), red(c2), green(c2), blue(c2));
}
float circularAngleBetween (PVector myPVector1, PVector myPVector2) {
// from http://forum.processing.org/topic/pvector-anglebetween
// with thanks.
// delivers an angle in rad where myPVector1 is considered as a
// point being the center of a circle and myPVector2 a point being on the
// circumference.
//
float a = atan2(myPVector1.y-myPVector2.y, myPVector1.x-myPVector2.x);
if (a<0) {
a+=TWO_PI;
}
return a;
} // func

So.. That example of tfguy44 is perfect!

How to implement it in my current code?

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

You Must be kidding!

Now it's your turn to make a try!

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Yes! I'm working on it! Sorry!

I'm just worried one of you guys go to bed or doesn't reply anymore..

You're like.. my last hope, haha.

So I try to reply as fast as possible!

But I'll work on it now!

Be right back, please don't leave haha!

tfguy44

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

The biggest problem I see with your latest version is that you use the variable bestScore for both the best red score so far and the blue blue score so far found. This might be a problem if, say, it finds a perfect red pixel right away (setting the bestScore to "very good"), but the best blue pixel it can find (although it is the best) is only "somewhat good". You should use seperate variables to track the best scores for each color. In my example, I did this with the variables rF and bF (which are short for redFound and BlueFound).

As Chrisir said, you really need to try it on your own now...

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

His lines 60-66 replace my Lines 1-4

Match is finished, spain won, I am Off to bed.

You can do it!!

Chrisir

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Oh nooo! Chrisir leaves! haha big problem for me :O

Thanks alot for your help, good night & sweet dreams.

Any chance you'll be on tomorrow before 15:30 european time?:O

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

tfguy44, for how long will you be online today/tonight? (how many hours)

Then I know how much time I've got left!

tfguy44

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

It is unlikely I will help at all after 9 hours from now.

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

So if I post something within an hour you're able to help me?;)

I'm so close to the end thanks to you guys (atleast that's how it feels).

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

By the way, can I just replace cam for Fakecam for the functions in your example?

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

BTW

since you want to replace
cursor right and left , print this part and then delete it (from line 184 on)

I thought about that you want to rotate only one piece and not all...
This one piece is selected via cursor up and down and denoted by the var "selection".

So in line 123
you can still use

rotate(radians(rads[t]));

but then before this have (my former lines and then)

rads[selection]= myAngle;

thus changing only the selected piece/tile.
or apply this to tfguys solution.

Hint:
you must understand the code before you can change it.

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Wait I don't get it..

You mean this piece of code?

PVector pointBlue=new PVector(bestBlueX, bestBlueY);
PVector pointRed=new PVector(bestRedX, bestRedY);
float myAngle = circularAngleBetween (pointBlue, pointRed);
rotate(myAngle);

What do I need to change according to you?

Chrisir

Re: Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

what I meant is:

PVector pointBlue=new PVector(bestBlueX, bestBlueY);
PVector pointRed=new PVector(bestRedX, bestRedY);
float myAngle = circularAngleBetween (pointBlue, pointRed);
//
rads[selection]= myAngle;
rotate(radians(rads[t]));

it's not very efficient, tfguy44s is better, but still, this way you change only one tile / piece.

tfguy44

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Basically, you need some code to find the angle of the line between two points.
Chrisir has posted one way of doing it. I have posted another.
You can replace one way of doing it with the other way if you like.
What really matters is that you understand how one of those ways works.
Once you understand how a way works, you can use that knowledge to make it work in your own code.

1) Fine the two points that are the best matches.
2) Find the angle of the line between those points.
3) Base the rotation of puzzle pieces based on that angle.

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

So.. I worked all night and it didn't work at all.

I just can't figure it out.

So today I had the moment where I had to show this to my teacher..

I had changed the concept. The code I'm now going to post did work very good though!

It works with color recognition, and when I hit the arrows on the screen, the puzzel starts to move.

However, there wasn't any rotation in it..

So he gave me a low result :(

Because of the fact that I'm alone and I should have 3 other teammates, he's given me another chance for next tuesday.

So.. I've really got to figure it out to make it this year!!

If you guys could help me just a little longer, it'd be great!

Here's the last version of my code (do you like it? I think my skills are a bit approving):

//Libraries
import processing.serial.*;
import ddf.minim.*;
import processing.video.*;
Capture cam;
PImage spiegel;
//Opzetten van geluid en video variabelen
AudioPlayer klik, roterendeklik, succes, verkeerd;
Minim minim;
Movie myMovie;
//Tellers die gebruikt worden tijdens het einde van het programma en zet de staat van het programma weer op 0.
int counter, counter2 = 0;
int stage = 0;
//Arrays die voor de plaatjes en maskers die worden gebruikt.
PImage[] puzzles;
PImage[] masks;
PImage backdrop, intro, einde;
//De pijlen in het webcamscherm.
PImage pijllinks, pijlrechts, pijl2, pijl1;
//De startpositie van de puzzel, converteren van graden naar radians.
int selection = 4;
//De ringen draaien
int[] rads = {
-40, 200, 20, 60, 60
};
color trackColor; //Maakt een variabele van het type color aan, genaamd trackColor.
int currentX, currentY, closestX, closestY; //Maakt variabelen aan van het type int voor de x- en y-waarden.
float bestScore; //Maakt een variabele aan van het type float, om de beste score in op te slaan.
color currentColor; //Maakt een variabele aan om per pixel de huidige kleur in op te slaan.
float distance; //Maakt een variabele aan waarin de afstand tussen twee kleuren kan worden opgeslagen.
boolean canTwist = true; //Maakt een nieuwe boolean aan met de naam canTwist (twist ivm draaien) die standaard op true staat.
int vertraging = 0; //Maakt een integer aan die standaard op 0 staat.
PFont font; //Maakt de standaard fontclass aan met de naam font.
float time; //Een nieuwe float met de naam "time".
//Laden van de plaatjes, opzetten van de grootte van het programma.
void setup() {
minim = new Minim(this);
klik = minim.loadFile("klik.mp3");
roterendeklik = minim.loadFile("roterendeklik.mp3");
succes = minim.loadFile("succes.mp3");
verkeerd = minim.loadFile("verkeerd.mp3");
imageMode(CENTER);
intro = loadImage("intro.jpg");
einde = loadImage("einde.jpg");
puzzles = new PImage[5];
masks = new PImage[5];
for ( int t=0; t < 5; t++ ) {
puzzles[t] = loadImage("puzzle" + str( t+1 ) + ".jpg");
masks[t] = loadImage("puzzle" + str( t+1 ) + "mask.jpg");
}
pijllinks = loadImage("pijl_links.png");
pijlrechts = loadImage("pijl_rechts.png");
pijl1 = loadImage("pijl_omhoog.png");
pijl2 = loadImage("pijl_omlaag.png");
size(1200, 700, P2D);
cam = new Capture(this, 480, 360, 60); //Grootte van webcambeeld aangepast, zodat het beeld niet uitgerekt wordt.
spiegel = createImage (480, 360, RGB); //Grootte van webcambeeld aangepast, zodat het beeld niet uitgerekt wordt.
trackColor = color(255, 0, 0); //Voert de kleur rood in, in de variabele trackColor.
font = loadFont("Candara-32.vlw"); //Laadt het lettertype 04b03 met een grootte van 24 pt.
textFont(font); //Zet de huidige font op de font die is ingeladen bij loadFont.
time = 180; //Zet de tijd op 180 seconden oftewel 3 minuten.
}
//Het programma maakt gebruik van verschillende "scene's" genaamd case.
void draw() {
switch(stage) {
//Stage 0, zorgt voor het intro scherm.
case 0:
background(0, 0, 0);
image(intro, 700, height/2);
break;
//Stage 1, het begin van de puzzel.
case 1:
background(0, 0, 0);
image(pijllinks, 50, 180);
image(pijlrechts, 430, 180);
image(pijl1, 240, 50);
image(pijl2, 240, 310);
if (cam.available() == true) {
cam.read();
}
cam.loadPixels();
for (int i = 0; i <cam.pixels.length; i++) {
spiegel.pixels[i] = cam.pixels[cam.width + (cam.width*(i/cam.width)) - 1 - i%cam.width]; //Hier gebeurt de spiegel magie.
}
spiegel.updatePixels();
imageMode(CORNER); //Hij tekent het plaatje vanuit de hoek.
image(spiegel, 0, 0); //Het webcambeeld na enkele pogingen verplaatst naar de linkerbovenhoek, anders werkte de kleurherkenning niet goed.
imageMode(CENTER); //Hij tekent het plaatje vanuit het midden.
bestScore = dist(255, 255, 255, 0, 0, 0); //Maakt een nieuwe variabele van het type float genaamd bestScore aan.
//En "stop" hier de maximale afstand tussen twee RGB kleuren in.
closestX = 0; //Zet in de variabele closestX het getal 0.
closestY = 0; //Zet in de variabele closestY het getal 0.
//Verderop in het programma gaan we voor elke pixel uitrekenen in hoeverre de kleur hiervan overeenkomt met de kleur
//die we zoeken. De afstand tussen de kleur van de onderzochte pixel en de gezochte kleur moet zo klein mogelijk
//zijn. In de variabele bestScore wordt deze afstand opgeslagen. Hoe lager het getal, hoe beter de kleur van de
//gevonden pixel overeenkomt met de gezochte kleur. We zetten bestScore in het begin op 500, een waarde die, zo
//zullen we zien, gemakkelijk te overtreffen is.
for (int i = 0; i < spiegel.pixels.length; i++ ) { //Doorloopt de iteratie voor de pixel.
currentX = i%spiegel.width; //Rekent de x-waarde behorende bij de huidige pixel uit.
currentY = (i-currentX)/spiegel.width; //Rekent de y-waarde behorende bij de huidige pixel uit.
currentColor = spiegel.pixels[i]; //Maakt een variabele van het type color genaamd currentColor, en stopt
//hier de kleurwaarde van de bij de iteratie behorende pixel in (dus van pixel 0 t/m 76799).
distance = dist(red(currentColor), green(currentColor), blue(currentColor),
red(trackColor), green(trackColor), blue(trackColor));
//Stopt in de variabele distance de uitkomst van de functie dist
//met als parameters de kleurwaarden van de huidige pixel en de kleurwaarden van de gezochte kleur.
//De functie dist rekent de afstand tussen haar parameters uit.
if (distance < bestScore) { //Als de afstand tussen de kleur van de huidige pixel en de gezochte kleur kleiner is
// dan al eerder gevonden pixels,
bestScore = distance; // zet dan de huidige afstand in de variabele bestScore
closestX = currentX; // en sla de hierbij behorende x-
closestY = currentY; // en y-waarden op.
}
}
if (bestScore < 200) { //Als bestScore lager is dan 200 (geen idee wat, dit komt allemaal letterlijk uit de reader die op BB staat).
noStroke(); //Geen lijntje tekenen
smooth(); //Anti-alias randen
fill (130, 220, 30); //Kleur van het onderstaande is groen.
ellipse(closestX, closestY, 50, 50); //Tekent een rondje van 50 x 50 pixels op de positie waar de meest rode kleur wordt gevonden.
}
float distancePijlLinks = dist(50, 180, closestX, closestY); //Berekent de afstand tussen de pijl naar links (die staat namelijk op x=50 en y=180) en plek waar de meest rode pixel zich bevindt.
float distancePijlRechts = dist(430, 180, closestX, closestY); //Berekent de afstand tussen de pijl naar rechts (die staat namelijk op x=430 en y=180) en plek waar de meest rode pixel zich bevindt.
float distancePijlOmhoog = dist(240, 50, closestX, closestY); //Berekent de afstand tussen de pijl omhoog (die staat namelijk op x=240 en y=180) en plek waar de meest rode pixel zich bevindt.
float distancePijlOmlaag = dist(240, 310, closestX, closestY); //Berekent de afstand tussen de pijl omlaag (die staat namelijk op x=240 en y=310) en plek waar de meest rode pixel zich bevindt.
if (distancePijlRechts < 20 && canTwist) { //Als die afstand tussen de pijl naar rechts en de meest rode pixel kleiner is dan 20 pixels én canTwist = true, dan gebeurt er dit:
klik.play(); //de gegevens die eerst bij pijltje naar rechts stonden vanaf hier...
switch( selection ) {
case 0:
rads[0]+=10;
break;
case 1:
rads[1]+=10;
break;
case 2:
rads[2]+=10;
break;
case 3:
rads[3]+=10;
break;
case 4:
rads[4]+=10;
break;
}
klik.rewind(); //tot hier.
canTwist = false; //Zet de boolean canTwist op false.
vertraging = 0; //deze wordt op 0 gezet.
}
else if (distancePijlLinks < 20 && canTwist) { //Als die afstand tussen de pijl naar links en de meest rode pixel kleiner is dan 20 pixels én canTwist = true, dan gebeurt er dit:
klik.play(); //de gegevens die eerst bij pijltje naar links stonden vanaf hierrr
rads[selection]-=10;
klik.rewind(); //tot hierrr.
canTwist = false; //Zet de boolean canTwist op false.
vertraging = 0; //deze wordt op 0 gezet.
}
if (distancePijlOmhoog < 20 && canTwist) { //Als die afstand tussen de pijl omhoog en de meest rode pixel kleiner is dan 20 pixels én canTwist true, dan gebeurt er dit:
roterendeklik.play(); //de gegevens die eerst bij pijltje omhoog stonden vanaf hierrr.
selection--;
roterendeklik.rewind(); //tot hierrr.
canTwist = false; //Zet de boolean canTwist op false.
vertraging = 0; //deze wordt op 0 gezet.
}
if (distancePijlOmlaag < 20 && canTwist) { //Als die afstand tussen de pijl omlaag en de meest rode pixel kleiner is dan 20 pixels én canTwist = true, dan gebeurt er dit:
roterendeklik.play(); //de gegevens die eerst bij pijltje omlaag stonden vanaf hier...
selection++;
roterendeklik.rewind(); //tot hier.
canTwist = false; //Zet de boolean canTwist op false.
vertraging = 0; //deze wordt op 0 gezet.
}
vertraging++; //ieder frameverversing komt komt er + 1 bij.
if (vertraging >= 4) { //Dit getal bepaalt hoeveel seconden(?) je moet wachten voordat die pijltoetsen het weer doen. Dus na meer dan of gelijk aan 4 frameverversingen, gebeurt er dit:
canTwist = true; // canTwist gaat weer op true, dus er gebeurt weer wat en het plaatje mag weer draaien.
}
if (time > 0.0) { // Wanneer de tijd op meer dan 0.0 seconden staat, gebeurt er dit:
time = time - (1.0/frameRate); // Van de tijd gaat iedere seconde één seconde af (aftellen).
}
if (time <= 0.0) { // Wanneer de tijd gelijk is aan of op minder dan 0.0. staat, gebeurt er dit:
stage = 4;
}
if (rads[0] == 0 && rads[1] == 0 && rads[2] == 0 && rads[3] == 0 && rads[4] == 0) { // Enter
stage = 2;
succes.play();
delay(2000);
succes.rewind();
}
else {
}
for ( int t = 0; t < rads.length; t++ ) {
rads[t]%=360;
}
selection = constrain( selection, 0, 4 );
for ( int t = 4; t >= 0; t-- ) {
pushMatrix();
translate(850, height/2);
tint(255, (selection==t)?255:153);
rotate(radians(rads[t]));
puzzles[t].mask(masks[t]);
image(puzzles[t], 0, 0);
popMatrix();
}
fill(130, 220, 30); // Geeft de tekst een witte kleur.
text("TIJD: " + round(time), 320, 400); // Geeft de werkelijke tijd die nog over is weer.
break;
case 2:
fill(0, 10);
rectMode(CORNER);
rect(0, 0, width, height);
counter++;
if (counter > 10) {
stage = 3;
}
break;
case 3:
background(0);
image(einde, 700, height/2);
break;
case 4:
rectMode(CORNER);
fill(0, 0, 0);
rect(0, 0, width, height);
selection = 4;
rads[0] = -40;
rads[1] = 200;
rads[2] = 20;
rads[3] = 60;
rads[4] = 60;
counter = 0;
counter2 = 0;
stage = 0;
break;
}
}
void keyPressed() {
switch(stage) {
case 0:
if (key == ' ') {
stage = 1;
}
break;
case 3:
if (key == ENTER || key == RETURN) {
stage = 4;
}
}
}

And.. I've followed your tips.

I first tried to create my own code finding the angel of the leen between two points, cause I really need to figure out how it works. And I came up with the code beneath:

So guys, could you please tell me what should be my next step?

int x1, y1, x2, y2;

float angle;

void setup(){

size(400, 400);



x1 =200;

y1 = 200;

rectMode(CENTER);



}

void draw(){

background(100);

x2 = mouseX;

y2 = mouseY;

stroke(255);

line(x1, y1, x2, y2);



stroke(150);

line(x1, y2, x1, y1);

line(x2, y2, x1, y2);



angle = atan2(x1-x2, y1-y2);



println(angle);



pushMatrix();

translate(100, 200);

rotate(-angle);

rect(0, 0, 50, 50);

popMatrix();

}

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

oh dear...

I appreciate your humor...

besides why did you delete these lines?

if (keyCode == DOWN) {
roterendeklik.play();
selection++;
roterendeklik.rewind();
}
if (keyCode == UP) {
roterendeklik.play();
selection--;
roterendeklik.rewind();
}

I only spoke about left and right key not about deleting up and down key, still needed.

Hint: read the long code you just posted and understand it.

Then apply the idea of your short code to the long code.

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

It's not funny. Haha!

It makes me cry..

Don't forget this is like, the 2nd week I've been doing Processing.

I still need to do everything in little parts.

So combining the codes is pretty hard for me.

It's the final shot I have.. Tuesday..

After that I've got all the time to try out processing more.. from the beginning..

But first I've got to finish this hard project.

For now, I don't think I can do it.

But I'm trying so hard. >.>

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

you need to build in the changes from tfguy44 in the code.

Have you done that?

Isn't that at line 228?

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

I tried several times but I can't get the code working since I don't know the right places to combine the codes.. Where to put tfguy44's code into mine.. Which parts of mine I have te remove etc.

Is line 288 a question or a tip? Haha..

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

that version is pretty good:

http://forum.processing.org/topic/rotation-of-a-puzzle-by-color-detection-through-my-webcam-hard#25080000001662983

you now did take a HUGE step backward compared with your last code

WHY

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

try this

line 89 is taken from your short code with the rect

import processing.serial.*;
import ddf.minim.*;
import processing.video.*;
Capture cam;
PImage spiegel;
color trackColor = color(255, 0, 0);
color trackColor2 = color(0, 0, 255);
AudioPlayer klik, roterendeklik, succes, verkeerd;
Minim minim;
Movie myMovie;
int counter, counter2 = 0;
int stage = 0;
PImage[] puzzles;
PImage[] masks;
PImage backdrop, intro, einde;
PImage pijllinks, pijlrechts, pijl2, pijl1;
int selection = 4;
int[] rads = {
-40, 200, 20, 60, 60
};
void setup() {
minim = new Minim(this);
klik = minim.loadFile("klik.mp3");
roterendeklik = minim.loadFile("roterendeklik.mp3");
succes = minim.loadFile("succes.mp3");
verkeerd = minim.loadFile("verkeerd.mp3");
imageMode(CENTER);
intro = loadImage("intro.jpg");
einde = loadImage("einde.jpg");
puzzles = new PImage[5];
masks = new PImage[5];
for ( int t=0; t < 5; t++ ) {
puzzles[t] = loadImage("puzzle" + str( t+1 ) + ".jpg");
masks[t] = loadImage("puzzle" + str( t+1 ) + "mask.jpg");
}
size(1200, 700, P2D);
cam = new Capture(this, 500, 480, 60);
spiegel = createImage (500, 480, RGB);
}
void draw() {
switch(stage) {
case 0:
background(0, 0, 0);
image(intro, 700, height/2);
break;
case 1:
background(0, 0, 0);
if (cam.available() == true) {
cam.read();
}
cam.loadPixels();
int bestRedindex = 0;
int bestBlueindex = 0;
float bestScore = 50000; // heel groot getal
for (int i = 0; i < cam.pixels.length; i ++ ) {
float distance = colorDist(cam.pixels[i], trackColor);
if (distance < bestScore) {
bestScore = distance;
bestRedindex = i;
}
}
for (int t = 0; t < cam.pixels.length; t ++ ) {
float distance = colorDist(cam.pixels[t], trackColor2);
if (distance < bestScore) {
bestScore = distance;
bestBlueindex = t;
}
}
for (int i = 0; i <cam.pixels.length; i++) {
spiegel.pixels[i] = cam.pixels[cam.width + (cam.width*(i/cam.width)) - 1 - i%cam.width]; //hier gebeurd de spiegel magie.
}
spiegel.updatePixels();
image(spiegel, 280, height/2);
int bestRedX = bestRedindex % cam.width;
int bestRedY = bestRedindex / cam.width;
int bestBlueX = bestBlueindex % cam.width;
int bestBlueY = bestBlueindex / cam.width;
stroke(0);
line(bestRedX, bestRedY, bestBlueX, bestBlueY);
for ( int t = 0; t < rads.length; t++ ) {
rads[t]%=360;
}
selection = constrain( selection, 0, 4 );
for ( int t = 4; t >= 0; t-- ) {
pushMatrix();
translate(850, height/2);
tint(255, (selection==t)?255:153);
//
float myAngle = atan2(bestBlueX-bestRedX, bestBlueY-bestRedY);
//
rads[selection]= int(myAngle);
rotate(radians(rads[t]));
puzzles[t].mask(masks[t]);
image(puzzles[t], 0, 0);
popMatrix();
}
break;
case 2:
fill(0, 10);
rectMode(CORNER);
rect(0, 0, width, height);
counter++;
if (counter > 10) {
stage = 3;
}
break;
case 3:
background(0);
image(einde, 700, height/2);
break;
case 4:
rectMode(CORNER);
fill(0, 0, 0);
rect(0, 0, width, height);
selection = 4;
rads[0] = -40;
rads[1] = 200;
rads[2] = 20;
rads[3] = 60;
rads[4] = 60;
counter = 0;
counter2 = 0;
stage = 0;
break;
}
}
void keyPressed() {
switch(stage) {
case 0:
if (key == ' ') {
stage = 1;
}
break;
case 1:
if (key == CODED) {
if (keyCode == DOWN) {
roterendeklik.play();
selection++;
roterendeklik.rewind();
}
if (keyCode == UP) {
roterendeklik.play();
selection--;
roterendeklik.rewind();
}
}
if (key == ENTER || key == RETURN) {
if (rads[0] == 0 && rads[1] == 0 && rads[2] == 0 && rads[3] == 0 && rads[4] == 0) {
stage = 2;
succes.play();
delay(2000);
succes.rewind();
}
else {
verkeerd.play();
delay(1000);
verkeerd.rewind();
}
}
break;
case 3:
if (key == ENTER || key == RETURN) {
stage = 4;
}
}
}
float colorDist(color c1, color c2) {
return dist(red(c1), green(c1), blue(c1), red(c2), green(c2), blue(c2));
}
//

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

I explained why.

Yesterday I had to present a working code.

So I exchanged the rotation for something I could do (with a bit of help from a friend), and that was the color detection of one point and making it rotate when I go over the arrows onscreen. However, my teacher really wanted to see the rotation and gave me one final chance next Tuesday. All my points rely on it so I REALLY have to make it in time!

It's kinda unfair though, since many people got their points just by creating a "catching coin" game or something like that.. We came up with a way to hard concept in the beginning.. but we were with four people.. Now I'm the only one left..

See?:)

I'm not working on that code anymore. I removed everything and I'm working with the code you just referred to!

I just can't seem to find the right way to combine tfguy44's code with the one you just referred to.. :-/

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Sorry I replied without seeing your reply ;)

I'll try that code ;)

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Nice! It takes one piece.. and the up&down arrows work!

However.. it doesn't rotate at the moment.. it just.. "trips"/shakes..

let's see what I can do 'bout that ;)

thanks alot for helping me this much man, you don't know how much I appreciate it!

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

(if you'd like a dutch beer or something you've gotta send me your adress I'll ship it, haha)

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

did you follow this advice

http://forum.processing.org/topic/rotation-of-a-puzzle-by-color-detection-through-my-webcam-hard#25080000001665147

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

No I haven't yet, I'll try to put in there!

But it seems as if, no matter what the line between the two dots does, the circle doesn't rotate further than the horizon.. If you know what I mean? It rotates to left and to right completely random but not further than a couple degrees..

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

try
line 92

rotate(rads[t]);

instead what you have

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Okay, it's now "free" so that's an improvement! Thanks!

But it "clips" alot.. so it's not steady..

And the line doesn't really forms correctly between a red an a blue point..

Instead of really starting at the blue point, it starts a little bit higher or lower, a bit random..

Does this has something to do with the advice you referred too?

The rF and bF variables?

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

yes.

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Then I'll try to use that. But not tonight anymore. I've got enough of it for tonight!

Are you available tomorrow evening? In about 20hours? :)

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Chrisir!

When I try to combine your refference to my code, it screws up with my cases, saying: expecting RCURLY, found 'case' at case 0..

Here's my try:

import processing.serial.*;
import ddf.minim.*;
import processing.video.*;
Capture cam;
PImage spiegel;
color trackColor = color(255, 0, 0);
color trackColor2 = color(0, 0, 255);
AudioPlayer klik, roterendeklik, succes, verkeerd;
Minim minim;
Movie myMovie;
int counter, counter2 = 0;
int stage = 0;
PImage[] puzzles;
PImage[] masks;
PImage backdrop, intro, einde;
PImage pijllinks, pijlrechts, pijl2, pijl1;
int selection = 4;
int[] rads = {
-40, 200, 20, 60, 60
};
void setup() {
minim = new Minim(this);
klik = minim.loadFile("klik.mp3");
roterendeklik = minim.loadFile("roterendeklik.mp3");
succes = minim.loadFile("succes.mp3");
verkeerd = minim.loadFile("verkeerd.mp3");
imageMode(CENTER);
intro = loadImage("intro.jpg");
einde = loadImage("einde.jpg");
puzzles = new PImage[5];
masks = new PImage[5];
for ( int t=0; t < 5; t++ ) {
puzzles[t] = loadImage("puzzle" + str( t+1 ) + ".jpg");
masks[t] = loadImage("puzzle" + str( t+1 ) + "mask.jpg");
}
size(1200, 700, P2D);
cam = new Capture(this, 500, 480, 60);
spiegel = createImage (500, 480, RGB);
}
void draw() {
switch(stage) {
case 0:
background(0, 0, 0);
image(intro, 700, height/2);
break;
case 1:
background(0, 0, 0);
if (cam.available() == true) {
cam.read();
}
cam.loadPixels();
int rl = 0;
int bl = 0;
int rF = int(red(cam.pixels[rl])); //reddest pixel so far
int bF = int(blue(cam.pixels[bl]));//bluest pixel so far
for (int i = 0; i < cam.pixels.length; i ++ ) //search the cam's image for most red/blue pixels
{
float distance = colorDist(cam.pixels[i], trackColor);
if( int(red(cam.pixels[i])) > rF ){
rl = i;
rF = int(red(cam.pixels[i]));
}
if( int(blue(cam.pixels[i])) > bF ){
bl = i;
bF = int(blue(cam.pixels[i]));
}
}
for (int t = 0; t < cam.pixels.length; t ++ ) {
float distance = colorDist(cam.pixels[t], trackColor2);
// if (distance < bestScore) {
// bestScore = distance;
// bestBlueindex = t;
}
}
for (int i = 0; i <cam.pixels.length; i++) {
spiegel.pixels[i] = cam.pixels[cam.width + (cam.width*(i/cam.width)) - 1 - iÊm.width]; //hier gebeurd de spiegel magie.
}
spiegel.updatePixels();
image(spiegel, 280, height/2);
int bestRedX = bestRedindex % cam.width;
int bestRedY = bestRedindex / cam.width;
int bestBlueX = bestBlueindex % cam.width;
int bestBlueY = bestBlueindex / cam.width;
stroke(0);
line(bestRedX, bestRedY, bestBlueX, bestBlueY);
for ( int t = 0; t < rads.length; t++ ) {
rads[t]%=360;
}
selection = constrain( selection, 0, 4 );
for ( int t = 4; t >= 0; t-- ) {
pushMatrix();
translate(850, height/2);
tint(255, (selection==t)?255:153);
//
float myAngle = atan2(bestBlueX-bestRedX, bestBlueY-bestRedY);
//
rads[selection]= int(myAngle);
rotate(rads[t]);
puzzles[t].mask(masks[t]);
image(puzzles[t], 0, 0);
popMatrix();
}
break;
case 2:
fill(0, 10);
rectMode(CORNER);
rect(0, 0, width, height);
counter++;
if (counter > 10) {
stage = 3;
}
break;
case 3:
background(0);
image(einde, 700, height/2);
break;
case 4:
rectMode(CORNER);
fill(0, 0, 0);
rect(0, 0, width, height);
selection = 4;
rads[0] = -40;
rads[1] = 200;
rads[2] = 20;
rads[3] = 60;
rads[4] = 60;
counter = 0;
counter2 = 0;
stage = 0;
break;
}
}
void keyPressed() {
switch(stage) {
case 0:
if (key == ' ') {
stage = 1;
}
break;
case 1:
if (key == CODED) {
if (keyCode == DOWN) {
roterendeklik.play();
selection++;
roterendeklik.rewind();
}
if (keyCode == UP) {
roterendeklik.play();
selection--;
roterendeklik.rewind();
}
}
if (key == ENTER || key == RETURN) {
if (rads[0] == 0 && rads[1] == 0 && rads[2] == 0 && rads[3] == 0 && rads[4] == 0) {
stage = 2;
succes.play();
delay(2000);
succes.rewind();
}
else {
verkeerd.play();
delay(1000);
verkeerd.rewind();
}
}
break;
case 3:
if (key == ENTER || key == RETURN) {
stage = 4;
}
}
}
float colorDist(color c1, color c2) {
return dist(red(c1), green(c1), blue(c1), red(c2), green(c2), blue(c2));
}
//

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

I don't appreciate the way you work

My reference is a post from tfguy44 where he explains a problem in your code.
You must read your code, understand the code, identify the problem and solve it.

Instead you just paste it together without understanding it really.

You even have the Êm error again (line 83) which you already had. That shows that you are not really reading the code and are not really working with the code.

Since I don't have a camera I leave this thread and leave you to people with a cam. Bye bye.

Good luck.

Chrisir

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Chrisir.. The reason why I paste it together without understanding it really is because I'm still very new to Processing.

And because my deadline is so soon.. and there depends so much on it.. I try Chrisir.. I really try.

So please don't tell me that you don't appreciate the way I work.. It's the BEST I CAN.. :(

I hope you still want to help me..

If not.. I'm truly thankful for the amount of help you've already given me.

So, again, thanks alot.

The êm isn't an error, if I remove it, my code doesn't work at all..

You don't need a camera to understand errors in a code, do you?..

Well anyways, thanks.

Bye :(

Marc

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

And is there any chance, that if I do get the errors out of the code.. you might appreciate the way I work again and try to help me some more?

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

I just don't think it's fair for my teacher to ask such a hard assigment for someone who doesn't even had the time to practice with arrays and the basics and stuff.. you must understand my situation?

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

I'll really try more to understand all the codes.

Please don't "leave" me, as I said before, you guys are my only shot of doing this in time..

I'm sorry if it looks like I haven't put enough effort in it.

I've really been trying!!

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

I'll be back when you show something decent.

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Hello all,

I really took the entire day to get to know both codes.

And I think I managed to do so quite well (please correct me if I'm wrong.

I removed BestScore etc. and I have now used tfguy44's tips. (also, there's no weird E^ in it, haha)

This is my latest version, which still doesn't work correctly.

The line doesn't connect correctly between both the red and the blue dot.

It roams around freely, making it "trip". It's bouncing everywhere and so is the puzzle.

This is my current code:

import processing.serial.*;
import ddf.minim.*;
import processing.video.*;
Capture cam;
PImage spiegel;
AudioPlayer klik, roterendeklik, succes, verkeerd;
Minim minim;
Movie myMovie;
int counter, counter2 = 0;
int stage = 0;
PImage[] puzzles;
PImage[] masks;
PImage backdrop, intro, einde;
PImage pijllinks, pijlrechts, pijl2, pijl1;
float angle = 0;
float pangle = 0;
int selection = 4;
int[] rads = {
-40, 200, 20, 60, 60
};
void setup() {
minim = new Minim(this);
klik = minim.loadFile("klik.mp3");
roterendeklik = minim.loadFile("roterendeklik.mp3");
succes = minim.loadFile("succes.mp3");
verkeerd = minim.loadFile("verkeerd.mp3");
imageMode(CENTER);
intro = loadImage("intro.jpg");
einde = loadImage("einde.jpg");
puzzles = new PImage[5];
masks = new PImage[5];
for ( int t=0; t < 5; t++ ) {
puzzles[t] = loadImage("puzzle" + str( t+1 ) + ".jpg");
masks[t] = loadImage("puzzle" + str( t+1 ) + "mask.jpg");
}
size(1200, 700, P2D);
cam = new Capture(this, 480, 360, 60);
spiegel = createImage (480, 360, RGB);
}
void draw() {
switch(stage) {
case 0:
background(0, 0, 0);
image(intro, 700, height/2);
break;
case 1:
background(0, 0, 0);
if (cam.available() == true) {
cam.read();
}
cam.loadPixels();
int rI = 0;
int bI = 0;
int rF = int(red(cam.pixels[rI])); //Waarde van de meest rode pixel
int bF = int(blue(cam.pixels[bI])); //Waarde van de meest blauwe pixel
for ( int i = 0; i < cam.pixels.length; i++ ) {
if ( int(red(cam.pixels[i])) > rF ) {
rI= i;
rF = int(red(cam.pixels[i]));
}
if ( int(blue(cam.pixels[i])) > bF ) {
bI = i;
bF = int(blue(cam.pixels[i]));
}
spiegel.pixels[i] = cam.pixels[cam.width + (cam.width*(i/cam.width)) - 1 - i%cam.width]; //hier gebeurd de spiegel magie.
}
spiegel.updatePixels();
image(spiegel, 280, height/2);
int rX = rI % cam.width;
int rY = rI / cam.width;
int bX = bI % cam.width;
int bY = bI / cam.width;
stroke(255);
line(rX, rY, bX, bY);
for ( int t = 0; t < rads.length; t++ ) {
rads[t]%=360;
}
selection = constrain( selection, 0, 4 );
for ( int t = 4; t >= 0; t-- ) {
pushMatrix();
translate(850, height/2);
tint(255, (selection==t)?255:153);
//
angle = atan2( rY-bY, rX-bX );
if ( angle != pangle ) {
//println( angle );
pangle = angle;
}
rads[selection]= int(angle);
rotate(rads[t]);
puzzles[t].mask(masks[t]);
image(puzzles[t], 0, 0);
popMatrix();
}
break;
case 2:
fill(0, 10);
rectMode(CORNER);
rect(0, 0, width, height);
counter++;
if (counter > 10) {
stage = 3;
}
break;
case 3:
background(0);
image(einde, 700, height/2);
break;
case 4:
rectMode(CORNER);
fill(0, 0, 0);
rect(0, 0, width, height);
selection = 4;
rads[0] = -40;
rads[1] = 200;
rads[2] = 20;
rads[3] = 60;
rads[4] = 60;
counter = 0;
counter2 = 0;
stage = 0;
break;
}
}
void keyPressed() {
switch(stage) {
case 0:
if (key == ' ') {
stage = 1;
}
break;
case 1:
if (key == CODED) {
if (keyCode == DOWN) {
roterendeklik.play();
selection++;
roterendeklik.rewind();
}
if (keyCode == UP) {
roterendeklik.play();
selection--;
roterendeklik.rewind();
}
}
if (key == ENTER || key == RETURN) {
if (rads[0] == 0 && rads[1] == 0 && rads[2] == 0 && rads[3] == 0 && rads[4] == 0) {
stage = 2;
succes.play();
delay(2000);
succes.rewind();
}
else {
verkeerd.play();
delay(1000);
verkeerd.rewind();
}
}
break;
case 3:
if (key == ENTER || key == RETURN) {
stage = 4;
}
}
}
float colorDist(color c1, color c2) {
return dist(red(c1), green(c1), blue(c1), red(c2), green(c2), blue(c2));
}
//

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

@Chrisir

I'd like to know if you appreciate this work a little bit more? I really did my best and I'm hoping for your help too ;)

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Well, when the line Works Not as Good as before, then there is an error that you didn't have before

Read closely and find it

Compare to previous versions

Understand

I'll be back tomorrow

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

float distance = colorDist(cam.pixels[t], trackColor2);

Is it because I haven't used this?

tfguy44

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Questions to help aid your understanding:

1) What are you actually comparing on lines 63 and 67?

2) What happens when this comparison tries to compare a white pixel (255,255,255) and a nearly red pixel (254,0,0) or a nearly blue pixel (0,0,254)?

3) Why would using the color comparing function defined on line 182 be better?

4) What are lines 100 to 103 doing?

5) Where is the value of the variable "pangle" used?

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Thanks alot!

I've got a much better code now.

It actually rotates when I rotate in front of the camera!

However, it does this with these giant steps.. I need to make the giant steps smaller so it looks more smooth, any suggestions?

I've now got a couple of new problems.. hoping you guys could give me some tips to lead me in the right direction.

At the beginning, the application start switching to outer circles without any reason. (I need to stop it with up&down arrows). How can I get the application to always start at the inner circle?

The picture is horizontal when the blue object is vertical on top of the red object. I'd like to change this into: when the blue object is at the right side of the red object..

But the main problem is this:

When I have the innercircle on the correct position, I need to switch to an outer circle.

When I do that, I still have my hand with the blue/red dot in the same position, which is the correct postion for all circles/pieces.. That way, solving this puzzle is easily done by holding your hand in the same position and pressing UP on the keyboard..

I need to, somehow "randomize" the correct position of the hand for each circle. And then it needs to "lock", so it won't be able to move (maybe a good sound or some sort of glow when this happens but that's something for later). This way the player is forced to know that this is the correct position and to switch to an outer circle.

Here's my current code:

//Libraries
import processing.serial.*;
import ddf.minim.*;
import processing.video.*;
Capture cam;
PImage spiegel;
//Opzetten van geluid en video variabelen
AudioPlayer klik, roterendeklik, succes, verkeerd;
Minim minim;
Movie myMovie;
//Tellers die gebruikt worden tijdens het einde van het programma en zet de staat van het programma weer op 0.
int counter, counter2 = 0;
int stage = 0;
//Arrays die voor de plaatjes en maskers die worden gebruikt.
PImage[] puzzles;
PImage[] masks;
PImage backdrop, intro, einde;
//De pijlen in het webcamscherm.
//PImage pijllinks, pijlrechts, pijl2, pijl1;
//De startpositie van de puzzel, converteren van graden naar radians.
int selection = 4;
//De ringen draaien
int[] rads = {
-40, 200, 20, 60, 60};
color trackColor; //Maakt een variabele van het type color aan, genaamd trackColor.
color trackColorB; //Maakt een variabele van het type color aan, genaamd trackColor.
int currentX, currentY, closestX, closestY; //Maakt variabelen aan van het type int voor de x- en y-waarden.
int currentXB, currentYB, closestXB, closestYB; //Maakt variabelen aan van het type int voor de x- en y-waarden.
float bestScore; //Maakt een variabele aan van het type float, om de beste score in op te slaan.
float bestScoreB; //Maakt een variabele aan van het type float, om de beste score in op te slaan.
color currentColor; //Maakt een variabele aan om per pixel de huidige kleur in op te slaan.
color currentColorB; //Maakt een variabele aan om per pixel de huidige kleur in op te slaan.
float distance; //Maakt een variabele aan waarin de afstand tussen twee kleuren kan worden opgeslagen.
float distanceB; //Maakt een variabele aan waarin de afstand tussen twee kleuren kan worden opgeslagen.
boolean canTwist = true; //Maakt een nieuwe boolean aan met de naam canTwist (twist ivm draaien) die standaard op true staat.
int vertraging = 0; //Maakt een integer aan die standaard op 0 staat.
PFont font; //Maakt de standaard fontclass aan met de naam font.
float time; //Een nieuwe float met de naam "time".
int x1, y1, x2, y2;
float angle;
float pangle = 0;
//Laden van de plaatjes, opzetten van de grootte van het programma.
void setup() {
minim = new Minim(this);
klik = minim.loadFile("klik.mp3");
roterendeklik = minim.loadFile("roterendeklik.mp3");
succes = minim.loadFile("succes.mp3");
verkeerd = minim.loadFile("verkeerd.mp3");
imageMode(CENTER);
intro = loadImage("intro.jpg");
einde = loadImage("einde.jpg");
puzzles = new PImage[5];
masks = new PImage[5];
for ( int t=0; t < 5; t++ ) {
puzzles[t] = loadImage("puzzle" + str( t+1 ) + ".jpg");
masks[t] = loadImage("puzzle" + str( t+1 ) + "mask.jpg");
}
//pijllinks = loadImage("pijl_links.png");
// pijlrechts = loadImage("pijl_rechts.png");
//pijl1 = loadImage("pijl_omhoog.png");
// pijl2 = loadImage("pijl_omlaag.png");
size(1200, 700, P2D);
cam = new Capture(this, 480, 360, 60); //Grootte van webcambeeld aangepast, zodat het beeld niet uitgerekt wordt.
spiegel = createImage (480, 360, RGB); //Grootte van webcambeeld aangepast, zodat het beeld niet uitgerekt wordt.
trackColor = color(255, 0, 0); //Voert de kleur rood in, in de variabele trackColor.
trackColorB = color(0, 0, 255); //Voert de kleur rood in, in de variabele trackColor.
font = loadFont("Candara-32.vlw"); //Laadt het lettertype 04b03 met een grootte van 24 pt.
textFont(font); //Zet de huidige font op de font die is ingeladen bij loadFont.
time = 180; //Zet de tijd op 180 seconden oftewel 3 minuten.
}
//Het programma maakt gebruik van verschillende "scene's" genaamd case.
void draw() {
switch(stage) {
//Stage 0, zorgt voor het intro scherm.
case 0:
background(0, 0, 0);
image(intro, 700, height/2);
break;
//Stage 1, het begin van de puzzel.
case 1:
background(0, 0, 0);
// image(pijllinks, 50, 180);
// image(pijlrechts, 430, 180);
// image(pijl1, 240, 50);
// image(pijl2, 240, 310);
if (cam.available() == true) {
cam.read();
}
cam.loadPixels();
for (int i = 0; i <cam.pixels.length; i++) {
spiegel.pixels[i] = cam.pixels[cam.width + (cam.width*(i/cam.width)) - 1 - i%cam.width]; //Hier gebeurt de spiegel magie.
}
spiegel.updatePixels();
imageMode(CORNER); //Hij tekent het plaatje vanuit de hoek.
image(spiegel, 0, 0); //Het webcambeeld na enkele pogingen verplaatst naar de linkerbovenhoek, anders werkte de kleurherkenning niet goed.
imageMode(CENTER); //Hij tekent het plaatje vanuit het midden.
bestScore = dist(255, 255, 255, 0, 0, 0); //Maakt een nieuwe variabele van het type float genaamd bestScore aan.
//En "stop" hier de maximale afstand tussen twee RGB kleuren in.
closestX = 0; //Zet in de variabele closestX het getal 0.
closestY = 0; //Zet in de variabele closestY het getal 0.
closestXB = 0; //Zet in de variabele closestX het getal 0.
closestYB = 0; //Zet in de variabele closestY het getal 0.
//Verderop in het programma gaan we voor elke pixel uitrekenen in hoeverre de kleur hiervan overeenkomt met de kleur
//die we zoeken. De afstand tussen de kleur van de onderzochte pixel en de gezochte kleur moet zo klein mogelijk
//zijn. In de variabele bestScore wordt deze afstand opgeslagen. Hoe lager het getal, hoe beter de kleur van de
//gevonden pixel overeenkomt met de gezochte kleur. We zetten bestScore in het begin op 500, een waarde die, zo
//zullen we zien, gemakkelijk te overtreffen is.
for (int i = 0; i < spiegel.pixels.length; i++ ) { //Doorloopt de iteratie voor de pixel.
currentX = i%spiegel.width; //Rekent de x-waarde behorende bij de huidige pixel uit.
currentY = (i-currentX)/spiegel.width; //Rekent de y-waarde behorende bij de huidige pixel uit.
currentColor = spiegel.pixels[i]; //Maakt een variabele van het type color genaamd currentColor, en stopt
//hier de kleurwaarde van de bij de iteratie behorende pixel in (dus van pixel 0 t/m 76799).
distance = dist(red(currentColor), green(currentColor), blue(currentColor),
red(trackColor), green(trackColor), blue(trackColor));
//Stopt in de variabele distance de uitkomst van de functie dist
//met als parameters de kleurwaarden van de huidige pixel en de kleurwaarden van de gezochte kleur.
//De functie dist rekent de afstand tussen haar parameters uit.
if (distance < bestScore) { //Als de afstand tussen de kleur van de huidige pixel en de gezochte kleur kleiner is
// dan al eerder gevonden pixels,
bestScore = distance; // zet dan de huidige afstand in de variabele bestScore
closestX = currentX; // en sla de hierbij behorende x-
closestY = currentY; // en y-waarden op.
}
}
if (bestScore < 200) { //Als bestScore lager is dan 200 (geen idee wat, dit komt allemaal letterlijk uit de reader die op BB staat).
noStroke(); //Geen lijntje tekenen
smooth(); //Anti-alias randen
fill (255, 0, 0); //Kleur van het onderstaande is groen.
ellipse(closestX, closestY, 50, 50); //Tekent een rondje van 50 x 50 pixels op de positie waar de meest rode kleur wordt gevonden.
}
//BLAUW PUNT
bestScoreB = dist(255, 255, 255, 0, 0, 0); //Maakt een nieuwe variabele van het type float genaamd bestScore aan.
for (int i = 0; i < spiegel.pixels.length; i++ ) { //Doorloopt de iteratie voor de pixel.
currentXB = i%spiegel.width; //Rekent de x-waarde behorende bij de huidige pixel uit.
currentYB = (i-currentXB)/spiegel.width; //Rekent de y-waarde behorende bij de huidige pixel uit.
currentColorB = spiegel.pixels[i]; //Maakt een variabele van het type color genaamd currentColor, en stopt
//hier de kleurwaarde van de bij de iteratie behorende pixel in (dus van pixel 0 t/m 76799).
distanceB = dist(red(currentColorB), green(currentColorB), blue(currentColorB),
red(trackColorB), green(trackColorB), blue(trackColorB));
//Stopt in de variabele distance de uitkomst van de functie dist
//met als parameters de kleurwaarden van de huidige pixel en de kleurwaarden van de gezochte kleur.
//De functie dist rekent de afstand tussen haar parameters uit.
if (distanceB < bestScoreB) { //Als de afstand tussen de kleur van de huidige pixel en de gezochte kleur kleiner is
// dan al eerder gevonden pixels,
bestScoreB = distanceB; // zet dan de huidige afstand in de variabele bestScore
closestXB = currentXB; // en sla de hierbij behorende x-
closestYB = currentYB; // en y-waarden op.
}
}
if (bestScoreB < 200) { //Als bestScore lager is dan 200 (geen idee wat, dit komt allemaal letterlijk uit de reader die op BB staat).
noStroke(); //Geen lijntje tekenen
smooth(); //Anti-alias randen
fill (0, 0, 255); //Kleur van het onderstaande is blauw.
ellipse(closestXB, closestYB, 50, 50); //Tekent een rondje van 50 x 50 pixels op de positie waar de meest rode kleur wordt gevonden.
}
// float distancePijlLinks = dist(50, 180, closestX, closestY); //Berekent de afstand tussen de pijl naar links (die staat namelijk op x=50 en y=180) en plek waar de meest rode pixel zich bevindt.
// float distancePijlRechts = dist(430, 180, closestX, closestY); //Berekent de afstand tussen de pijl naar rechts (die staat namelijk op x=430 en y=180) en plek waar de meest rode pixel zich bevindt.
// float distancePijlOmhoog = dist(240, 50, closestX, closestY); //Berekent de afstand tussen de pijl omhoog (die staat namelijk op x=240 en y=180) en plek waar de meest rode pixel zich bevindt.
// float distancePijlOmlaag = dist(240, 310, closestX, closestY); //Berekent de afstand tussen de pijl omlaag (die staat namelijk op x=240 en y=310) en plek waar de meest rode pixel zich bevindt.
//
// if (distancePijlRechts < 20 && canTwist) { //Als die afstand tussen de pijl naar rechts en de meest rode pixel kleiner is dan 20 pixels én canTwist = true, dan gebeurt er dit:
// klik.play(); //de gegevens die eerst bij pijltje naar rechts stonden vanaf hier...
// switch( selection ) {
// case 0:
// rads[0]+=10;
// break;
// case 1:
// rads[1]+=10;
// break;
// case 2:
// rads[2]+=10;
// break;
// case 3:
// rads[3]+=10;
// break;
// case 4:
// rads[4]+=10;
// break;
// }
// klik.rewind(); //tot hier.
// canTwist = false; //Zet de boolean canTwist op false.
// vertraging = 0; //deze wordt op 0 gezet.
// }
//
// else if (distancePijlLinks < 20 && canTwist) { //Als die afstand tussen de pijl naar links en de meest rode pixel kleiner is dan 20 pixels én canTwist = true, dan gebeurt er dit:
// klik.play(); //de gegevens die eerst bij pijltje naar links stonden vanaf hierrr
// rads[selection]-=10;
// klik.rewind(); //tot hierrr.
// canTwist = false; //Zet de boolean canTwist op false.
// vertraging = 0; //deze wordt op 0 gezet.
// }
//
// if (distancePijlOmhoog < 20 && canTwist) { //Als die afstand tussen de pijl omhoog en de meest rode pixel kleiner is dan 20 pixels én canTwist true, dan gebeurt er dit:
// roterendeklik.play(); //de gegevens die eerst bij pijltje omhoog stonden vanaf hierrr.
// selection--;
// roterendeklik.rewind(); //tot hierrr.
// canTwist = false; //Zet de boolean canTwist op false.
// vertraging = 0; //deze wordt op 0 gezet.
// }
//
// if (distancePijlOmlaag < 20 && canTwist) { //Als die afstand tussen de pijl omlaag en de meest rode pixel kleiner is dan 20 pixels én canTwist = true, dan gebeurt er dit:
// roterendeklik.play(); //de gegevens die eerst bij pijltje omlaag stonden vanaf hier...
// selection++;
// roterendeklik.rewind(); //tot hier.
// canTwist = false; //Zet de boolean canTwist op false.
// vertraging = 0; //deze wordt op 0 gezet.
// }
//
// vertraging++; //ieder frameverversing komt komt er + 1 bij.
//
// if (vertraging >= 4) { //Dit getal bepaalt hoeveel seconden(?) je moet wachten voordat die pijltoetsen het weer doen. Dus na meer dan of gelijk aan 4 frameverversingen, gebeurt er dit:
// canTwist = true; // canTwist gaat weer op true, dus er gebeurt weer wat en het plaatje mag weer draaien.
// }
//
if (time > 0.0) { // Wanneer de tijd op meer dan 0.0 seconden staat, gebeurt er dit:
time = time - (1.0/frameRate); // Van de tijd gaat iedere seconde één seconde af (aftellen).
}
if (time <= 0.0) { // Wanneer de tijd gelijk is aan of op minder dan 0.0. staat, gebeurt er dit:
stage = 4;
}
if (rads[0] == 0 && rads[1] == 0 && rads[2] == 0 && rads[3] == 0 && rads[4] == 0) { // Enter
stage = 2;
succes.play();
delay(2000);
succes.rewind();
}
else {
}
x2 = closestXB;
y2 = closestYB;
x1 =closestX;
y1 = closestY;
for ( int t = 0; t < rads.length; t++ ) {
rads[t]%=360;
}
selection = constrain( selection, 0, 4 );
for ( int t = 4; t >= 0; t-- ) {
pushMatrix();
translate(850, height/2);
tint(255, (selection==t)?255:153);
//rotate(-angle); //hoe het moet draaien
angle = atan2(x1-x2,y1-y2);
if ( angle != pangle ) {
//println( angle );
pangle = angle;
}
rads[selection]= int(angle);
rotate(-rads[t]);
puzzles[t].mask(masks[t]);
image(puzzles[t], 0, 0);
popMatrix();
// puzzles[t].mask(masks[t]); //image mask die moet draaien
// image(puzzles[t], 0, 0); // image die moet draaien
// popMatrix();
}
stroke(150);
line(x1, y1, x2, y2);
angle = atan2(x1-x2, y1-y2); //berekening voor te weten hoeveel graden moet het draaien
println(angle);
//pushMatrix();
// translate(100, 200);
// rotate(-angle);
// rect(0, 0, 50, 50);
//popMatrix();
fill(130, 220, 30); // Geeft de tekst een witte kleur.
text("TIJD: " + round(time), 320, 400); // Geeft de werkelijke tijd die nog over is weer.
//ROTATIE "LOCKED"
if (rads[0] <0 ) { //als de rotatie is kleiner dan een moet het eentje naar buiten schuiven
roterendeklik.play(); //speel de audio
selection--; //schuiv naar buiten
roterendeklik.rewind();
}
break;
case 2:
fill(0, 10);
rectMode(CORNER);
rect(0, 0, width, height);
counter++;
if (counter > 10) {
stage = 3;
}
break;
case 3:
background(0);
image(einde, 700, height/2);
break;
case 4:
rectMode(CORNER);
fill(0, 0, 0);
rect(0, 0, width, height);
selection = 4;
rads[0] = -40;
rads[1] = 200;
rads[2] = 20;
rads[3] = 60;
rads[4] = 60;
counter = 0;
counter2 = 0;
stage = 0;
break;
}
}
void keyPressed() {
switch(stage) {
case 0:
if (key == ' ') {
stage = 1;
}
break;
case 1:
if (key == CODED) {
if (keyCode == DOWN) {
roterendeklik.play();
selection++;
roterendeklik.rewind();
}
if (keyCode == UP) {
roterendeklik.play();
selection--;
roterendeklik.rewind();
}
}
if (key == ENTER || key == RETURN) {
if (rads[0] == 0 && rads[1] == 0 && rads[2] == 0 && rads[3] == 0 && rads[4] == 0) {
stage = 2;
succes.play();
delay(2000);
succes.rewind();
}
else {
verkeerd.play();
delay(1000);
verkeerd.rewind();
}
}
break;
case 3:
if (key == ENTER || key == RETURN) {
stage = 4;
}
}
}

I hope you guys appreciate my effort. I'm really trying and I'm not asking you guys to do it for me as you may think.

Greetings and thanks,

Marc

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

The new version of this has been uploaded in the dropbox account ;)

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

No one? :(

tfguy44

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Your code looks like a mess.
Your comments, while I'm sure are meaningful to you, are useless to me.
I don't have a camera or serial inputs to use to try out your code.
Even if I did, I don't have the image and sound files.
Yes, that means I have never even managed to get your code to run.
I don't even know what it looks like!

Now, addressing your questions:

A) Make giant steps smaller.
I'm not sure what "steps" you are referring to here - I assume you mean the amount that something rotates.
You could use the map() function to take a range of values onto another (possibly smaller) range of values.

The value that you would adjust would be the large step.

B) Switching to outer circles without any reason.

I suspect that this is cause by line 322, but I can't test this since I can't run your code.
What happens if you comment out that line?
It's nearly impossible for me to track your program's flow of execution, so you're on your own with this one.

C) Alignment issues.

I assume you do a rotate() at some point to rotate your objects. If they are off by a quarter turn, you just need to adjust the amount each rotates by adding in an additional rotation of (-?)HALF_PI radians.

D) The main problem.

Sounds like you're setting the active piece's rotation based directly on the angle between the red and blue dot. This is not right. You should have each piece keep track of it's own current rotation, and adjust that rotation based on how much the controller is turned.

E) Randomized starting positions.
If you have variables (maybe an Array of them - wait, isn't that what rads[] is?) that tracked each piece's rotation, you could randomize them in setup to be between 0 and 360 degrees (or 0 and TWO_PI radians).

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Hey tfguy44,

Thanks again for your wonderful reply.

I know it's messy, but to me this mess is required to understand the code properly, haha.

The images/sound files etc. are in the dropbox account as I already said ;)

But since you've got no cam you don't have to look at them.

Even without you being able to run the code, your comments have been so helpful. Thanks alot.

Before reading your comment I already fixes the B (line 322), you were right. It works perfectly due to putting that in //comments.

C. has also been no problem ;) and works now correctly.

I decided to skip A. (which you perfectly understood by the way), since more smoothness made it too hard to complete the puzzle.

The D&E problem is the main problem at this very moment.

And since it's so late, i'm kinda stressing out about this part.

Could you, maybe, show me/point out which part of the code I need to adjust to be able to randomize the starting position for each piece individual?

That'd be the last/most important question I need to ask about this, cause then it's finished!!

tfguy44

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Well, since we're down to the last thing, let's shoot for something fancy.

Line 290 is the problem:

rads[selection]= int(angle);

This outright sets the rotation angle for the currently selected piece.

What we want to do instead is adjust the value in rads[selection] gradually.
There are a couple of ways I can think to do this.

The first is to change the value by an amount depending on how much the controller was rotated:

rads[selection] += int(angle) - int(pangle);

Notice that this is where the variable "pangle" gets used! (Remember I asked about that in my last post, questions #4 and #5?) You'll also need the code that updates the value of pangle (it was lines 100 to 103 at one point, not sure if it's in there still)!

The other way is just sneaky:

rads[selection] = lerp( rads[selection], int(angle), 0.7 );

It uses lerp() (it's in the reference) to adjust the rotation angle bit by bit; it gets to the right position eventually. This might not be what you want (as you can still have one piece in the right position and tap UP (but at a slower rate) to solve it.

victoryma..

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Thanks for your reply!:D

However, maybe because it's late night here, I can't seem to get it working in my code..

When I replace the: rads[selection] += int(angle) - int(pangle);.. the rotation doesn't work at all anymore.. :/

And I can't seem to get the sneaky way (even though I looked at the reference)

I'm too tired to do anything right now.
I've got till tomorrow 13:00 european time..

I'm off to bed now.

If you could do something for me (even though you've done so much already), it'd be great to wake up with.

Anyways, a thousand thanks to you for your kind and helpful replies.

Good night,

Marc

calsign

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

Just an observation: Why are you converting it to an int? If the data is stored in radians, then that will seriously throw off the rotation...

tfguy44

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

I don't know what I'm doing. I might know if I could get this to run at all.

The point is that - somehow - the values stored in rads[] need to be ADJUSTED, not simple SET.
Assuming they are stored in radians, rads[selection] += angle - pangle; should work fine.

Of course you may have to worry about being able to check for the rotations being close enough to the correct position for them to be right...

Chrisir

Re: Rotation of a puzzle by color detection through my webcam? [hard]

1 year ago

did you hand it in?

What did the teacher say?

I must say, you did a very good job after all.

You gonna be a good programmer!

Chrisir

Top Reply

Replies(90)

Statistics

Tags

Actions

Related Posts