How can I create a slider with two arrow buttons from the side? The arrows/triangle should turn white when clicked. And the slider should move each time the arrow button is clicked.
here's the link to what it should look like
and here's what I've done so far
int x=75;
void setup() {
size(600,400);
}
void draw() {
background(100);
fill (200);
rect (75, 25, 400, 50);
stroke(0);
if(mousePressed) {
if (mouseX >75 && mouseX <= 475)
{x=mouseX;}
}
fill(127,0,0);
rect (x, 20, 9, 60);
fill (255);
fill (200);
rect (10, 25, 50, 50);
{
if (mousePressed == true) {
fill(255);
} else {
fill(0);
}
triangle (50, 60, 50, 40, 15, 50);
}
fill (200);
rect (490, 25, 50, 50);
{
if (mousePressed == true) {
fill(255);
} else {
fill(0);
}
triangle (500, 60, 500, 40, 535, 50);
}
println(x);
}
When I click anywhere on the screen, my problem is that both arrows turn white. I need it to individually function. And the slider is not moving every time I click the arrow buttons
The following approach to this problem uses 4 different classes: ForwardArrow, BackArrow, Slider, and ValueField. Arrow fill color is controlled by the press() method of its respective class.
color BLUE = color(64, 124, 188);
color LTGRAY = color(185, 180, 180);
color YELLOW = color(245, 250, 13);
color RED = color(255, 0, 0);
color BLACK = color(0, 0, 0);
color WHITE = color(255, 255, 255);
color GREEN = color(32, 175, 47);
ForwardArrow _fwdArrw;
BackArrow _backArrw;
ValueField _valueFld;
Slider _slider;
final int _sliderX = 90;
final int _sliderY = 40;
final int _sliderW = 200;
final int _sliderH = 30;
final int _txtSize = 22;
final int _initValue = 40;
final int _maxValue = 200;
final int _minValue = 0;
int value = _initValue;
class ValueField {
float x, y, w, h;
String title;
color fldColor;
color txtColor;
// Constructor
ValueField(int xpos, int ypos, float wt, float ht, String valueStr, color background, color foreground) {
x = xpos;
y = ypos;
w = wt;
h = ht;
title = valueStr;
fldColor = background;
txtColor = foreground;
}
void display(int val) {
// **** Value Field **** //
fill(fldColor); // erase old value
rect(x, y, w, h);
fill(txtColor); // text color
textSize(_txtSize);
textAlign(CENTER);
text(str(val), x, y, w, h);
// **** Slider bar **** //
fill(255);
rect(_sliderX, _sliderY, _sliderW*val/_maxValue, _sliderH);
}
}
class ForwardArrow {
float x, y, w, h;
color arrwColor;
// Constructor
ForwardArrow(int xpos, int ypos, float wt, float ht, color background) {
x = xpos;
y = ypos;
w = wt;
h = ht;
arrwColor = background;
}
void display() {
fill(arrwColor); // arrow color
noStroke();
triangle(x, y, x, y + h, x + w, y + h/2 );
}
void press() {
fill(255); // arrow color
noStroke();
triangle(x, y, x, y + h, x + w, y + h/2 );
}
}
class BackArrow {
float x, y, w, h;
color arrwColor;
// Constructor
BackArrow(int xpos, int ypos, float wt, float ht, color background) {
x = xpos;
y = ypos;
w = wt;
h = ht;
arrwColor = background;
}
void display() {
fill(arrwColor);
noStroke();
triangle(x, y + h/2, x + w, y, x + w, y + h );
}
void press() {
fill(255);
noStroke();
triangle(x, y + h/2, x + w, y, x + w, y + h );
}
}
class Slider {
float x, y, w, h;
color barColor;
color trimColor;
// Constructor
Slider(int xpos, int ypos, float wt, float ht, color background, color foreground) {
x = xpos;
y = ypos;
w = wt;
h = ht;
barColor = background;
trimColor = foreground;
}
void display() {
stroke(0);
strokeWeight(1);
noFill();
rect(x, y, w, h);
}
}
void setup() {
size(500, 250);
background(BLUE);
_slider = new Slider(_sliderX, _sliderY, _sliderW, _sliderH, WHITE, BLACK);
_backArrw = new BackArrow(50, 40, 30, 30, GREEN);
_fwdArrw = new ForwardArrow(300, 40, 30, 30, GREEN);
_valueFld = new ValueField(380, 40, 60, 30, str(_initValue), WHITE, BLACK);
}
void draw() {
background(BLUE);
_valueFld.display(value);
_fwdArrw.display();
_backArrw.display();
_slider.display();
// FwdArrw Long Press
if ((mouseX >= _fwdArrw.x) && (mouseX <= _fwdArrw.x + _fwdArrw.w) && (mouseY >= _fwdArrw.y) && (mouseY <= _fwdArrw.y + _fwdArrw.h)) {
if (mousePressed == true) {
_fwdArrw.press();
value++;
if (value > _maxValue) {
value = _maxValue;
}
_valueFld.display(value);
}
}
// BackArrw Long Press
if ((mouseX >= _backArrw.x) && (mouseX <= _backArrw.x + _backArrw.w) && (mouseY >= _backArrw.y) && (mouseY <= _backArrw.y + _backArrw.h)) {
if (mousePressed == true) {
_backArrw.press();
value--;
if (value < _minValue) {
value = _minValue;
}
_valueFld.display(value);
}
}
}
A revision of your code follows;
int x=75;
void setup() {
size(600, 400);
}
void draw() {
background(100);
fill (200);
rect (75, 25, 400, 50); // slider bar
stroke(0);
fill(127, 0, 0);
rect (x, 20, 9, 60); // slider thumb
fill (200);
rect (10, 25, 50, 50); // back arrow
fill(0);
triangle (50, 60, 50, 40, 15, 50);
if ((mouseX >= 10) && (mouseX <= 10 + 50) && (mouseY >= 25) && (mouseY <= 25 + 50) ) {
if (mousePressed == true) {
fill(255);
triangle (50, 60, 50, 40, 15, 50);
x--;
if (x<75) {
x = 75; // minValue
}
} else {
fill(0);
triangle (50, 60, 50, 40, 15, 50);
}
}
fill (200);
rect (490, 25, 50, 50); //forward arrow
fill(0);
triangle (500, 60, 500, 40, 535, 50);
if ((mouseX >= 490) && (mouseX <= 490 + 50) && (mouseY >= 25) && (mouseY <= 25 + 50) ) {
if (mousePressed == true) {
fill(255);
triangle (500, 60, 500, 40, 535, 50);
x++;
if (x>466) {
x = 466; // maxValue
}
} else {
fill(0);
triangle (500, 60, 500, 40, 535, 50);
}
}
}
You've got part of the logic right for the slider/trackbar so it changes x only within a range. This happens horizontally only at this stage, but you can use the same logic to check horizontal limits as well. Similarly, you can check if the cursor is within the bounds of any rectangle (be it the slider or either of the buttons):
int x=75;
void setup() {
size(600, 400);
}
void draw() {
background(100);
// slider
fill (200);
rect (75, 25, 400, 50);
stroke(0);
if (mousePressed) {
if (mouseX >75 && mouseX <= 475)
{
x=mouseX;
}
}
fill(127, 0, 0);
rect (x, 20, 9, 60);
fill (255);
// left arrow button
fill (200);
rect (10, 25, 50, 50);
fill(0);
if (mousePressed == true) {
if (mouseX > 10 && mouseX <= 10 + 50 && mouseY > 25 && mouseY <= 25 + 50){
fill(255);
}
}
triangle (50, 60, 50, 40, 15, 50);
// right arrow button
fill (200);
rect (490, 25, 50, 50);
fill(0);
if (mousePressed == true) {
if (mouseX > 490 && mouseX <= 490 + 50 && mouseY > 25 && mouseY <= 25 + 50){
fill(255);
}
}
triangle (500, 60, 500, 40, 535, 50);
println(x);
}
Wouldn't it be nice if you could take that logic and instead of copy/pasting the different x,y,width,height parameters for the same 4 statements you could group that functionality in a reusable block of code ?
That what functions are for. You're already using them already (defining setup()/draw(), calling background()/fill()/etc.
The Processing Button example already provides the boolean overRect(int x, int y, int width, int height) function which is perfect for you're trying to achieve: pass in the x,y,width,height or a button and get back boolean value.
Here's your code using the overRect():
int x=75;
void setup() {
size(600, 400);
}
void draw() {
background(100);
// slider
fill (200);
rect (75, 25, 400, 50);
stroke(0);
if (mousePressed) {
if (mouseX >75 && mouseX <= 475)
{
x=mouseX;
}
}
fill(127, 0, 0);
rect (x, 20, 9, 60);
fill (255);
// left arrow button
fill (200);
rect (10, 25, 50, 50);
fill(0);
if (mousePressed && overRect(10, 25, 50, 50)) {
fill(255);
x--;
}
triangle (50, 60, 50, 40, 15, 50);
// right arrow button
fill (200);
rect (490, 25, 50, 50);
fill(0);
if (mousePressed && overRect(490, 25, 50, 50)){
fill(255);
x++;
}
triangle (500, 60, 500, 40, 535, 50);
// ensure x remains within the slide limits
x = constrain(x, 75, 475);
println(x);
}
boolean overRect(int x, int y, int width, int height) {
if (mouseX >= x && mouseX <= x+width &&
mouseY >= y && mouseY <= y+height) {
return true;
} else {
return false;
}
}
I am doing a Roll Over Animation.
How will I revert back the color to its original after if fades away when the mouse cursor comes back to the tile?
in my code, the color fades to white then does not come back when I bring back the cursor to the tile
float addColorValue;
boolean clicked = false;
void setup() {
size(400,400); //pixel size of the program
}
void draw() {
background(255); //setting up the white background
line(width/2,height,width/2,0); //drawing the vertical line
line(width,height/2,0,width/2); //drawing the horizontal line
if(clicked){
if(mouseX > 200 && mouseY > 200){ // draws the 4th quadrant
fill(255,255,addColorValue+=1); rect(200,200,200,200); //draws rectangle
fill(255); textSize(50); text("4TH", 250, 300); //display which number of the quadrant
}
//draws the 3rd quadrant
else if(mouseX > 0 && mouseY > 200){
fill(addColorValue+=1,addColorValue+=1,255); rect(0,200,200,200);
fill(255); textSize(50); text("3RD", 50, 300);
}
//draws the 2nd quadrant
else if(mouseX > 200 && mouseY > 0){
fill(addColorValue+=1,255,addColorValue+=1); rect(200,0,200,200);
fill(255); textSize(50); text("2ND", 250, 100);
}
//draws the 1st quadrant
else if(mouseX > 0 && mouseY > 0){
fill(255,addColorValue+=1,addColorValue+=1); rect(0,0,200,200);
fill(255); textSize(50); text("1ST", 50, 100);
}
}
else{
background(0);
}
}
//switches on and off the lights of the program
void mousePressed() {
clicked = !clicked;
}
Associate each quad to an index and store the index in a globale variable (quad). Get the index of the current quad (new_quad) and compare it to the quad. If the index has changed, then set addColorValue = 0. This will restart the fading effect:
if (quad != new_quad) {
quad = new_quad;
addColorValue = 0;
}
See the example:
float addColorValue;
boolean clicked = false;
int quad = 0;
void setup() {
size(400,400); //pixel size of the program
}
void draw() {
if (clicked) {
background(255); //setting up the white background
line(width/2,height,width/2,0); //drawing the vertical line
line(width,height/2,0,width/2); //drawing the horizontal line
int new_quad = -1;
if (mouseX > 200 && mouseY > 200){
new_quad = 0;
drawRect("4TH", 200, 200, 200, 200, color(255, 255, addColorValue+=1));
}
else if(mouseX > 0 && mouseY > 200){
new_quad = 1;
drawRect("3RD", 0, 200, 200, 200, color(addColorValue+=1, addColorValue+=1, 255));
}
else if(mouseX > 200 && mouseY > 0){
new_quad = 2;
drawRect("2ND", 200, 0, 200, 200, color(addColorValue+=1, 255, addColorValue+=1));
}
else if(mouseX > 0 && mouseY > 0) {
new_quad = 3;
drawRect("1ST", 0, 0, 200, 200, color(255, addColorValue+=1, addColorValue+=1));
}
if (quad != new_quad) {
quad = new_quad;
addColorValue = 0;
}
}
else{
background(0);
}
}
void drawRect(String text, int x, int y, int w, int h, color c) {
fill(c);
rect(x, y, w, h);
fill(255);
textSize(50);
text(text, x+50, y+100);
}
//switches on and off the lights of the program
void mousePressed(){
clicked = !clicked;
}
im creating a 2d world which has a player that is in a rectangle shape and what im trying to do is when the player press space button it draws a block depending on his direction the problem is it only sets for one block and plus it deletes it after repaiting now i know my mistake is in paint method. what i wanna know how to make it draws the block everytime i press space without removing after repainting and can be set for multiple times i know i should use loop but i dont know exactly i should write it
private static final long serialVersionUID = -1401667790158007207L;
int playerx = 450;
int playery = 450;
int playerDirection = 0; //north = 0, west = 1, south = 2, east = 3
boolean setBlock;
public platform(){
super("2D game");
JPanel panel = new JPanel();
panel.setBackground(Color.white);
addKeyListener(this);
this.setContentPane(panel);
}
public void paint(Graphics g){
super.paint(g);
Graphics2D g2 = (Graphics2D)g;
Rectangle player = new Rectangle(playerx, playery, 50, 50);
g2.fill(player);
if(setBlock){
if(playerDirection == 0){
g2.fillRect(playerx, playery - 50, 50, 50);
}else if(playerDirection == 1){
g2.fillRect(playerx + 50, playery, 50, 50);
}else if(playerDirection == 2){
g2.fillRect(playerx, playery + 50, 50, 50);
}else if(playerDirection == 3){
g2.fillRect(playerx - 50, playery, 50, 50);
}
setBlock = false;
}
}
public void keyPressed(KeyEvent e) {
if(e.getKeyCode() == KeyEvent.VK_UP){
playerDirection = 0;
playery -=50;
repaint();
}
if(e.getKeyCode() == KeyEvent.VK_DOWN){
playerDirection = 2;
playery +=50;
repaint();
}
if(e.getKeyCode() == KeyEvent.VK_RIGHT){
playerDirection = 1;
playerx += 50;
repaint();
}
if(e.getKeyCode() == KeyEvent.VK_LEFT){
playerDirection = 3;
playerx -=50;
repaint();
}
if(e.getKeyCode() == KeyEvent.VK_SPACE){
setBlock = true;
}
}
public void keyReleased(KeyEvent e) {
}
public void keyTyped(KeyEvent e) {
}
}
You need to store your Blocks in a List. And add a new one when pressing Space Key. Then you can easily draw all of them in a for loop. Also remove that setBlock boolean because it makes no sense.
...
// introduce this class to hold a block
class Block{
public int x;
public int y;
public Block(int _x, int _y){
x = _x;
y = _y;
}
}
...
// boolean setBlock; // remove this boolean
ArrayList<Block> blocks = new ArrayList<Block>(); // list of all blocks
public platform(){...}
public void paint(Graphics g){
...
// if(setBlock){ // remove this boolean
if(playerDirection == 0){
g2.fillRect(playerx, playery, 50, 50);
}else if(playerDirection == 1){
g2.fillRect(playerx, playery, 50, 50);
}else if(playerDirection == 2){
g2.fillRect(playerx, playery, 50, 50);
}else if(playerDirection == 3){
g2.fillRect(playerx, playery, 50, 50);
}
// draw the blocks
for(Block b : blocks)
g2.fillRect(b.x, b.y, 50, 50);
// setBlock = false; // remove this boolean
//} // remove this boolean
}
public void keyPressed(KeyEvent e) {
...
if(e.getKeyCode() == KeyEvent.VK_SPACE){
// setBlock = true; // remove this boolean
// add a new block
blocks.add(new Block(playerx, playery));
repaint();
}
}
...
This is my code:
import java.awt.*;
import java.awt.event.*;
import java.util.*;
import javax.swing.*;
public class Draw extends JComponent implements KeyListener {
Random r = new Random();
int x = 0;
int y = 0;
int a = 5 * r.nextInt(150);
int b = 5 * r.nextInt(90);
Image img1 = Toolkit.getDefaultToolkit().getImage("C:/Users/Administrator/eclipse/My Projects/Game/src/bluebackground1.png");
public Draw(){
addKeyListener(this);
setFocusable(true);
}
//display
public void paint(Graphics g){
g.drawImage(img1, 0, 0, this);
g.setColor(Color.CYAN);
g.fill3DRect(x, y, 50, 50, true);
g.setColor(Color.RED);
g.draw3DRect(a, b, 50, 50, true);
g.setColor(Color.BLACK);
g.drawLine(0, 500, 800, 500);
g.setColor(Color.BLACK);
g.drawString("Press R to restart the game", 10, 540);
g.drawString("Use arrow keys to move", 600, 540);
if(x == a && y == b){
g.setColor(Color.BLACK);
g.setFont(new Font("", Font.PLAIN, 50));
g.drawString("Victory", 300, 550);
}
}
//controls
public void keyPressed(KeyEvent k) {
if(k.getKeyCode() == KeyEvent.VK_UP){
y -= 5;
} else if(k.getKeyCode() == KeyEvent.VK_DOWN){
y += 5;
} else if(k.getKeyCode() == KeyEvent.VK_LEFT){
x -= 5;
} else if(k.getKeyCode() == KeyEvent.VK_RIGHT){
x += 5;
}
if(k.getKeyCode() == KeyEvent.VK_R){
restart();
}
//border
if(x < 0){
x += 5;
} else if(x > 745){
x -= 5;
} else if(y < 0){
y += 5;
} else if (y > 450){
y -= 5;
}
repaint();
}
public void keyReleased(KeyEvent k) {}
public void keyTyped(KeyEvent k) {}
//restart function
public void restart(){
x = 0;
y = 0;
a = 5 * r.nextInt(150);
b = 5 * r.nextInt(90);
}
}
What I want is when the cyan rectangle which is moveable gets inside the red rectangle which is not moveable the red rectangle disappears permanently because the game is not over and the cyan rectangle will have to move more.
How do I remove the red rectangle when it collides with the cyan one?
Store Shape instances in a List. At time of painting, iterate the list and draw each one. When one shape is removed, remove it from the list and call repaint().
I want to know how I can make collision happen between the two circles. One of them is movable, as you can see, and I want to make it so that the movable circle can actually push the smaller one. However, I don't want simple rectangle collision. I'm trying to make it so that the circles direction of push depends on the positions of the two circles.
package haex;
import java.applet.*;
import java.awt.*;
import java.awt.event.*;
public class haex extends Applet implements Runnable, KeyListener{
private static final long serialVersionUID = 1L;
int x = 0, y = 0, footballX = 100, footballY = 100;
double angle, xVel, yVel;
Image dbImage;
Graphics dbg;
boolean up, down, left, right, kick;
public void init(){
addKeyListener(this);
}
public void start(){
Thread th = new Thread(this);
th.start();
}
public void run(){
while(true){
angle = Math.atan2((footballX + 12) - (x + 25), (footballY + 12) - (y + 25));
if(Math.sqrt(Math.pow((footballX + 12) - (x + 25), 2) + Math.pow((footballY + 12) - (y + 25), 2)) <= 37){
xVel = Math.cos(angle);
yVel = Math.sin(angle);
footballX += xVel;
footballY += yVel;
}
if(up) y--;
if(down) y++;
if(left) x--;
if(right) x++;
try{Thread.sleep(1000/60);}catch(InterruptedException x){}
repaint();
}
}
public void stop(){}
public void destroy(){}
public void paint(Graphics g){
if(kick){
g.setColor(Color.lightGray);
}else{
g.setColor(Color.black);
}
g.fillOval(x, y, 50, 50);
g.setColor(Color.blue);
g.fillOval(x + 5, y + 5, 40, 40);
g.setColor(Color.black);
g.fillOval(footballX, footballY, 24, 24);
g.setColor(Color.white);
g.fillOval(footballX + 2, footballY + 2, 20, 20);
g.setColor(Color.black);
g.drawLine(x + 25, y + 25, footballX + 12, footballY + 12);
}
public void keyPressed(KeyEvent e){
if(e.getKeyCode() == KeyEvent.VK_UP) up = true;
if(e.getKeyCode() == KeyEvent.VK_DOWN) down = true;
if(e.getKeyCode() == KeyEvent.VK_LEFT) left = true;
if(e.getKeyCode() == KeyEvent.VK_RIGHT) right = true;
if(e.getKeyCode() == KeyEvent.VK_X) kick = true;
}
public void keyReleased(KeyEvent e){
if(e.getKeyCode() == KeyEvent.VK_UP) up = false;
if(e.getKeyCode() == KeyEvent.VK_DOWN) down = false;
if(e.getKeyCode() == KeyEvent.VK_LEFT) left = false;
if(e.getKeyCode() == KeyEvent.VK_RIGHT) right = false;
if(e.getKeyCode() == KeyEvent.VK_X) kick = false;
}
public void update(Graphics g){
if(dbImage == null){
dbImage = createImage(this.getSize().width, this.getSize().height);
dbg = dbImage.getGraphics();
}
dbg.setColor(getBackground());
dbg.fillRect(0, 0, this.getSize().width, this.getSize().height);
dbg.setColor(getForeground());
paint(dbg);
g.drawImage(dbImage, 0, 0, this);
}
#Override
public void keyTyped(KeyEvent e){}
}
Doing circular collision should be even easier than rectangular, just use a single radius for each instead of seperate x and y dimensions. Just calculate if the distance between their center points is less than the radius of both. If so, they're touching, if not, they aren't.
EDIT:
So the problem is calculating the resultant velocities and directions of the balls AFTER collision, not calculating the collision itself? Learn to explain the problem accurately if you want accurate help.
In that case, compare the X values of the two center points and the Y values of the two center points. Collisions should be largely elastic, so if a ball is hit on the left side, it should go to the right side, and vise versa. Then you just have to combine the X and Y components into a vector to get the direction and magnitude of the reaction.