I’m trying to add a mouse press event to an image which I think is possible since I’ve seen may questions posted about it on the forum. However I have an image of a play button. I want to use this image as a button to play/pause music. So far I haven’t found anything on mouse press for images to play music. Does anyone know where I can read more about this specific topic? Still looking through documentation haven’t found anything yet. Heres some snip it of my code:
PImage play;
play = loadImage("play.png"); // in setup
imageMode(CORNER); // in draw
image(pause, 80, 15, 50, 50); // in draw
If you want something to happen when you click somewhere, you got to compare the click's coordinates to the object's coordinates.
Here's an example that you can adapt to your needs:
void mouseClicked() {
if (mouseX >= playButton.x && mouseX <= playButton.x + playButton.width && mouseY >= playButton.y && mouseY <= playButton.height) {
// user clicked on the play button
}
// another image in case you want to check for more than one button:
if (mouseX >= pauseButton.x && mouseX <= pauseButton.x + pauseButton.width && mouseY >= pauseButton.y && mouseY <= pauseButton.height) {
// user clicked on the pause button
}
}
playButton.something and pauseButton.something being the coordinates of whatever you want to catch clicks on, not necessarily a full-on object.
Have fun!
Related
I was trying to make a very simple game but I'm having trouble with mouse events. I want to only click once and the whole canvas will be cleared but what happen is it keeps on coming back to its original canvas if I'm not clicking anymore.
if((mouseX >= 100) && (mouseX <= 235) &&
(mouseY >= 490) && (mouseY <= 540) &&
(mousePressed))
{
clear ();
slide1 ();
}
This is the second tab:
void slide1()
{
clear ();
background (30);`enter code here`
slide1 = loadImage ("slide1.jpg");
image (slide1,100,0,400,300);
}
Without seeing a complete, working example, it is difficult to tell for certain. However, it seems likely that you have confused clear() and background(). The easiest way to wipe the screen is by calling background() -- for example at the beginning of every draw() frame.
From the Processing reference:
clear(): "Clears the pixels within a buffer. This function only works on PGraphics objects"
background(): "This function is typically used within draw() to clear the display window at the beginning of each frame, but it can be used inside setup() to set the background on the first frame of animation or if the backgound need only be set once."
e.g. (based on your code):
PImage slide1;
void setup(){
size(512,512);
slide1 = loadImage ("https://processing.org/img/processing3-logo.png");
}
void draw(){
background (30); // clear screen every frame
if(mousePressed) { // show image whenever mouse is down
image (slide1,0,0);
}
}
This always clears the canvas.
Alternately, if you only want to wipe the canvas on a click, don't call background each draw -- instead, call background only on mousePressed. However, in your case (showing an image) it looks like you might also want to wipe again on mouseReleased (so that the image disappears). You may wish to use the built-in mousePressed() and mouseReleased() Processing functions for this and call background in each one.
I don't think this is what you actually want, but: the actual answer to the title question ("How can I clear the canvas using one click in processing?") is:
void draw(){
line(mouseX,mouseY,pmouseX,pmouseY);
}
void mouseClicked(){
background(192);
}
I´ve tried looking up the question but sadly I wasnt able to find my an answer to my question in other threads. :(
My problem is the following:
I´ve got my hands on a code which transfers clickdata into a heatmap.
Now what I would need is a way to transfer said clickdata into a table which documents the coordinates.
Here is the (hopefully) relevant part out of the code:
void mouseReleased()
{
if (mouseX >= 0 && mouseX < backgroundImage.width && mouseY >= 0 && mouseY < backgroundImage.height)
{
// blit the clickmapBrush onto the (offscreen) clickmap:
clickmap.blend(clickmapBrush, 0,0,clickmapBrush.width,clickmapBrush.height,mouseX-clickmapBrush.width/2,mouseY-clickmapBrush.height/2,clickmapBrush.width,clickmapBrush.height,BLEND);
// blit the clickmapBrush onto the background image in the upper left corner:
image(clickmapBrush, mouseX-clickmapBrush.width/2, mouseY-clickmapBrush.height/2);
// render the heatmapBrush into the gradientMap:
drawToGradient(mouseX, mouseY);
The code is used for the software "Processing".
I hope my question is specific enough.
Thanks in advance! =)
Here is a sample Processing sketch that will record a list of coordinates for each mouse click:
// We will store a list of coordinates,
// each representing a single mouse click's position
ArrayList<PVector> clickData;
void setup() {
clickData = new ArrayList<PVector>();
// Do any aditional setup you need here
}
void draw() {
// Do any drawing here
}
// Called after each press and release of the mouse
void mouseClicked() {
// Add the mouse's position to our list of mouse click positions
clickData.add(new PVector(mouseX, mouseY));
}
If you want to get the x value of the first recorded mouse click, for example, you can access it through a call to clickData.get(0).x, which first grabs the PVector at position 0 from clickData, then get's the x value associated with that PVector object.
Hope that helps!
You can read about the PVector class here
I have a very simple cube mesh:
var playerGeo = new THREE.BoxGeometry(5,5,5);
var playerMat = new THREE.MeshLambertMaterial({color: 0xFF1865});
var player = new THREE.Mesh(playerGeo, playerMat);
player.position.x = 0;
player.position.y = -50;
scene.add(player);
and in my render function (which uses reqestAnimationFrame) i have the following code which is meant to move the cube left/right based on wether the user presses the left/right key.
$("body").keydown(function(e) {
if(e.keyCode == 37) {
player.position.x -= 0.01;
}else if(e.keyCode == 39){
player.position.x += 0.01;
}
});
This works. However I noticed slightly weird behaviour, as at first if I press the left key, the cube will go left a tiny amount (what seems to be 0.01), but after quite a few times of pressing the arrow keys the distance in which the cube goes on each press seems to slowly increase. So the first time i press a left/right key, the cube will move left/right about a mm. Within about 10 presses left or right, it moves about a cm each press.
What is going on?
Please ask if you require more info!
Thanks
i am suspecting the position change is ok, but your projection is deformed
query the position after change for example open console and add
console.log("position before"+player.position.x);
if(e.keyCode == 37) {
player.position.x -= 0.01;
}else if(e.keyCode == 39){
player.position.x += 0.01;
}
console.log("position after"+player.position.x);
check if the change is 0.01 as planned
if it is and you are using perspective camera you have to set field of vision correctly to avoid fisheye effect
if neither of these are the the cause you have to provide more information...
For a number of technical reasons, I'm implementing my own 'draggable' feature on jQuery, rather than using jQuery UI, and I'm using mousedown and mousemove events to listen for the user trying to drag an element.
It works good so far, I would just like to fire up the mousemove event every 5 px of movement, rather than pixel by pixel. I've tried coding a simple:
$('#element').bind('mousemove', function(e) {
if(e.pageX % 5 == 0) {
// Do something
}
});
However, the movement is not stable every 5 pixels, and sometimes if you move the mouse too fast, it will skip several steps. I think this is because when moving the mouse very fast, jQuery will not trigger the event every pixel.
Do you guys know how to trigger the event every 5 pixels?
Thanks a lot,
Antonio
Your code does not take into account where your drag started. e.pageX will just give you page coordinates, not differences. You need to check for the change in distance moved.
This post is pretty relevant.
Here is the basic code:
$(document).mousemove(function(event) {
var startingTop = 10,
startingLeft = 22,
math = Math.round(Math.sqrt(Math.pow(startingTop - event.clientY, 2) +
Math.pow(startingLeft - event.clientX, 2))) + 'px';
$('span').text('From your starting point(22x10) you moved: ' + math);
});
EDIT: Now I think I understand what the OP is talking about. I used the above code to come up with this fiddle. It tracks your current position in relation to the Top Left of the screen and it checks to see if your difference is > 5 pixles.
New script:
var oldMath = 0;
$(document).mousemove(function(event) {
var startingTop = 10,
startingLeft = 22,
math = Math.round(Math.sqrt(Math.pow(startingTop - event.clientY, 2) +Math.pow(startingLeft - event.clientX, 2))) + 'px';
$('#currentPos').text('you are at :' + math);
if(Math.abs(parseInt(math) - oldMath) > 5){
//you have moved 5 pixles, put your stuff in here
$('#logPos').append('5');
//keep track of your position to compare against next time
oldMath = parseInt(math);
}
});
This is not a duplicate of How to set SWT button foreground color?. It's more like a follow up. I wrote follow-up questions as comments, but did not get any responses, so I thought I'd try to put it up as a question, and hopefully some expert will see it.
As is pointed in the referenced question, windows native button widgets do not support setting the foreground color (in fact, after more further research (more like experiments), it's been revealed that setForeground() works under the Classic Theme, but not others).
The answer/suggestion given in the referenced question is a good one (a.k.a providing a paint listener and drawing over the text with the correct color). I gave it a whirl but ran into a world of problems trying to decide the coordinate at which to draw the text:
It appears that - in addition to SWT attributes like alignment etc. - Windows has some rather hard-to-figure-out rule of deciding the location of the text. What makes it worse is that the location appears to be dependent on the windows theme in effect. Since I need to draw the text exactly over the natively-drawn windows text in order to override the color, this is a huge problem.
Please, can someone provide some much-needed help here? It'd be greatly appreciated!
Thank you!
On the same PaintListener you use to paint the coloured background, you have to calculate the position and draw the text. Here's how we do it here:
public void paintControl( PaintEvent event ) {
// Is the button enabled?
if ( !isEnabled() ) {
return;
}
// Get button bounds.
Button button = (Button)event.widget;
int buttonWidth = button.getSize().x;
int buttonHeight = button.getSize().y;
// Get text bounds.
int textWidth = event.gc.textExtent( getText() ).x;
int textHeight = event.gc.textExtent( getText() ).y;
// Calculate text coordinates.
int textX = ( ( buttonWidth - textWidth ) / 2 );
int textY = ( ( buttonHeight - textHeight ) / 2 );
/*
* If the mouse is clicked and is over the button, i.e. the button is 'down', the text must be
* moved a bit down and left.
* To control this, we add a MouseListener and a MouseMoveListener on our button.
* On the MouseListener, we change the mouseDown flag on the mouseDown and mouseUp methods.
* On the MouseMoveListener, we change the mouseOver flag on the mouseMove method.
*/
if ( mouseDown && mouseOver ) {
textX++;
textY++;
}
// Draw the new text.
event.gc.drawText( getText(), textX, textY );
// If button has focus, draw the dotted border on it.
if ( isFocusControl() ) {
int[] dashes = { 1, 1 };
evento.gc.setLineDash( dashes );
evento.gc.drawRectangle( 3, 3, buttonWidth - 8, buttonHeight - 8 );
}
}
In the end, I decided to implement it as a custom Composite with a checkbox/radio button and a label. Not ideal, but I'll have to make do.