Saving click data to an table (Processing) - processing

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

Related

How can put image back of paints which i drew?

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");
}
}

How can I clear the canvas using one click in processing?

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);
}

Unity3D: How do I improve my Idle animation (Y-axis)

Okay, I am almost finished with my 2d rpg click to move game. If you look at this video you will be able to see that when I click forward my player, once it gets to it's position, face the wrong direction rather than facing straight towards the players. To make myself more clearer, this is an image of the sprite sheet I am currently using, as you can see it has 8 directions. When you click here (in the game), my player would walk down and face this direction or this direction, rather than facing this direction (the normal/preferred position). This also happens when I click here (in the game) my player would walk up and face this direction or face this direction, rather than facing this direction. How can I make sure that my player face the right direction once it reached it's destination. Again this is only occurring within the Y-axis, so walking along the X-axis is fine.
private Animator anim;
public float speed = 15f;
private Vector3 target;
private bool touched;
private bool playerMovementRef;
void Start () {
target = transform.position;
anim = GetComponent<Animator> ();
}
void Update () {
if (Input.GetMouseButtonDown (0)) {
Vector3 mousePosition = Input.mousePosition;
mousePosition.z = 10; // distance from the camera
target = Camera.main.ScreenToWorldPoint (mousePosition);
target.z = transform.position.z;
var movementDirection = (target - transform.position).normalized;
Vector3 animDirection = Vector3.zero;
if (movementDirection.sqrMagnitude > 0)
{
// Use >= to default to horizontal on both being equal
if (movementDirection.x > movementDirection.y)
animDirection.x = 1;
else
animDirection.y = 1;
anim.SetBool ("walking", true);
anim.SetFloat ("SpeedX", movementDirection.x);
anim.SetFloat ("SpeedY", movementDirection.y);
if (movementDirection.x < 0) {
anim.SetFloat ("LastMoveX", -1f);
} else if (movementDirection.x > 0) {
anim.SetFloat ("LastMoveX", 1f);
} else {
anim.SetFloat ("LastMoveX", 0f);
}
if (movementDirection.y > 0) {
anim.SetFloat ("LastMoveY", 1f);
} else if (movementDirection.y < 0) {
anim.SetFloat ("LastMoveY", -1f);
} else {
anim.SetFloat ("LastMoveY", 0f);
}
}
} else {
if (Mathf.Approximately (transform.position.x, target.x) && Mathf.Approximately (transform.position.y, target.y)) {
touched = false;
anim.SetBool ("walking", false);
} else {
transform.position = Vector3.MoveTowards (transform.position, target, speed * Time.deltaTime);
}
}
}
}
I'm just starting out with Unity, but hope I can help.
From the video you've posted I've noticed that the sprite is only 'wrong' when the oldPosition and newPosition click differs in the X component, e.g. when you would click straight down it would show the desired behavior and sprite.
Have you tried printing out the x and y values that your code is using to calculate which sprite it's setting?
At first I thought that maybe it's because the values you set in the Blend Tree were at -1, 1 etc, and due to normalizing you sometimes wound up with 0.9 for a certain value.
Can you maybe try debugging it with the animator window open, like you did at the end? Writing down the values and comparing them between Desired and Undesired behavior might tell you something more.
Sorry I don't have a concrete solution to your problem, but I hope this helps.
Edit for clarification:
Basically, what I'm recommending is to:
1) Print out the values you are getting when the behavior happens, an example of how to print these things out is by using LogFormat, for example:
Debug.LogFormat("X: {0}, Y: {1}", xPosition, yPosition);
Now, you will get the values printed out when it finishes moving.
2) Write down the values for when the moving finishes with the 'Wrong' sprite, and keep clicking to move until the 'Right' sprite shows up. Write down the values again.
3) Compare each values, and find the differences. Now deduce why the differences are as they are, using the values in conjunction with your blend trees.
4) Once you know why, go back through your code/blend trees and rewrite/fix it to work as you intended it to.

How do I correctly get control bound coordinates relitive to the control for mouse comparison?

