I need your help within the next 7 hours!!! -only just with setting up a button correctly.

Programming Questions

j.skafte

I need your help within the next 7 hours!!! -only just with setting up a button correctly.

in Programming Questions • 2 years ago

Hello there! :-)

I am currently sitting here working all I can on getting a hand-in ready for tomorrow (or today - Friday 19th). I have to pass!

I have only just learned working with Processing tonight. I think that what I need help with it is actually quite simple, but I haven't yet fully understood the basics, so your help will be highly appreciated, as I have now been trying to figure it out myself for hours...

I have uploaded two links below. The first one being a short visualized explanation of what I wish to do, and the second being my codes so far.

1 - http://jonasskafte.com/explanation.pdf
2 - http://jonasskafte.com/Mousehole7.zip

I hope to hear back from you soon!

Thanks in advance and kind regards

/Jonas.

Here are my codes so far - please excuse me if they are a bit messy...

// A whole to crawl into!
// Jonas Skafte
// http://www.jonasskafte.com

//Images

PImage img;

PImage teddy2;

PImage teddy3;

PImage teddy4;

PImage teddy;
float xpos;
float ypos;
float drag = 30;

//Link

int circleX, circleY; // Position of circle button
int circleSize = 45;   // Diameter of circle
color circleColor, baseColor;
color circleHighlight;
color currentColor;
boolean circleOver = false;

void setup() {
size(1152,792);
img = loadImage("hole.jpg");
teddy = loadImage("mouse3.PNG");
teddy2 = loadImage("mouse4.png");
teddy3 = loadImage("Cat.jpg");
xpos = width/2;
ypos = height/2;
circleX = width/2+circleSize/2+10;
circleY = height/2;
circleColor = color(0);
circleHighlight = color(100);
ellipseMode(CENTER);

}

void draw() {
noCursor();
background(0);
image(img,0,0);
float difx = mouseX - xpos-teddy.width/2;
if (abs(difx) > 2) {
    xpos = xpos + difx/drag;
    xpos = constrain(xpos, 0, width-teddy.width);

if(circleOver) {
    fill(circleHighlight);
} else {
    fill(circleColor);
}
ellipse(circleX, circleY, circleSize, circleSize);

}

float dify = mouseY - ypos-teddy.height/2;
if (abs(dify) > 1) {
    ypos = ypos + dify/drag;
    ypos = constrain(ypos, 0, height-teddy.height);
}

// Display the sprite at the position xpos, ypos

    image(teddy2, xpos, ypos);
if(mousePressed) {
      image(img,0,0);
    image(teddy, xpos, ypos);

}

}

Replies(6)

jeff_g

Re: I need your help within the next 7 hours!!! -only just with setting up a button correctly.

2 years ago

Couple things... Do you need the black circle if you're hiding it? I don't see any purpose for it, but it's easy enough to get in there.. set these.

int circleSize = 35; // Diameter of circle
circleX = 645;
circleY = 460;

However, the mouth of the mouse does not line up with the mouseX & mouseY. You can see this by putting this in your draw.

fill(255,0,0);
ellipse(mouseX, mouseY, 20, 20);

So you'll need to some type of offset to estimate the mouse's mouth, which looks to be close to mouseX-120, mouseY-110. So do something like this outside of your draw.

void mouseClicked() {
int mx = mouseX-120;
int my = mouseY-110;
if (circleX - circleSize < mx && circleX + circleSize > mx && circleY - circleSize < my && circleY + circleSize > my) {
catsound.trigger();
catpic = true;
}
}

Set something in your draw cycle to hide the mouse pic and show the cat while catpic is true. Use some count method.. when i = 50, set i=0 and catpic=false.

if (catpic && catcount < 50) {
image(teddy3, 0, 0);
catcount++;
} else {
image(img, 0,0);
catcount = 0;
catcount = false;
}

You could use a sound library like minim for the cat sound or do something yourself like this..

import javax.sound.sampled.AudioSystem;
import javax.sound.sampled.Clip;
import javax.sound.sampled.AudioInputStream;
class AudioClip {
Clip clickClip;
public AudioClip(String aspath) {
try {
File mediafile = new File(dataPath(aspath));
AudioInputStream ais = AudioSystem.getAudioInputStream(mediafile);
this.clickClip = AudioSystem.getClip();
this.clickClip.open(ais);
}
catch (Exception e) {
}
}
public void trigger() {
this.clickClip.setFramePosition(0);
this.clickClip.start();
}
public void close() {
this.clickClip.stop();
this.clickClip = null;
}
}

j.skafte

Re: Re: I need your help within the next 7 hours!!! -only just with setting up a button correctly.

2 years ago

Hi Jeff G,

Thank you so much! -it really makes me happy, not only to get further with my work, but also to know that there are people like you out there willing to help.

I still have a few hours left before hand-in (13pm GMT+0:00), and I haven't just yet cracked the nut.

Here are my lose ends / Q&A's:

1. Do you need the black circle if you're hiding it?
Nope - I only just need the 'hole' to be an active area.

