Unexpected Token: int in processing - processing

So i'm writing a coloring/ art program and am trying to detect mouseclicks in a box to select color. I have color as a variable and I am using If statements to modify it, however my variable throws an error everytime i run it. the error arises from line 3 'int color = #FFFFFF'
void draw()
{
int color = #FFFFFF;
pen.beginDraw();
if(mousePressed && (mouseX > 5 && mouseX < 95 && mouseY > 5 && mouseY < 95))
{
pen.clear();
}
if(mousePressed && (mouseX > 5 && mouseX < 95 && mouseY > 105 && mouseY < 195))
{
color = #000000;
}
if(mousePressed && (mouseX >5 && mouseX <95 && mouseY > 205 && mouseY < 295))
{
color = #000EFF;
}
if(mousePressed && (mouseX >5 && mouseX <95 && mouseY > 305 && mouseY < 395))
{
color = #FF0000;
}
if(mousePressed && (mouseX >5 && mouseX <95 && mouseY > 405 && mouseY < 495))
{
color = #00FF0A;
println("green");
}
pen.fill(color);
pen.ellipse(mouseX, mouseY, 10, 10);
pen.endDraw();
}

In processing the indent color is the name of a built-in function (color()), which creates a n integral color value from the red, green, blue and alpha color channels.
This causes that you can't declare a variable with the same name color.
You have to rename the variable to solve the issue:
e.g.
int fillcolor = color(255);
int fillcolor = color(0, 14, 255);
int fillcolor = color(255, 0, 0, 255);
If you se the variable fillcolor by an hexadecimal value, then you have to set consider, that the color has an alpha channel too. This means the value consist of 4 color components and has to have 8 hexadecimal digits:
e.g.
int fillcolor = #FFFFFFFF;
int fillcolor = 0xFF000000;
Anyway it is to prefer to use the function color(), which makes the code much more comprehensibly.
Probably you don't want to declare the variable in the function draw, but you want to declare a global variable.
Think about writing your code like this:
int fillcolor = color(255);
void draw() {
pen.beginDraw();
if (mousePressed) {
if (mouseX > 5 && mouseX < 95) {
if (mouseY > 5 && mouseY < 95) {
pen.clear();
} else if (mouseY > 105 && mouseY < 195) {
fillcolor = color(0);
} else if (mouseY > 205 && mouseY < 295) {
fillcolor = color(0, 0, 255);
} else if (mouseY > 305 && mouseY < 395) {
fillcolor = color(255, 0, 0);
} else if (mouseY > 405 && mouseY < 495) {
fillcolor = color(00, 255, 0);
println("green");
}
}
}
pen.fill(fillcolor);
pen.ellipse(mouseX, mouseY, 10, 10);
pen.endDraw();
}

Related

In Processing 4, how do I make a ball sprite have a random chance to bounce left or right off a platform

I have a ball sprite and I need it to have a 50/50 chance to bounce off a platform sprite. Here is the code:
bally=bally+3;
ballx=ballx+3;
ballx += xspd;
bally += yspd;
if(bally > 580 && bally <590 && ballx < mouseX+300 && ballx > mouseX-150){
yspd*=-3;
}
else if(bally > 580 && bally <590 && ballx < mouseX+150 && ballx > mouseX){
yspd*=+3;
}
if(ballx > 900){
xspd*=-3;
}
if(ballx < 0){
xspd*=+3;
}
if(bally < 0 && bally > 700){
state=LOSE;
}
This code make the ball bounce off the walls but once it bounces off the platform at the top it only bounces to the right. I need it to be a 50/50 chance to bounce either left or right. Thanks
I tried to make an else if statement before but that didn't work, along with changing the xspd variable in said else if statement.
You need a source of random:
var randNum = random(0, 100);
if (randNum < 50) {
text("Heads", 200, 200);
direction = 1;
} else {
text("Tails", 200, 200);
direction = -1;
}
Use this to chose your sign. That should let chance choose your direction.

Pixels eraser in Processing