I am presently learning C# and have chosen as a project to write a simple colour picker control ; however things have changed substantially since I last looked at writing code and I have struck this problem.
I am using the Mousedown event in my control to get the mouse coordinates as a Point - this is working fine and returns exactly what I would expect - the mouse coordinates relative to my control; however when I try and do a check against the control location I am returned a value as a Point showing the position of my control relative to the form which in certain cases the mouse coordinates will be outside the bounds of because their values will be less than the relative start position of the control I.E I click at pixel 1,1 in the control - the mouse position is 1,1 but because the control is located at 9,9 relative to the form the location of the mouse is less than the bounds of the control - I have absolutely no idea how to fix this, I have been attempting to sort it out with PointToClient and PointToScreen to no avail as they seem to come up with outlandish values can someone please help me out it's driving me insane.
I've managed to sort this out myself so thought I'd post the answer and it can hopefully help someone else. I was having problems getting Point values that were relative to the same pixel origin : this sorted it.
private void ColourPicker_MouseDown(object sender, MouseEventArgs e)
{ // Probably being paranoid but I am worried about scaling issues, this.Location
// would return the same result as this mess but may not handle
// scaling <I haven't checked>
Point ControlCoord = this.PointToClient(this.PointToScreen(this.Location));
int ControlXStartPosition = ControlCoord.X;
int ControlYStartPosition = ControlCoord.Y;
int ControlXCalculatedWidth = ((RectangleColumnsCount + 1) * WidthPerBlock ) + ControlXStartPosition;
int ControlYCalculatedHeight = ((RectangleRowsCount + 1) * HeightPerBlock) + ControlYStartPosition;
// Ensure that the mouse coordinates are comparible to the control coordinates for boundry checks.
Point ControlRelitiveMouseCoord = this.ParentForm.PointToClient(this.PointToScreen(e.Location));
int ControlRelitiveMouseXcoord = ControlRelitiveMouseCoord.X;
int ControlRelitiveMouseYcoord = ControlRelitiveMouseCoord.Y;
// Zero Relitive coordinates are used for caluculating the selected block location
int ZeroRelitiveXMouseCoord = e.X;
int ZeroRelitiveYMouseCoord = e.Y;
// Ensure we are in the CALCULATED boundries of the control as the control maybe bigger than the painted area on
// the design time form and we don't want to use unpaited area in our calculations.
if((ControlRelitiveMouseXcoord > ControlXStartPosition) && (ControlRelitiveMouseXcoord < ControlXCalculatedWidth))
{
if((ControlRelitiveMouseYcoord > ControlYStartPosition) && (ControlRelitiveMouseYcoord < ControlYCalculatedHeight))
{
SetEvaluatedColourFromPosition(ZeroRelitiveXMouseCoord, ZeroRelitiveYMouseCoord);
}
}
}

How to animate data visualization in Processing?

I'm trying to create an animated data visualization and currently only know how to do the following "static" code, which puts a string of dots in a straight line. How do I make them jump up and down? Also, if there is anyone in Dublin, Ireland, who wouldn't mind giving a few tutorial sessions to a couple of college students working on a data visualization project in Processing, we have a small budget to compensate you for your time. Thanks very much!
For now, here's the code I was talking about...
SimpleSpreadsheetManager sm;
String sUrl = "t6mq_WLV5c5uj6mUNSryBIA";
String googleUser = "USERNAME";
String googlePass = "PASSWORD";
void setup() {
//This code happens once, right when our sketch is launched
size(800,800);
background(0);
smooth();
//Ask for the list of numbers
int[] numbers = getNumbers();
fill(255,40);
noStroke();
for (int i = 0; i < numbers.length; i++) {
ellipse(numbers[i] * 8, width/2, 8,8);
};
};
void draw() {
//This code happens once every frame.
};
Essentially the x position you use for drawing the ellipse is a number value you get from external data. You need a variable that changes value. Redrawing the ellipse at the updated value should get things animated.
Take this basic example:
float x,y;//position variables for the ellipse
void setup(){
size(800,800);
smooth();
fill(255,40);
noStroke();
y = 400;
}
void draw(){
//update values
x = mouseX + (sin(frameCount * .05) * 30);//update x to an arbitrary value
//draw
background(0);//clear the screen for the new frame
ellipse(x,y,8,8);//draw the ellipse at the new position
}
the x variable is a bit like numbers[i] - just a value that chances.
Nothing special happens in draw() other than clearing the screen(by calling background()) and drawing. The example above uses an arbitrary value, but with your setup that might be something else, maybe a certain value in a data set that changes in time (like the population of a country, etc.)
Another handy thing to keep in mind is the separation between the data and visuals code wise. If values in the data set are higher than what can be displayed on screen as raw values, you can map() values so they can be viewer, add some sort of navigation controls, etc. The values analysed will not be affected by what's being displayed. In programming terms this separation between the data/model, the visuals/view (how the data is rendered) and the controls/controller is known as the Model-View-Controller pattern.
This might be a bit much for people just starting with code, but just being aware of the separation without worrying to much on the specific implementation can be helpful.
Here's a very basic example having the width of the sketch mapped to the size of the data (numbers)
SimpleSpreadsheetManager sm;
String sUrl = "t6mq_WLV5c5uj6mUNSryBIA";
String googleUser = "USERNAME";
String googlePass = "PASSWORD";
int[] numbers;//data used for visualisation
void setup() {
//sketch setup
size(800,800);
smooth();
fill(255,40);
noStroke();
//retrieve data
numbers = getNumbers();
}
void draw() {
background(0);
int numId = int(map(mouseX,0,width,0,numbers.length));//map mouse x position based on sketch width and data size
ellipse(numbers[numId] * 8, height/2, 8,8);
}
For an animation you need one or more parameters that their values changed in time, currently there is a library for processing which do such things: Ani
For more information see the site and provided examples.

Resources