2. if (catpic && catcount < 50) {
How do I define catcount?

3. catpic = true;
Then it says: cannot convert from boolean to PImage... ?

4.
Is it in any way possible to only make the button active when the mouse 'jumps into the hole'? -don't know if it would actually do it now if the errors weren't there.

5.
I am not sure if I will be able to apply the cat sound before the deadline, so I might just have to skip it. I am a little confused right now (even though it might just be straight forward), and a bit concerned that I won't make it. So - if you for some reasons should have the time to see if you can apply the things you mention and perhaps clean up my script a little, then I would be really really happy - and promise you that I will look more into how it all fits together after the hand-in (found this assignment quite fun).

All the best,

/Jonas.

j.skafte

Re: I need your help within the next 7 hours!!! -only just with setting up a button correctly.

2 years ago

Okay -

As I have gone a bit further, here is a sum-up of what I now need - for anyone to pitch in.

1.
Make cat picture appear when the mouse's head is clicking on the hole.

2.
Make mouse invisible when cat appears.

3.
If possible, then let my cat sound play as well when cat appears.

Below link is an updated package.

http://jonasskafte.com/Mousehole8.zip
_{(perhaps also see explanation pdf which is linked to in original post)}

Please note that on top of the hole is a fully transparent circle button, and that the red cursor will be removed in the end.

I would really appreciate if anyone would add their contribution directly to the file - save it - and send it back to me, as I am meeting a deadline in about 3 hours.

j.skafte (at) gmail.com

Any help will be highly appreciated, and I hope to be able to help you back somehow someday.

Jonas.

j.skafte

Re: Re: I need your help within the next 7 hours!!! -only just with setting up a button correctly.

2 years ago

PLEASE HELP!!!

In this version you can slightly see the 'invisible' button (hope that helps).

http://jonasskafte.com/Mousehole8_2.zip

I only have about an hour left - you can help me pass! :-)

jeff_g

Re: I need your help within the next 7 hours!!! -only just with setting up a button correctly.

2 years ago

Sorry, I'm in the U.S. on the east coast, so it was midnight when I sent that last message. Just now getting to read this and it looks like it's too late. Here is what I was thinking...

// A whole to crawl into!
// Jonas Skafte
// http://www.jonasskafte.com
import javax.sound.sampled.AudioSystem;
import javax.sound.sampled.Clip;
import javax.sound.sampled.AudioInputStream;
//Images
PImage img;
PImage teddy2;
PImage teddy3;
PImage teddy4;
PImage teddy;
float xpos;
float ypos;
float drag = 30;
PImage catpic;
boolean catpicenabled = false;
int catcount = 0;
AudioClip catsound; //must be a .wav file
//Link
int circleX, circleY; // Position of circle button
int circleSize = 35; // Diameter of circle
void setup() {
size(1152,792);
img = loadImage("hole.jpg");
teddy = loadImage("mouse3.PNG");
teddy2 = loadImage("mouse4.png");
catpic = loadImage("Cat.jpg");
catsound = new AudioClip("angry4.wav");
xpos = width/2;
ypos = height/2;
circleX = 645;
circleY = 460;
}
void draw() {
noCursor();
background(0);
if (catpicenabled && catcount < 100) {
image(catpic, 0,0);
catcount++;
}
else {
image(img,0,0);
catcount = 0;
catpicenabled = false;
}
float difx = mouseX - xpos-teddy.width/2;
if (abs(difx) > 2) {
xpos = xpos + difx/drag;
xpos = constrain(xpos, 0, width-teddy.width);
}
float dify = mouseY - ypos-teddy.height/2;
if (abs(dify) > 1) {
ypos = ypos + dify/drag;
ypos = constrain(ypos, 0, height-teddy.height);
}
// Display the sprite at the position xpos, ypos
image(teddy2, xpos, ypos);
if(mousePressed) {
image(img,0,0);
image(teddy, xpos, ypos);
}
}
void mouseClicked() {
int mx = mouseX-120;
int my = mouseY-110;
if (circleX - circleSize < mx && circleX + circleSize > mx && circleY - circleSize < my && circleY + circleSize > my) {
catsound.trigger();
catpicenabled = true;
}
}
void stop()
{
if (catsound != null) {
catsound.close();
}
super.stop();
}
class AudioClip {
Clip clickClip;
public AudioClip(String aspath) {
try {
File mediafile = new File(dataPath(aspath));
AudioInputStream ais = AudioSystem.getAudioInputStream(mediafile);
this.clickClip = AudioSystem.getClip();
this.clickClip.open(ais);
}
catch (Exception e) {
}
}
public void trigger() {
this.clickClip.setFramePosition(0);
this.clickClip.start();
}
public void close() {
this.clickClip.stop();
this.clickClip = null;
}
}

j.skafte

Re: I need your help within the next 7 hours!!! -only just with setting up a button correctly.

2 years ago

Hi Jeff G,

It was actually too late, and I decided to go with what I had at the time. Though as I was sitting and waiting for my time to present, I saw your response on my phone, and just quickly added the update to my file in the very last minute. It would have been much more boring if the function didn't work - so thank you SO much for helping me with that!

And in retrospect, what is actually the most important to me, is not just to have a well done project, but to know and experience that there are people like you out there willing to help.

THANKS!

Jonas.

Top Reply