I am new using Processing and this time I am trying to do like a paint program. As I chose to draw a grid in the background, I don't know how to make a eraser. If someone has any ideas....
This is my code:
int x = 20, y = 40, w = 70, h = 50;
void setup() {
size(600, 600);
background(255);
stroke(240);
for (int linex = 0; linex < width; linex = linex+40) {
for (int liney = 0; liney < height; liney = liney + 40) {
line(0, liney, width, liney);
}
line(linex, 0, linex, height);
}
fill(255, 0, 0);
rect(x, height - 250, w, h);
fill(0, 255, 0);
rect(x, height - 190, w, h);
fill(0, 0, 255);
rect(x, height - 130, w, h);
fill(0);
rect(x, y, w, h);
textSize(17);
text("Erase everything", 10, 30);
}
void draw() {
if ((keyPressed && key == 'r') || (mousePressed && mouseX > x && mouseX < x + w && mouseY > (height - 250) && mouseY < (height - 250) + h)) {
fill(255, 0, 0);
}
if (keyPressed && key == 'g'|| (mousePressed && mouseX > x && mouseX < x + w && mouseY > (height - 190) && mouseY < (height - 190) + h)) {
fill(0, 255, 0);
}
if (keyPressed && key == 'b' || (mousePressed && mouseX > x && mouseX < x + w && mouseY > (height - 130) && mouseY < (height - 130) + h)) {
fill(0, 0, 255);
}
if (keyPressed && key == 'n'){
fill(0);
}
if (mousePressed) {
noStroke();
ellipse(mouseX, mouseY, 20, 20);
}
if (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y+h && mousePressed) {
setup();
}
}
Thanks in advance
Just sneak the following code somewhere into the draw() function in your program.
noStroke();
ellipse(mouseX, mouseY, 8, 8); // change width and height to the diameter (in pixels) you want your eraser to have.
strokeWeight(1);
Or, if you want a square instead of a circle:
noStroke();
rectMode(CENTER);
rect(mouseX, mouseY, 8, 8);
rectMode(CORNER);
strokeWeight(1);
Or something in beetween:
noStroke();
rectMode(CENTER);
rect(mouseX, mouseY, 8, 8, 4); // the 5th parameter is the edge smoothness (in pixels)
rectMode(CORNER);
strokeWeight(1);

How do I make a variable randomly equal 1 of 2 numbers? (Processing)

I'm trying for the first time to make Pong. I don't always want the ball to go to the bottom right by adding 3 every single time. How would I make it so it will either do 3, or -3, but no number in between? I know that "||" doesn't work for integers, and "random(-3,3) has the chance of giving me numbers like "0.1" which wouldn't really function in here.
Code:
float circleX = 640/2;
float circleY = 360/2;
float xSpeed = 3;
float ySpeed = 3;
float Color = (255);
float circleHeight = 32;
float circleWidth = 32;
float xAcceleration = -1.0;
float yAcceleration = -1.0;
float paddleColor = 255;
float MyPaddleX = 630;
float OpPaddleX = 10;
float MyPaddleWidth = 10;
float OpPaddleWidth = -10;
void setup() {
size(640, 360);
frameRate(60);
}
void draw() {
background(0);
//Ball
fill(Color);
ellipse(circleX, circleY, circleWidth, circleHeight);
xSpeed = //(WHAT TO PUT HERE?)
circleX = circleX + xSpeed;
circleY = circleY + ySpeed;
//My Paddle
fill(paddleColor);
rect(MyPaddleX,mouseY,MyPaddleWidth,100);
//Bouncing
if (circleX >= OpPaddleX && OpPaddleX + OpPaddleWidth >= circleX) {
xSpeed = xSpeed * xAcceleration;
}
// Top/Bottom Bouncing
if (circleY > height || circleY < 0) {
ySpeed = ySpeed * yAcceleration;
}
//My Paddle Bounceback
if (circleY >= mouseY && circleY <= mouseY + 100) {
if (circleX >= MyPaddleX && circleX <= MyPaddleX + 3)
xSpeed = xSpeed * xAcceleration;
}
//Opponent Paddle
fill(paddleColor);
rect(OpPaddleX,circleY - 50,OpPaddleWidth,100);
//if (circleX < OpPaddleX || circleX > MyPaddleX) {
// circleX = width/2;
// circleY = height/2;
// xSpeed = 0;
// ySpeed = 0;
//}
}
You can generate a number between 0 and 1 and then compare that generated number to 0.5 to "flip a coin" in your code.
Think about it this way: when you call random(1), you'll get a value between 0 and 1. Half of those values will be less than 0.5, the other half will be greater than (or equal to) 0.5.
So you can do something like this:
float x;
if(random(1) < .5){
x = -3;
}
else{
x = 3;
}
You could expand this to choose from more numbers using else if statements, or you could shorten it into a single line of code using the ternary operator:
float x = random(1) < .5 ? 3 : -3;

Processing how to translate mouse coordinates

I am making a 2d plat former esc game and I have my game translate my characters x and y cords so my character is always in the middle of the screen, it seems however that mouseX and mouseY do not translate... how would I convert the mouseX and mouseY cords?
here is my translation code
void draw() {
background(100);
if (updateBlocks == true) {
updateBlocks();
}
pushMatrix();
translate(-player.location.x + 320, -player.location.y + 320);
mx = mouseX -player.location.x + 320;
my = mouseY -player.location.y + 320;
for(int a = 0; a < mapWidth; a ++) {
for(int b = 0; b < mapHeight; b ++) {
if(mx >= 16 * a && mx <= 16 * a + 16 && my >= 16 * b && my <= 16 * b + 16) {
map[a][b] = 1;
updateBlocks();
break;
}
}
}
for (int a = validBlocks.size()-1; a >= 0; a --) {
PVector validBlock = validBlocks.get(a);
rect(validBlock.x, validBlock.y, 16, 16);
}
player.update();
player.display();
popMatrix();
}
Yes, mouseX and mouseY are in terms of your window, regardless of your transformation matrix (translate, rotate, etc). (0, 0) is at the top-left corner no matter what's going on in your screen.
You have to translate that point yourself. In your case, some basic subtraction will do.

