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);
}
Related
The thing what I want to make is similar to paint program.
The problem is when I draw some lines(Not just lines. Whole things I drew are included in this case.), those lines only drawn back of a image I put in before I draw that.
At first, I thought it was just problem of code's order. But it wasn't.
I just want draw some lines on the image like paint program.
Like this:enter image description here
You can paint into a separate "layer" using PGraphics.
Once you initialise an instance you can use the typical drawing methods within beginDraw() / endDraw() (as the reference example suggests).
The only thing left is to save the final image which is simple enough using save()
Here's a modified example of Examples > Basics > Image > LoadDisplay which uses a separate PGraphics instance to draw into as the mouse is dragged and saves the final image when the s key is pressed:
/**
* Based on Examples > Basics > Image > Load and Display
*
* Images can be loaded and displayed to the screen at their actual size
* or any other size.
*/
PImage img; // Declare variable "a" of type PImage
// reference to layer to draw into
PGraphics paintLayer;
void setup() {
size(640, 360);
// The image file must be in the data folder of the current sketch
// to load successfully
img = loadImage("moonwalk.jpg"); // Load the image into the program
// create a separate layer to draw into
paintLayer = createGraphics(width,height);
}
void draw() {
// Displays the image at its actual size at point (0,0)
image(img, 0, 0);
// Displays the paint layer
image(paintLayer,0,0);
}
void mouseDragged(){
// use drawing commands between beginDraw() / endDraw() calls
paintLayer.beginDraw();
paintLayer.line(mouseX,mouseY,pmouseX,pmouseY);
paintLayer.endDraw();
}
void keyPressed(){
if(key == 's'){
saveFrame("annotated-image.png");
}
}
var j=0;
function keyPressed() {
word[j] =key;
j++;
if(keyCode == BACKSPACE){
shorten(word);
shorten(word);
arrayCopy(word, contents);
}
else{
contents=key;
}
}
function draw(){
text(contents, pos_x, pos_y, 300, 300);
pos_x = pos_x + textWidth(contents);
}
when i am using backspace key,i use shorten() to remove the last element of array.how to put this new text on the canvas,without calling clear() and background().
You've already outlined both of your options.
Option 1: Every frame, call the background() function to clear out old frames, and then draw everything again.
Option 2: Draw the stuff you never want to clear to an off-screen buffer using the createGraphics() function. Then every frame, clear out old frames, draw the off-screen buffer to the screen, then draw the "dynamic" content on top of that.
You're going to have to try both approaches and be more specific about exactly what "performance" you're afraid of. But in general, the above two approaches are exactly how you'd deal with this problem.
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 hope that this is the correct site for this question, apologies if not.
In a Processing sketch, can I control the initial position of the display window? The size() function that must be called first allows only the width and height to be specified.
This has occurred as a likely problem now I am starting to use the G4P (GUI for Processing) library, where the position of a GWindow() has position parameters, but they do not seem to be relative to the main display window but to the whole monitor screen, and I want the extra windows to appear within the main window. This will especially matter when I want to transfer use of the program from my desktop (monitor 1280 by 1024 pixels) to my laptop (1280 by 800 pixels).
Assuming you're talking about Java mode, then you have access to a variable called frame.
However, the frame variable does not seem to be available until after the setup() function finishes, so you have to access it after that. This works for me:
boolean frameMoved = false;
void setup() {
size(500, 500);
}
void draw() {
if(!frameMoved){
frame.setLocation(100, 100);
frameMoved = true;
}
background(0);
}
There is probably a smarter way to do this, but it works for me.
I had negative function with the frame.setLocation solution in Processing 3.5.1
after using the surface.setsize to size the sketch from a variable.
The code below works without needing a burner boolean.
void setup() {
int myVariableW=600;
surface.setSize(myVariableW,400);
}
void draw() {
background(0);
if(1==frameCount) surface.setLocation(150,100);
ellipse(300,300,200,100);
}
I have some images/sprites/buttons (i tried them all :)) scrolling/moving on the stage. The user has to tap them to remove them.
The problem is that the touchevent does not match the position of the image.
The faster the touchable sprites move, the further the distance between the touch and the actual image. i.e.:
a image is moving across the screen with 20px/frame:
Touching the image triggers nothing, touching 20 before it triggers a touch on the image.
when image is not moving, this doesn't happen. It seems that the image is already moved internally, but not yet drawn to the screen, but thats just a wild guess. The example below uses a button, but the same goes for an image. I"ll provide a short example of the code, but i guess its pretty straightforward what i'm trying to do.
private var _image:Button;
protected function init():void {
//create pickup image
_image = new Button(assets.getTexture("button"));
_image.scaleWhenDown = 1;
_image.addEventListener(Event.TRIGGERED, onClick_image);
addChild(_image);
//listen to touch event (not used, but example for touch on image instead of button
//touchable = true;
//addEventListener(TouchEvent.TOUCH, onTouch_image);
}
private function onEnter_frame(e:Event):void {
_image.x -= 20;
}