I have a CSV file that was created from a plain text file. In column A there is a list of unique words and in column B it lists their frequency within that text.
I am using Processing and loadTable to draw a list of the words. I would like to use rollover so that when the mouse hovers over them, an ellipse appears that has a size relative to the integer associated with that word's frequency.
I am having a hard time finding a good example of the syntax for using rollover() while in a loop that includes data from a CSV file.
Any help is appreciated!
void setup() {
table = loadTable("tabletest.csv", "header");
size(600,1000);
}
void draw() {
background(252, 245, 224);
for (int i = 0; i < table.getRowCount(); i++) {
TableRow row = table.getRow(i);
String w = row.getString("Word");
int f = row.getInt("Frequency");
textSize(10);
text(w, width/2, 15*i);
fill(8, 114, 105);
textAlign(CENTER);
}
}
There is no built-in rollover() function that I know of. You're going to have to write this functionality yourself.
You can check whether the cursor is inside a given rectangle. See this guide for more info, but basically you check whether mouseX is between the left and right and whether mouseY is between the top and bottom of the rectangle.
If so, then you know the mouse is inside that table cell and you can take the appropriate action. I recommend breaking your problem down into smaller steps and taking those steps on one at a time. For example, start over with a basic sketch that shows a single rectangle that changes color when the mouse is inside it. Get that working perfectly before trying to make it work with multiple rectangles.
Then if you get stuck, you can post a MCVE along with a more specific technical question. Good luck.
Related
I'm trying to make fade in fade out effect in Processing. When I press the key 'z', the transparency of the rectangle go from 0 to 255, stay there for 1 sec then fade out from 255 to 0. Thank you in advance!
Here is one of my latest attempt:
int alphaValue;
void setup() {
size(640, 360);
rect1 = createShape(RECT,292, 85, 55, 55, 2);
rect2 = createShape(RECT,347, 140, 55, 55, 2);
rect1.setFill(0);
rect1.setStroke(color(255));
rect2.setFill(0);
rect2.setStroke(color(255));
}
void keyPressed() {
if (key == 'z')
{
fadingrectangle();
}
}
void fadingrectangle() {
rect1.setFill(color(229, 229, 229, alphaValue));
if (alphaValue < 255) {
alphaValue++;
}
}
I just can make it fading in but I don't know how to make it automatically fading out after appearing 1 second.
Stack Overflow isn't really designed for general "how do I do this" type questions. It's for specific "I tried X, expected Y, but got Z instead" type questions. But I'll try to help in a general sense.
First off, you need to break your problem down into smaller pieces. For example, can you create a simple program that just shows a rectangle? Can you create a separate program that just prints something to the console when the user presses the Z key? Get those working perfectly by themselves before you move on.
From there, you need to store the current state of your sketch. In your case, maybe that's a single variable that stores the transparency of the rectangle. Then you need to use that variable to draw each frame, and change that variable to make the rectangle fade in and out. Here is a tutorial I wrote about animation in Processing.
But again, you need to break your problem down into smaller pieces. Approach each piece by itself, and post a MCVE along with a specific technical question if you get stuck. Good luck.
I am using Processing under Fedora 20, and I want to display an image of the extending tracks of objects moving across part of the screen, with each object displayed at its current position at the end of the track. To avoid having to record all the co-ordinates of the tracks, I usesave("image.png"); to save the tracks so far, then draw the objects. In the next frame I use img = loadImage("image.png"); to restore the tracks made so far, without the objects, which would still be in their previous positions.. I extend the tracks to their new positions, then usesave("image.png"); to save the extended tracks, still without the objects, ready for the next loop round. Then I draw the objects in their new positions at the end of their extended tracks. In this way successive loops show the objects advancing, with their previous positions as tracks behind them.
This has worked well in tests where the image is the whole frame, but now I need to put that display in a corner of the whole frame, and leave the rest unchanged. I expect that createImage(...) will be the answer, but I cannot find any details of how to to so.
A similar question asked here has this recommendation: "The PImage class contains a save() function that exports to file. The API should be your first stop for questions like this." Of course I've looked at that API, but I don't think it helps here, unless I have to create the image to save pixel by pixel, in which case I would expect it to slow things down a lot.
So my question is: in Processing can I save and restore just part of the frame as an image, without affecting the rest of the frame?
I have continued to research this. It seems strange to me that I can find oodles of sketch references, tutorials, and examples, that save and load the entire frame, but no easy way of saving and restoring just part of the frame as an image. I could probably do it using Pimage but that appears to require an awful lot of image. in front of everything to be drawn there.
I have got round it with a kludge: I created a mask image (see this Processing reference) the size of the whole frame. The mask is defined as grey areas representing opacity, so that white, zero opacity (0), is transparent and black, fully opaque (255) completely conceals the background image, thus:
{ size (1280,800);
background(0); // whole frame is transparent..
fill(255); // ..and..
rect(680,0,600,600); // ..smaller image area is now opaque
save("[path to sketch]/mask01.jpg");
}
void draw(){}
Then in my main code I use:
PImage img, mimg;
img = loadImage("image4.png"); // The image I want to see ..
// .. including the rest of the frame which would obscure previous work
mimg = loadImage("mask01.jpg"); // create the mask
//apply the mask, allowing previous work to show though
img.mask(mimg);
// display the masked image
image(img, 0, 0);
I will accept this as an answer if no better suggestion is made.
void setup(){
size(640, 480);
background(0);
noStroke();
fill(255);
rect(40, 150, 200, 100);
}
void draw(){
}
void mousePressed(){
PImage img =get(40, 150, 200, 100);
img.save("test.jpg");
}
Old news, but here's an answer: you can use the pixel array and math.
Let's say that this is your viewport:
You can use loadPixels(); to fill the pixels[] array with the current content of the viewport, then fish the pixels you want from this array.
In the given example, here's a way to filter the unwanted pixels:
void exportImage() {
// creating the image to the "desired size"
PImage img = createImage(600, 900, RGB);
loadPixels();
int index = 0;
for(int i=0; i<pixels.length; i++) {
// filtering the unwanted first 200 pixels on every row
// remember that the pixels[] array is 1 dimensional, so some math are unavoidable. For this simple example I use the modulo operator.
if (i % width >= 200) { // "magic numbers" are bad, remember. This is only a simplification.
img.pixels[index] = pixels[i];
index++;
}
}
img.updatePixels();
img.save("test.png");
}
It may be too late to help you, but maybe someone else will need this. Either way, have fun!
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);
}
}
}
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.
G'day all,
In short, I'm using a for loop to create a bunch of identical sprites that I want to bounce around the screen. The problem is how do I write a collision detection process for the sprites. I have used the process of placing rectangles around sprites and using the .intersects method for rectangles but in that case I created each sprite separately and could identify each one uniquely. Now I have a bunch of sprites but no apparent way to pick one from another.
In detail, if I create an object called Bouncer.cs and give it the movement instructions in it's update() method then create a bunch of sprites using this in Game.cs:
for (int i = 1; i < 5; ++i)
{
Vector2 position = new Vector2(i * 50, i * 50);
Vector2 direction = new Vector2(i * 10, i * 10);
Vector2 velocity = new Vector2(10);
Components.Add(new Bouncer(this, position, direction, velocity, i));
}
base.Initialize();
I can draw a rectangle around each one using:
foreach (Bouncer component1 in Components)
{
Bouncer thing = (Bouncer)component1;
Rectangle thingRectangle;
thingRectangle = new Rectangle((int)thing.position.X, (int)thing.position.Y, thing.sprite.Width, thing.sprite.Height);
But now, how do I check for a collision? I can hardly use:
if (thingRectangle.Intersects(thingRectangle))
I should point out I'm a teacher by trade and play with coding to keep my brain from turning to mush. Recently I have been working with Python and with Python I could just put all the sprites into a list:
sprites[];
Then I could simply refer to each as sprite[1] or sprite[2] or whatever its index in the list is. Does XNA have something like this?
Please let me know if any more code needs to be posted.
Thanks,
Andrew.
One solution, which I use in my game engine, is to have a Logic code run inside the objects for every game Update, ie. every frame. It seems you already do this, according to the variable names, which indicate you run some physics code in the objects to update their positions.
You might also want to create the collision rectangle inside the Bouncer's constructor so it's more accessible and you make good use of object oriented programming, maybe even make it an accessor, so you can make it update every time you call it instead of manually updating the bounding/collision box. For example:
public Rectangle #BoundingBox {
get { return new Rectangle(_Position.X, _Position.Y, width, height); }
}
Whichever way works, but the collision checks can be run inside the Bouncer object. You can either make the reference list of the Bouncer objects static or pass it to the objects itself. The code for collisions is very simply:
foreach(Bouncer bouncer in Components) //Components can be a static List or you can pass it on in the constructor of the Bouncer object
{
if (bouncer.BoundingBox.Intersects(this.BoundingBox))
{
//they collided
}
}