How to zoom-in to the point under the mouse cursor (Processing)

I'd like to zoom-in to the point under the mouse cursor in a Processing sketch. The scale part of the problem is pretty straightforward; it's the translate part that I can't figure out. The idea is to be able to zoom-in to a Processing sketch, whilst maintaining the relative distance between the objects in the sketch.
Any help would be greatly appreciated. A basic sketch, which zooms-in but doesn't maintain the relative distance, follows:
float scaleFactor;
void setup()
{
size(300, 300);
scaleFactor = 1;
}
void draw()
{
background(255);
fill(128);
noStroke();
pushMatrix();
scale(scaleFactor);
rect(0, 0, 100, 100);
popMatrix();
}
void keyPressed()
{
if (key == 'r')
{
scaleFactor = 1;
}
}
void mouseWheel(MouseEvent e)
{
scaleFactor += e.getAmount() / 100;
}
The previous answer doesn't quite have the requested behavior. If you want the same style of zooming as users might expect from scrolling the mouse in Google Maps, for example, I think you want this:
float scaleFactor = 1.0;
float translateX = 0.0;
float translateY = 0.0;
void setup() {
size(300, 300);
}
void draw() {
background(255);
fill(128);
noStroke();
pushMatrix();
translate(translateX,translateY);
scale(scaleFactor);
rect(0, 0, 100, 100);
rect(width-100, height-100, 100, 100);
popMatrix();
}
void keyPressed() {
if (key == 'r') {
scaleFactor = 1;
translateX = 0.0;
translateY = 0.0;
}
}
void mouseDragged(MouseEvent e) {
translateX += mouseX - pmouseX;
translateY += mouseY - pmouseY;
}
void mouseWheel(MouseEvent e) {
translateX -= mouseX;
translateY -= mouseY;
float delta = e.getCount() > 0 ? 1.05 : e.getCount() < 0 ? 1.0/1.05 : 1.0;
scaleFactor *= delta;
translateX *= delta;
translateY *= delta;
translateX += mouseX;
translateY += mouseY;
}
Try this...
float scaleFactor;
float translateX;
float translateY;
void setup()
{
size(300, 300);
scaleFactor = 1;
}
void draw()
{
background(255);
fill(128);
noStroke();
pushMatrix();
translate(translateX,translateY);
scale(scaleFactor);
rect(0, 0, 100, 100);
rect(width-100, height-100, 100, 100);
popMatrix();
}
void keyPressed()
{
if (key == 'r')
{
scaleFactor = 1;
}
}
void mouseWheel(MouseEvent e)
{
translateX = translateX-e.getAmount()*(mouseX)/100;
translateY = translateY-e.getAmount()*(mouseY)/100;
scaleFactor += e.getAmount() / 100;
}
Actually it's smoother to do:
float e = -event.getCount()/100.0;
float delta = pow(2, e);
instead of:
float delta = e.getCount() > 0 ? 1.05 : e.getCount() < 0 ? 1.0/1.05 : 1.0;
Adding a detailed answer on why RandomEtc's answer works.
Key part of their answer is:
void mouseWheel(MouseEvent e) {
translateX -= mouseX;
translateY -= mouseY;
float delta = e.getCount() > 0 ? 1.05 : e.getCount() < 0 ? 1.0/1.05 : 1.0;
scaleFactor *= delta;
translateX *= delta;
translateY *= delta;
translateX += mouseX;
translateY += mouseY;
}
This works because we do 3 transformations: translate by [-mouseX, -mouseY], scale by [delta, delta], translate by [+mouseX, +mouseY].
The translation is important because scaling scales 'about the origin' (i.e. the origin remains constant, all other points change). So we translate to move the origin, then translate back at the end.
In terms of matrix transformations, we can express this as the following (where mx = mouseX, my = mouseY, d = delta):
- - - - - -
| 1 0 mx | | d 0 0 | | 1 0 -mx |
| 0 1 mY | | 0 d 0 | | 0 1 -my |
| 0 0 1 | | 0 0 1 | | 0 0 1 |
- - - - - -
Also, note that the order is important, as matrix operations are not commutative. While the order may seem non-intuitive (they are in the opposite order!) - this is because we would write a point on the right-hand end of the transformation matrices and apply from the right to the left. Anyway.
If you carry out the matrix multiplication, you end up with:
- -
| d 0 mx*(1-d) |
| 0 d my*(1-d) |
| 0 0 1 |
- -
Or, scaling by delta and translating by mouseX * (1 - delta). Which is equivalent to mouseX - mouseX * delta. This is exactly what RandomEtc does. An equivalent function would be:
void mouseWheel(MouseEvent e) {
float delta = e.getCount() > 0 ? 1.05 : e.getCount() < 0 ? 1.0/1.05 : 1.0;
scaleFactor *= delta;
translateX = (delta*translateX) + mouseX * (1 - delta);
translateY = (delta*translateY) + mouseY * (1 - delta);
}

Resources