Related
I'm trying to code a canvas full of shapes(houses) and animate them in processing.
Here's an example of shape:
void house(int x, int y) {
pushMatrix();
translate(x, y);
fill(0, 200, 0);
triangle(15, 0, 0, 15, 30, 15);
rect(0, 15, 30, 30);
rect(12, 30, 10, 15);
popMatrix();
}
By animation I mean moving them in random directions.
I would also like to add basic interaction: when hovering over a house it's colour would change.
At the moment I've managed to render a canvas full of houses:
void setup() {
size(500, 500);
background(#74F5E9);
for (int i = 30; i < 500; i = i + 100) {
for (int j = 30; j < 500; j = j + 100) {
house(i, j);
}
}
}
void house(int x, int y) {
pushMatrix();
translate(x, y);
fill(0, 200, 0);
triangle(15, 0, 0, 15, 30, 15);
rect(0, 15, 30, 30);
rect(12, 30, 10, 15);
popMatrix();
}
Without seeing source code: your attempted sketch it's very hard to tell.
They can be animated in many ways and it's unclear what you mean. For example, is that the position/rotation/scale of each square, is it the corners/vertices of each square, both ?
You might have a clear idea in your mind, but the current form of the question is ambiguous. We also don't know you're comfort level with various notions such as classes/objects/PVector/PShape/etc. If you were to 'story board' this animation what would it look like ? Breaking the problem down and explaining it in a way that anyone can understand might actually help you figure out a solution on your own as well.
Processing has plenty of examples. Here are a few I find relevant based on what my understanding is of your problem.
You can have a look at the Objects and Create Shapes examples:
File > Examples > Basics > Objects > Objects: Demonstrates grouping drawing/animation (easing, damping). You can tweak this example draw a single square and once you're happy with the look/motion you can animate multiple using an array or ArrayList
File > Examples > Topics > Create Shapes > PolygonPShapeOOP3: Great example using PShape to animate objects.
File > Examples > Topics > Create Shapes > WigglePShape: This example demonstrates how to access and modify the vertices of a PShape
For reference I'm simply copy/pasting the examples mentioned above here as well:
Objects
/**
* Objects
* by hbarragan.
*
* Move the cursor across the image to change the speed and positions
* of the geometry. The class MRect defines a group of lines.
*/
MRect r1, r2, r3, r4;
void setup()
{
size(640, 360);
fill(255, 204);
noStroke();
r1 = new MRect(1, 134.0, 0.532, 0.1*height, 10.0, 60.0);
r2 = new MRect(2, 44.0, 0.166, 0.3*height, 5.0, 50.0);
r3 = new MRect(2, 58.0, 0.332, 0.4*height, 10.0, 35.0);
r4 = new MRect(1, 120.0, 0.0498, 0.9*height, 15.0, 60.0);
}
void draw()
{
background(0);
r1.display();
r2.display();
r3.display();
r4.display();
r1.move(mouseX-(width/2), mouseY+(height*0.1), 30);
r2.move((mouseX+(width*0.05))%width, mouseY+(height*0.025), 20);
r3.move(mouseX/4, mouseY-(height*0.025), 40);
r4.move(mouseX-(width/2), (height-mouseY), 50);
}
class MRect
{
int w; // single bar width
float xpos; // rect xposition
float h; // rect height
float ypos ; // rect yposition
float d; // single bar distance
float t; // number of bars
MRect(int iw, float ixp, float ih, float iyp, float id, float it) {
w = iw;
xpos = ixp;
h = ih;
ypos = iyp;
d = id;
t = it;
}
void move (float posX, float posY, float damping) {
float dif = ypos - posY;
if (abs(dif) > 1) {
ypos -= dif/damping;
}
dif = xpos - posX;
if (abs(dif) > 1) {
xpos -= dif/damping;
}
}
void display() {
for (int i=0; i<t; i++) {
rect(xpos+(i*(d+w)), ypos, w, height*h);
}
}
}
PolygonPShapeOOP3:
/**
* PolygonPShapeOOP.
*
* Wrapping a PShape inside a custom class
* and demonstrating how we can have a multiple objects each
* using the same PShape.
*/
// A list of objects
ArrayList<Polygon> polygons;
// Three possible shapes
PShape[] shapes = new PShape[3];
void setup() {
size(640, 360, P2D);
shapes[0] = createShape(ELLIPSE,0,0,100,100);
shapes[0].setFill(color(255, 127));
shapes[0].setStroke(false);
shapes[1] = createShape(RECT,0,0,100,100);
shapes[1].setFill(color(255, 127));
shapes[1].setStroke(false);
shapes[2] = createShape();
shapes[2].beginShape();
shapes[2].fill(0, 127);
shapes[2].noStroke();
shapes[2].vertex(0, -50);
shapes[2].vertex(14, -20);
shapes[2].vertex(47, -15);
shapes[2].vertex(23, 7);
shapes[2].vertex(29, 40);
shapes[2].vertex(0, 25);
shapes[2].vertex(-29, 40);
shapes[2].vertex(-23, 7);
shapes[2].vertex(-47, -15);
shapes[2].vertex(-14, -20);
shapes[2].endShape(CLOSE);
// Make an ArrayList
polygons = new ArrayList<Polygon>();
for (int i = 0; i < 25; i++) {
int selection = int(random(shapes.length)); // Pick a random index
Polygon p = new Polygon(shapes[selection]); // Use corresponding PShape to create Polygon
polygons.add(p);
}
}
void draw() {
background(102);
// Display and move them all
for (Polygon poly : polygons) {
poly.display();
poly.move();
}
}
// A class to describe a Polygon (with a PShape)
class Polygon {
// The PShape object
PShape s;
// The location where we will draw the shape
float x, y;
// Variable for simple motion
float speed;
Polygon(PShape s_) {
x = random(width);
y = random(-500, -100);
s = s_;
speed = random(2, 6);
}
// Simple motion
void move() {
y+=speed;
if (y > height+100) {
y = -100;
}
}
// Draw the object
void display() {
pushMatrix();
translate(x, y);
shape(s);
popMatrix();
}
}
WigglePShape:
/**
* WigglePShape.
*
* How to move the individual vertices of a PShape
*/
// A "Wiggler" object
Wiggler w;
void setup() {
size(640, 360, P2D);
w = new Wiggler();
}
void draw() {
background(255);
w.display();
w.wiggle();
}
// An object that wraps the PShape
class Wiggler {
// The PShape to be "wiggled"
PShape s;
// Its location
float x, y;
// For 2D Perlin noise
float yoff = 0;
// We are using an ArrayList to keep a duplicate copy
// of vertices original locations.
ArrayList<PVector> original;
Wiggler() {
x = width/2;
y = height/2;
// The "original" locations of the vertices make up a circle
original = new ArrayList<PVector>();
for (float a = 0; a < radians(370); a += 0.2) {
PVector v = PVector.fromAngle(a);
v.mult(100);
original.add(new PVector());
original.add(v);
}
// Now make the PShape with those vertices
s = createShape();
s.beginShape(TRIANGLE_STRIP);
s.fill(80, 139, 255);
s.noStroke();
for (PVector v : original) {
s.vertex(v.x, v.y);
}
s.endShape(CLOSE);
}
void wiggle() {
float xoff = 0;
// Apply an offset to each vertex
for (int i = 1; i < s.getVertexCount(); i++) {
// Calculate a new vertex location based on noise around "original" location
PVector pos = original.get(i);
float a = TWO_PI*noise(xoff,yoff);
PVector r = PVector.fromAngle(a);
r.mult(4);
r.add(pos);
// Set the location of each vertex to the new one
s.setVertex(i, r.x, r.y);
// increment perlin noise x value
xoff+= 0.5;
}
// Increment perlin noise y value
yoff += 0.02;
}
void display() {
pushMatrix();
translate(x, y);
shape(s);
popMatrix();
}
}
Update
Based on your comments here's an version of your sketch modified so the color of the hovered house changes:
// store house bounding box dimensions for mouse hover check
int houseWidth = 30;
// 30 px rect height + 15 px triangle height
int houseHeight = 45;
void setup() {
size(500, 500);
}
void draw(){
background(#74F5E9);
for (int i = 30; i < 500; i = i + 100) {
for (int j = 30; j < 500; j = j + 100) {
// check if the cursor is (roughly) over a house
// and render with a different color
if(overHouse(i, j)){
house(i, j, color(0, 0, 200));
}else{
house(i, j, color(0, 200, 0));
}
}
}
}
void house(int x, int y, color fillColor) {
pushMatrix();
translate(x, y);
fill(fillColor);
triangle(15, 0, 0, 15, 30, 15);
rect(0, 15, 30, 30);
rect(12, 30, 10, 15);
popMatrix();
}
// from Processing RollOver example
// https://processing.org/examples/rollover.html
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;
}
}
// check if the mouse is within the bounding box of a house
boolean overHouse(int x, int y){
// offset half the house width since the pivot is at the tip of the house
// the horizontal center
return overRect(x - (houseWidth / 2), y, houseWidth, houseHeight);
}
The code is commented, but here are the main takeaways:
the house() function has been changed so you can specify a color
the overRect() function has been copied from the Rollover example
the overHouse() function uses overRect(), but adds a horizontal offset to take into account the house is drawn from the middle top point (the house tip is the shape's pivot point)
Regarding animation, Processing has tons of examples:
https://processing.org/examples/sinewave.html
https://processing.org/examples/additivewave.html
https://processing.org/examples/noise1d.html
https://processing.org/examples/noisewave.html
https://processing.org/examples/arrayobjects.html
and well as the Motion / Simulate / Vectors sections:
Let's start take sine motion as an example.
The sin() function takes an angle (in radians by default) and returns a value between -1.0 and 1.0
Since you're already calculating positions for each house within a 2D grid, you can offset each position using sin() to animate it. The nice thing about it is cyclical: no matter what angle you provide you always get values between -1.0 and 1.0. This would save you the trouble of needing to store the current x, y positions of each house in arrays so you can increment them in a different directions.
Here's a modified version of the above sketch that uses sin() to animate:
// store house bounding box dimensions for mouse hover check
int houseWidth = 30;
// 30 px rect height + 15 px triangle height
int houseHeight = 45;
void setup() {
size(500, 500);
}
void draw(){
background(#74F5E9);
for (int i = 30; i < 500; i = i + 100) {
for (int j = 30; j < 500; j = j + 100) {
// how fast should each module move around a circle (angle increment)
// try changing i with j, adding i + j or trying other mathematical expressions
// also try changing 0.05 to other values
float phase = (i + frameCount) * 0.05;
// try changing amplitude to other values
float amplitude = 30.0;
// map the sin() result from it's range to a pixel range (-30px to 30px for example)
float xOffset = map(sin(phase), -1.0, 1.0, -amplitude, amplitude);
// offset each original grid horizontal position (i) by the mapped sin() result
float x = i + xOffset;
// check if the cursor is (roughly) over a house
// and render with a different color
if(overHouse(i, j)){
house(x, j, color(0, 0, 200));
}else{
house(x, j, color(0, 200, 0));
}
}
}
}
void house(float x, float y, color fillColor) {
pushMatrix();
translate(x, y);
fill(fillColor);
triangle(15, 0, 0, 15, 30, 15);
rect(0, 15, 30, 30);
rect(12, 30, 10, 15);
popMatrix();
}
// from Processing RollOver example
// https://processing.org/examples/rollover.html
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;
}
}
// check if the mouse is within the bounding box of a house
boolean overHouse(int x, int y){
// offset half the house width since the pivot is at the tip of the house
// the horizontal center
return overRect(x - (houseWidth / 2), y, houseWidth, houseHeight);
}
Read through the comments and try to tweak the code to get a better understanding of how it works and have fun coming up with different animations.
The main changes are:
modifying the house() function to use float x,y positions (instead of int): this is to avoid converting float to int when using sin(), map() and get smoother motions (instead of motion that "snaps" to whole pixels)
Mapped sine to positions which can be used to animate
Wrapping the 3 instructions that calculate the x offset into a reusable function would allow you do further experiment. What if you used a similar technique the y position of each house ? What about both x and y ?
Go through the code step by step. Try to understand it, change it, break it, fix it and make new sketches reusing code.
I have a very simple 9x9 grid. I know how to handle the rectangles on this grid. What I want is when I click on one of the grid rectangles, this rectangle should now be marked with a fill or border around it.
I can draw a rectangle, with a blue fill at exact the correct rectangle on the grid.
But with the next click on the grid, the new rectangle is drawn but the old rectangle is still there and will stay there. And so on.
My question is now, how can I paint always exact on rectangle at the click position?
Is maybe a class the right way?
Creating every time a new rectangle and destroy the old one?
var nullx = 140;
var nully = 50;
var breite = 65;
var hoehe = 65;
var pressed = false;
function setup() {
createCanvas(800, 1200);
}
function draw() {
//background(220);
noFill();
//strokeWeight(2);
sudokulines();
numberstorect();
if(pressed == true){
sqMark();
}
if (mousePressed == true){
console.log("click...")
sqMark();
}
}
function mousePressed(){
pressed = true;
}
function sqMark(){
var tempX;
var tempY;
//console.log(tempX,tempY);
tempX = (floor((mouseX - nullx) / breite) * breite) + nullx;
tempY = (floor((mouseY - nully) / hoehe) * hoehe) + nully;
console.log(tempX,tempY);
if (tempX > 139 && tempY > 49 ){
if (tempX < 661 && tempY < 571){
strokeWeight(0.7);
fill(0,0,255);
rect(tempX+2,tempY+2,breite-4,hoehe-4);
pressed = false;
}
}
}
function sudokulines(){
//The vertical lines
for (var i = 1; i <= 8; i++){
if (i == 3 || i == 6){
strokeWeight(3);
}else{
strokeWeight(1);
}
line(nullx + breite * i, nully, nullx + breite * i, nully+ 9*hoehe);
}
//The horizontal lines
for (var i = 1; i <= 8; i++){
if (i == 3 || i == 6){
strokeWeight(3);
}else{
strokeWeight(1);
}
//The big rectangle around
line(nullx , nully + hoehe * i, nullx + 9*breite, nully + hoehe * i);
}
strokeWeight(3);
rect(nullx,nully,9*breite,9*hoehe);
}
function numberstorect(){
textAlign(CENTER,CENTER);
fill(0);
textSize(breite/1.3);
text(2,nullx + breite/2, nully + hoehe/2);
}
It's important to understand that p5.js draws in immediate mode, so each element, once drawn, is not removable unless intentionally drawn over or cleared. This simplest solution to your specific problem is to simply save to location to be highlighted when the user presses the mouse, and then always clear the canvas and redraw everything (including the selected square) in the draw function. Because there's no animation, you can optimize this by disabling looping in your setup function, and then explicitly calling redraw when something happens that effects the display (i.e. the mouse is pressed).
var nullx = 140;
var nully = 50;
var breite = 65;
var hoehe = 65;
let selectedX = -1;
let selectedY = -1;
function setup() {
createCanvas(800, 1200);
// By default don't re draw every frame
noLoop();
}
function draw() {
background(255);
noFill();
//strokeWeight(2);
sudokulines();
numberstorect();
sqMark();
}
function mousePressed() {
// Set the selection
selectedX = (floor((mouseX - nullx) / breite) * breite) + nullx;
selectedY = (floor((mouseY - nully) / hoehe) * hoehe) + nully;
// Only redraw when something changes.
redraw();
}
function sqMark() {
if (selectedX > 139 && selectedY > 49) {
if (selectedX < 661 && selectedY < 571) {
strokeWeight(0.7);
fill(0, 0, 255);
rect(selectedX + 2, selectedY + 2, breite - 4, hoehe - 4);
pressed = false;
}
}
}
function sudokulines() {
//The vertical lines
for (var i = 1; i <= 8; i++) {
if (i == 3 || i == 6) {
strokeWeight(3);
} else {
strokeWeight(1);
}
line(nullx + breite * i, nully, nullx + breite * i, nully + 9 * hoehe);
}
//The horizontal lines
for (var i = 1; i <= 8; i++) {
if (i == 3 || i == 6) {
strokeWeight(3);
} else {
strokeWeight(1);
}
//The big rectangle around
line(nullx, nully + hoehe * i, nullx + 9 * breite, nully + hoehe * i);
}
strokeWeight(3);
rect(nullx, nully, 9 * breite, 9 * hoehe);
}
function numberstorect() {
textAlign(CENTER, CENTER);
fill(0);
textSize(breite / 1.3);
text(2, nullx + breite / 2, nully + hoehe / 2);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
I'm making a zombie game in p5js, does anyone have any recommendations on to make a shape or object move towards the mouse(this will be used to make the gun)? and if anyone knows how to make more enemies spawn more often each round that would be nice to!:)
Sorry if the solution is super simple, I still kinda new!
code:
let dogmode;
let round;
let zombie, player;
let x, y;
let health, speed, damage, playerhealth;
function setup() {
dogmode=false;
createCanvas(400,400);
round = 1;
bullet ={
damage:20
};
//Player and zombie parameters
zombie = {
pos: createVector(500, 200),
//increase by 100 each round until round 9
health: 150,
speed: 1,
};
player = {
pos: createVector(200, 200),
//default
health: 100,
};
fill(0);
}
function draw() {
if( dogmode===true){
player.health=player.health+100;
}
background(220);
stroke(0);
line(player.pos.x,player.pos.y,mouseX,mouseY);
fill('gray')
ellipse(mouseX,mouseY,10,10);
push();
//player
fill("green");
ellipse(player.pos.x, player.pos.y, 20, 20);
//HUD or something
fill("black");
text("" + player.health, 10, 10);
//zombie(s)
fill("gray");
rect(zombie.pos.x, zombie.pos.y, 20, 20);
//Damage system
if (p5.Vector.sub(player.pos, zombie.pos).mag() <= 30) {
player.health = player.health - 1;
}
//Health detection
if (player.health <= 0) {
background(0);
textSize(20);
text("You died \n Round " + round, 165, 200);
}
if (keyIsDown(87)) {
player.pos.y -= 2;
}
if (keyIsDown(83)) {
player.pos.y += 2;
}
if (keyIsDown(65)) {
player.pos.x -= 2;
}
if (keyIsDown(68)) {
player.pos.x += 2;
}
zombie.pos.add(p5.Vector.sub(player.pos, zombie.pos).limit(zombie.speed))
pop();
//Create bullet
if(mouseIsPressed ){
fill('yellow')
ellipse(mouseX,mouseY,5,5);
//Shoots bullet
}
}
In order to fire a bullet you need to:
Determine the direction of motion at the time the bullet is fired.
Save that vector so that the direction remains constant for the life of the bullet.
Update the position of the bullet each frame after it is fired.
Determining the direction of motion is simple vector arithmetic if you have two vectors, A and B, and subtract A - B you will get a vector representing the offset from B to A (i.e. pointing in the direction of A from B):
It is important to save this direction vector, because as the player, mouse, and bullet move the result of this computation will continually change; and bullets don't usually change direction once fired.
const BULLET_SPEED = 5;
let player;
let bullet;
function setup() {
createCanvas(windowWidth, windowHeight);
bullet = {
damage: 20,
};
player = {
pos: createVector(width / 2, height / 2),
//default
health: 100,
};
}
function draw() {
background(220);
stroke(0);
// By taking the difference between the vector pointing to the mouse and the
// vector pointing to the player we get a vector from the player to the mouse.
let mouseDir = createVector(mouseX, mouseY).sub(player.pos);
// Limit the length to display an indicator of the bullet direction
mouseDir.setMag(30);
// Because we want to draw a line to the point mouseDir offset away from
// player, we'll need to add mouseDir and player pos. Do so using the static
// function so that we don't modify either one.
let dirOffset = p5.Vector.add(player.pos, mouseDir);
// direction indicator
line(player.pos.x, player.pos.y, dirOffset.x, dirOffset.y);
fill("gray");
ellipse(dirOffset.x, dirOffset.y, 10, 10);
//player
fill("green");
ellipse(player.pos.x, player.pos.y, 20, 20);
if (keyIsDown(87)) {
player.pos.y -= 2;
}
if (keyIsDown(83)) {
player.pos.y += 2;
}
if (keyIsDown(65)) {
player.pos.x -= 2;
}
if (keyIsDown(68)) {
player.pos.x += 2;
}
//Create bullet
if (mouseIsPressed) {
// Notice there can be only one bullet on the screen at a time, but there's
// no reason you couldn't create multiple bullets and add them to an array.
// However, if you did, you might want to create bullets in a mouseClicked()
// function instead of in draw() lets you create too many bullets at a time.
bullet.firing = true;
// Save the direction of the mouse;
bullet.dir = mouseDir;
// Adjust the bullet speed
bullet.dir.setMag(BULLET_SPEED);
// Position the bullet at/near the player
bullet.initialPos = dirOffset;
// Make a copy so that initialPos stays fixed when pos gets updated
bullet.pos = bullet.initialPos.copy();
//Shoots bullet
}
if (bullet.firing) {
fill('yellow');
ellipse(bullet.pos.x, bullet.pos.y, 5, 5);
// move the bullet
bullet.pos.add(bullet.dir);
if (bullet.pos.dist(bullet.initialPos) > 500) {
bullet.firing = false;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
Everything works perfectly as it should except the fact that even when the person has lost the game, the score keeps counting. The score should freeze when the game is lost so that when the method gameover (); is called the score can be given for that game.
It also does not add a specific amount, the score just raises from 10 to 210 to 430 - it just all over the place.
Can someone find the reason for it?
// variables for the ball
int ball_width = 15,
ball_height = 15;
float ballX,
ballY;
// // variables for the paddles
int paddle_width = 20,
paddle_height = 200;
int paddle1,
paddle2=0;
// // direction variables
float directionX = 12,
directionY = 12;
// // variables for the score
int scorecounter = 0;
// //game states
boolean playing = false,
gameover = false,
finalscore = false,
score = true;
// ----------------------------------------------------
void setup () {
size (1900, 800); // the field game is going to be 1900x800 px big
background (0); // black background
rectMode (CENTER);
paddle1 = 60;
paddle2 = width - 60;
}
void draw () {
background (0); // black background
playing ();
contact ();
gameover ();
}
// ----------------------------------------------------
void playing () {
if (keyPressed) { // starts the game and makes the restart possible
playing = true;
scorecounter = 0 ;
gameover = false;
ballX = width/2;
ballY = height/2;
}
if (!playing) {
// playing = false
fill(255);
textSize(80);
textAlign(CENTER);
text("Press Space to Play", width/2, height/4);
fill (255);
ellipse (width/2, height/2, ball_width, ball_height); // this is the starting point of the ball
fill (255, 10, 20);
rect(paddle1, (height/2), paddle_width, paddle_height); // red pong
fill (60, 255, 0);
rect(paddle2, (height/2), paddle_width, paddle_height); // green pong
}
if (playing) { // playing = true
score(); // does what i wrote down in void score () -- keeps track of the score
ballX = ballX + directionX;
ballY = ballY + directionY; // gives the directions of the ball
fill (255);
ellipse (ballX, ballY, ball_width, ball_height); // ball itself
fill ( 255, 10, 20 );
rect(paddle1, mouseY, paddle_width, paddle_height); // red pong
fill ( 60, 255, 0 );
rect(paddle2, mouseY, paddle_width, paddle_height); // green pong
// top and bottom of screen --------------------
if ( ballY + ball_width/2 > height ) {
directionY = -directionY;
} // if the ball reaches the lower wall it will bounce off
if ( ballY - ball_width/2 < 0 ) {
directionY = -directionY;
} // if the ball reaches the upper wall it will bounce off
if ( ballX > width || ballX < 0 ) {
gameover = true;
} // if the ball reaches one of the bounderies it will be game over
}
}
void contact () {
// right paddle = paddle2
if (ballY - ball_width/2 > mouseY - paddle_height/2 &&
ballY + ball_width/2 < mouseY + paddle_height/2 &&
ballX + ball_width/2 > paddle2-4 ) {
directionX = -abs(directionX);
scorecounter = scorecounter + 10;
}
// left paddle = paddle1
if (ballY - ball_width/2 > mouseY - paddle_height/2 &&
ballY + ball_width/2 < mouseY + paddle_height/2 &&
ballX + ball_width/2 < paddle1+ paddle_width+4 ) {
directionX = abs(directionX);
scorecounter = scorecounter + 10; // if the ball touches the paddles it will bounce off
}
score ();
}
void gameover () {
if (gameover) {
background (0);
finalscore (); // gives me the final score + play again option
score = false;
} // it overrides the scorecounter with a black background
}
void score () {
if (playing) {
fill(255);
textSize(45);
textAlign(CENTER);
text ( scorecounter, width/2, height/4); // keeps the score on the display while playing
}
}
void finalscore () {
if (gameover) {
score = false; // the scorecounter will stop counting
fill(255);
textSize(45);
textAlign(CENTER);
text("Game Over. Press a key to play again.", width/2, height/4); // game over message
fill(255);
textSize(80);
textAlign(CENTER);
text("You scored " + scorecounter+ " points", width/2, (height/4) * 3); // the final score will appear here
}
}
You should have
playing = false;
somewhere in game over method or somewhere else. As I see you haven't such line of code.
I ask a question. Where did you change playing to false so that
You expect to get
If(!playing)
Condition instead of
If(playing)
You press the key. Game begins. Now you reach
If(playing)
Then the ball get to boundaries and the code reach
if ( ballX > width || ballX < 0 ) {
gameover = true; } // if the ball reaches one of the bounderies it will be game over
In this situation. Playing var and gameover var both are true. Right?
And under
If(playing)
You have score() method.so even when gameover is true the score method still is performed.
You can set playing to false under:
if ( ballX > width || ballX < 0 ) { gameover = true;
Playing =false ; }
Or you can modify the score method like this:
void score () { if (playing && !gameover) { fill(255); textSize(45); textAlign(CENTER); text(scorecounter, width/2,height/4);
// keeps the score on the display while playing }
I have a grid of ellipses generated by two for() loops. What I'd like to do is have all of these ellipses ease into mouseX and mouseY when mousePressed == true, otherwise return to their position in the grid. How can I go about this? I've started with this template, which doesn't work as I can't figure out how affect the position of the ellipses, but the easing is set up.
float x;
float y;
float easeIn = 0.01;
float easeOut = 0.08;
float targetX;
float targetY;
void setup() {
size(700, 700);
pixelDensity(2);
background(255);
noStroke();
}
void draw() {
fill(255, 255, 255, 80);
rect(0, 0, width, height);
for (int i = 50; i < width-50; i += 30) {
for (int j = 50; j < height-50; j += 30) {
fill(0, 0, 0);
ellipse(i, j, 5, 5);
if (mousePressed == true) {
// go to mouseX
targetX = mouseX;
// ease in
float dx = targetX - x;
if (abs(dx) > 1) {
x += dx * easeIn;
}
//go to mouseY
targetY = mouseY;
// ease in
float dy = targetY - y;
if (abs(dy) > 1) {
y += dy * easeIn;
}
} else {
// return to grid
targetX = i;
// ease out
float dx = targetX - x;
if (abs(dx) > 1) {
x += dx * easeOut;
}
// return to grid
targetY = j;
// ease out
float dy = targetY - y;
if (abs(dy) > 1) {
y += dy * easeOut;
}
}
}
}
}
Any help would be greatly appreciated. I'm not sure in which order to do things/which elements should be contained in the loop.
Thanks!
You're going to have to keep track of a few things for each dot: its "home" position, its current position,its speed, etc.
The easiest way to do this would be to create a class that encapsulates all of that information for a single dot. Then you'd just need an ArrayList of instances of the class, and iterate over them to update or draw them.
Here's an example:
ArrayList<Dot> dots = new ArrayList<Dot>();
void setup() {
size(700, 700);
background(255);
noStroke();
//create your Dots
for (int i = 50; i < width-50; i += 30) {
for (int j = 50; j < height-50; j += 30) {
dots.add(new Dot(i, j));
}
}
}
void draw() {
background(255);
//iterate over your Dots and move and draw each
for (Dot dot : dots) {
dot.stepAndRender();
}
}
class Dot {
//the point to return to when the mouse is not pressed
float homeX;
float homeY;
//current position
float currentX;
float currentY;
public Dot(float homeX, float homeY) {
this.homeX = homeX;
this.homeY = homeY;
currentX = homeX;
currentY = homeY;
}
void stepAndRender() {
if (mousePressed) {
//use a weighted average to chase the mouse
//you could use whatever logic you want here
currentX = (mouseX+currentX*99)/100;
currentY = (mouseY+currentY*99)/100;
} else {
//use a weighted average to return home
//you could use whatever logic you want here
currentX = (homeX+currentX*99)/100;
currentY = (homeY+currentY*99)/100;
}
//draw the ellipse
fill(0, 0, 0);
ellipse(currentX, currentY, 5, 5);
}
}
Note that I'm just using a weighted average to determine the position of each ellipse, but you could change that to whatever you want. You could give each ellipse a different speed, or use your easing logic, whatever. But the idea is the same: encapsulate everything you need into a class, and then put the logic for one dot into that class.
I'd recommend getting this working for a single dot first, and then moving up to getting it working with multiple dots. Then if you have another question you can post the code for just a single dot instead of a bunch. Good luck.