I am having a slight problem. I'm creating a basic Arkanoid using processing but I can't figure out how to make the paddle move with my mouse. I have it currently set up to move on a click for this example.
void setup() {
size(400, 400);
rectMode(CENTER);
ellipseMode(CENTER);
}
void draw() {
background(#EFF8FB);
batMain();
ballMain();
}
float ballX = 200, ballY = 200;
float direction = PI * .3f;
byte speed = 4;
final static byte ballSize = 20;
final static color ballColor = #2EFE2E;
void ballMain() {
// Draw the ball
fill(ballColor);
ellipse(ballX, ballY, ballSize, ballSize);
ballX += speed * cos(direction);
ballY += speed * sin(direction);
walls();
if (direction > TWO_PI) direction -= TWO_PI;
else if (direction < -TWO_PI) direction += TWO_PI;
}
short a = 200;
final static color batColor = #5858FA;
void batMain() {
// Draw the bat
fill(batColor);
rect(a, 380, 60, 10);
noStroke();
if (mousePressed) {
// Right side of the screen
if (mouseX > width>>1) a += 4;
// Other side of the screen
else a -= 4;
}
if (ballY + 10 > 375 && ballY + 10 < 385 && ballX + 10 > a - 30 && ballX - 10 < a + 30) {
if (ballX + 10 > a - 30 && ballX < a - 15) { // Left part
direction = TWO_PI - direction;
++speed;
}
else if (ballX - 10 < a + 30 && ballX < a + 15) {
direction = TWO_PI - direction;
++speed;
}
else {
direction = TWO_PI - direction;
speed = 4;
}
}
}
void walls() {
if (ballX < 10) {
ballX = 11;
direction = PI - direction;
}
if (ballX > 390) {
ballX = 389;
direction = PI - direction;
}
if (ballY < 10) {
ballY = 11;
direction = TWO_PI - direction;
}
if (ballY > 390) {
ballY = 389;
direction = TWO_PI - direction;
}
}
You already have the logic here:
if (mousePressed) {
// Right side of the screen
if (mouseX > width>>1) a += 4;
// Other side of the screen
else a -= 4;
}
If you want the paddle to follow the mouse even when you aren't pressing it, just get rid of that outer if statement:
// Right side of the screen
if (mouseX > width>>1){
a += 4;
}
// Other side of the screen
else{
a -= 4;
}
Or if you want the paddle to be at the mouse's position, just use that directly:
a = mouseX;
Related
Below is the code I am working with in processing. I want the code to be edited to change the movement of the ellipse on the canvas on pressing any key from the keyboard.
float circleX = 0;
float circleY = 0;
float xSpeed = 2.5;
float ySpeed = 2;
void setup() {
size(500, 500);
}
void draw() {
background(0,200,0);
circleX += xSpeed;
if (circleX < 0 || circleX > width) {
xSpeed *= -1;
}
circleY += ySpeed;
if (circleY < 0 || circleY > height) {
ySpeed *= -1;
}
ellipse(circleX, circleY, 100, 100);
}
You can use the in-built keyPressed function to handle user input, so after your original code, you could add this:
void keyPressed() {
switch (keyCode) { // the keyCode variable is used to identify which non-ASCII key was pressed
case LEFT:
xSpeed -= 0.1;
break;
case RIGHT:
xSpeed += 0.1;
break;
case UP:
ySpeed -= 0.1;
break;
case DOWN:
ySpeed += 0.1;
break;
default: // default is used when none of these are pressed, so in this case it is when any key is pressed
// this depends on what you want to do, but in this case I am just inverting the speed, so replace as you see fit
xSpeed *= -1;
ySpeed *= -1;
}
}
Hope this helps!
I managed to create the Mandelbrot set in processing but am struggling to implement a zoom. Here is my code:
float minvalX = -1.5;
float minvalY = -1.5;
float maxvalX = 1.5;
float maxvalY = 1.5;
float angle = 0;
float di,dj;
int xPixel,yPixel;
void setup(){
size(500,500);
pixelDensity(1);
colorMode(HSB, 360);
}
void draw() {
scale(zoom);
float maxLoops = 100;
loadPixels();
float equationOneOriginal;
float equationTwoOriginal;
for (xPixel = 0; xPixel < width ; xPixel++) {
for (yPixel = 0; yPixel < height ; yPixel++) {
float a = map(xPixel+di, 0,width, minvalX, maxvalX);
float b = map(yPixel+dj, 0,height, minvalY, maxvalY);
equationOneOriginal = a;
equationTwoOriginal = b;
float n = 1;
while (n < maxLoops) {
float equationOne = a*a - b*b; //First part of the equation
float equationTwo = 2 * a * b; //Second part of the equation
a = equationOne + equationOneOriginal;
b = equationTwo + equationTwoOriginal;
if (abs(a+b) > 16) {
break;
}
n++;
}
if (n == maxLoops) {
pixels[xPixel+yPixel*width] = color(0);
}
else {
pixels[xPixel+yPixel*width] = color(n-(int)(n/360)*n, 360, (int)map(n*6, 1, maxLoops, 0, 360));
}
}
}
updatePixels();
}
void mousePressed()
{
if (mouseButton == LEFT) {
di = di + mouseX - int(width/2);
dj = dj + mouseY - int(height/2);
minvalX += 0.1;
maxvalX -= 0.1;
minvalY += 0.1;
maxvalY -= 0.1;
}
}
It zooms into where my mouse is but eventually it goes towards the middle and gets stuck there. I know it is to do with minvalX, maxvalX, minvalY and maxvalY but I don't know what to do to these values to get it to always zoom towards my mouse.
Trying to create a simple breakout game, I've written all the code, except i dont understand why the ball is on the side of the screen boundaries instead of on top the paddle(player).
Breakout game, ball on side
class Ball
{
int Width => texture.Width;
int Height => texture.Height;
public Rectangle BoundingBox =>
new Rectangle((int)position.X, (int)position.Y, Width, Height);
Texture2D texture;
Vector2 position;
Vector2 speed;
public void SetStartBallPosition(Rectangle rec)
{
position.X = rec.X + (rec.Width - Width);
position.Y = rec.Y - Height;
if (Game1.RandomNumber.Next(0, 2) < 1)
{
speed = new Vector2(-200.0f, -200.0f);
}
else
{
speed = new Vector2(200.0f, -200.0f);
}
}
public void Draw(SpriteBatch sb)
{
sb.Draw(texture, position, Color.White);
}
public void Update(GameTime gt)
{
position += speed * (float)gt.ElapsedGameTime.TotalSeconds;
if (position.X + Width > Game1.ScreenBounds.Width)
speed.X *= -1;
position.X = Game1.ScreenBounds.Width - Width;
if (position.X < 0)
{
speed.X *= -1;
position.Y = 0;
}
if (position.Y < 0)
{
speed.Y *= -1;
position.Y = 0;
}
}
TL;DR.
My ball spawns at the side instead of middle.
Thanks for Help!
In the SetStartBallPosition(Rectangle rec), You've set the ball position at the full width of the boundary box, minus the full width of the ball:
position.X = rec.X + (rec.Width - Width);
Assuming that rec is empty, then in order to get the center, you need to divide both width's there in half. Like this:
position.X = rec.X + (rec.Width/2 - Width/2);
Be aware that when dividing, that they shouldn't have decimals.
Let me know if it works.
The code I have here is an animation that shows one circle that moves the way I'd like it to. I'd like to have 10 circles and I assume I use a loop or possibly an array but I'm not quite sure how to do that. At the same time, I want to make it so that at first the animation doesn't move but starts moving when I press a specific key and stops when I press the same key.
color a = color(random(255), random(255), random(255), random(125, 250));
float dia = random(60, 80);
float x;
float y;
float speedX = random(-3, 3);
float speedY = random(-3, 3);
void setup() {
background(255);
size(400, 200);
x = random(dia/2, width-dia/2);
y = random(dia/2, height-dia/2);
}
void draw() {
background(255);
noStroke();
fill(a);
ellipse(x, y, dia, dia);
x = x + speedX;
y = y + speedY;
if(speedX > 0 && x >= width - dia/2) {
speedX = speedX * -1;
}
if(speedX < 0 && x <= dia/2) {
speedX = speedX * -1;
}
if(speedY > 0 && y >= height - dia/2) {
speedY = speedY * -1;
}
if(speedY < 0 && y <= dia/2) {
speedY = speedY * -1;
}
}
You can get multiple circles by encapsulating the data you need to draw a circle into a class. It might look something like this:
Circle c;
void setup() {
size(400, 200);
c = new Circle();
}
void draw() {
background(255);
c.draw();
}
class Circle {
color a = color(random(255), random(255), random(255), random(125, 250));
float dia = random(60, 80);
float x = random(dia/2, width-dia/2);
float y = random(dia/2, height-dia/2);
float speedX = random(-3, 3);
float speedY = random(-3, 3);
void draw() {
noStroke();
fill(a);
ellipse(x, y, dia, dia);
x = x + speedX;
y = y + speedY;
if (speedX > 0 && x >= width - dia/2) {
speedX = speedX * -1;
}
if (speedX < 0 && x <= dia/2) {
speedX = speedX * -1;
}
if (speedY > 0 && y >= height - dia/2) {
speedY = speedY * -1;
}
if (speedY < 0 && y <= dia/2) {
speedY = speedY * -1;
}
}
}
Then to get multiple circles, you'd just create multiple instances of your Circle class and add them to an ArrayList:
ArrayList<Circle> circles = new ArrayList<Circle>();
void setup() {
size(400, 200);
for (int i = 0; i < 5; i++) {
circles.add(new Circle());
}
}
void draw() {
background(255);
for (Circle c : circles) {
c.draw();
}
}
For the user interaction, have a look at the event methods like mousePressed() or keyPressed(). The Processing reference should be your first stop. Good luck.
Still just learning... So my goal is for the sketch to have the font appear in front of the boxes. I understand why it is behind the row of boxes. It is because the loop immediately goes to the next box and layers it over the font. However, because the variables are defined locally.... I don't really know what else to do...The loop is also crucial for updating purposes.
// Considerations: How to determine if point lies within a rectangle? \
// Hover over rectangle and trigger event
int numOfIndices = 50;
float[][] indexes = new float[numOfIndices][2];
public void setup()
{
frameRate(60);
size(600, 600);
strokeWeight(1);
int offset = width/numOfIndices;
for (int i = 0; i < numOfIndices; i++) {
indexes[i][0] = i*offset + offset/2; // X Coordinate
indexes[i][1] = height/2; // Y Coordinate
}
}
public void draw()
{
background(255);
// loop over each rectangle per frame
for (int i = 0; i < numOfIndices; i++) {
float widthRect = 5;
float heightRect = 20;
// A
float topLeftX = indexes[i][0] - widthRect/2;
float topLeftY = height/2 + heightRect/2;
// C
float bottomRightX = indexes[i][0] + widthRect/2;
float bottomRightY = height/2 - heightRect/2;
if (
mouseX > topLeftX &&
mouseX < bottomRightX &&
mouseY > bottomRightY &&
mouseY < topLeftY
) {
// Inside rectangle. Do something.
stroke(100);
fill(100);
//text(i, indexes[i][0], indexes[i][1]);
} else {
// Not inside rectangle. Do something else.
stroke(200);
fill(200);
}
rectMode(CENTER);
rect(
indexes[i][0], // X
indexes[i][1], // Y
widthRect, // width
heightRect, // height
20 // radi for corners (rounded)
);
if (
mouseX > topLeftX &&
mouseX < bottomRightX &&
mouseY > bottomRightY &&
mouseY < topLeftY
) {
// Inside rectangle. Do something.
textSize(26);
text(i, indexes[i][0], indexes[i][1]);
}
}
}
There are some different ways of doing it. One is as simple as reversing the for loop as follows:
for (int i = numOfIndices-1; i >= 0; i--)
That way the rectangles will be rendered from right to left. It's not a great solution, it will only work in this case because the text location is at the rectangles' right.
A better way is to render all the rectangles and only then render the text. That's quite usual when dealing with UI stuff. That will become:
// Considerations: How to determine if point lies within a rectangle? \
// Hover over rectangle and trigger event
int numOfIndices = 50;
float[][] indexes = new float[numOfIndices][2];
public void setup()
{
frameRate(60);
size(600, 600);
strokeWeight(1);
int offset = width/numOfIndices;
for (int i = 0; i < numOfIndices; i++) {
indexes[i][0] = i*offset + offset/2; // X Coordinate
indexes[i][1] = height/2; // Y Coordinate
}
}
public void draw()
{
background(255);
float widthRect = 5;
float heightRect = 20;
// loop over each rectangle per frame
for (int i = 0; i < numOfIndices; i++) {
// A
float topLeftX = indexes[i][0] - widthRect/2;
float topLeftY = height/2 + heightRect/2;
// C
float bottomRightX = indexes[i][0] + widthRect/2;
float bottomRightY = height/2 - heightRect/2;
if (
mouseX > topLeftX &&
mouseX < bottomRightX &&
mouseY > bottomRightY &&
mouseY < topLeftY
) {
// Inside rectangle. Do something.
stroke(100);
fill(100);
//text(i, indexes[i][0], indexes[i][1]);
} else {
// Not inside rectangle. Do something else.
stroke(200);
fill(200);
}
rectMode(CENTER);
rect(
indexes[i][0], // X
indexes[i][1], // Y
widthRect, // width
heightRect, // height
20 // radi for corners (rounded)
);
}
stroke(100);
fill(100);
for (int i = 0; i < numOfIndices; i++) {
// A
float topLeftX = indexes[i][0] - widthRect/2;
float topLeftY = height/2 + heightRect/2;
// C
float bottomRightX = indexes[i][0] + widthRect/2;
float bottomRightY = height/2 - heightRect/2;
if (
mouseX > topLeftX &&
mouseX < bottomRightX &&
mouseY > bottomRightY &&
mouseY < topLeftY
) {
// Inside rectangle. Do something.
textSize(26);
text(i, indexes[i][0], indexes[i][1]);
}
}
}