Minigame: calculate multiple dist(); in loop

ilikepancakes

Hey there,

I'm making this minigame (short desc):

Screen is filled with a grid of circles, the circle's radius gradually grows smaller, goal is to click the circles before they disappear. (this is currently where i'm struggling). In the end there should be multiple colors of circles - colors to click, colors not to click. Spawn speed of circles should increase over time. Score bonus when over 10-correct combo clicks.

My current is: I can't seem to draw a grid of circles and get dist(); values for each individual circle. (to check if cursor is over circle when clicked). I searched all over the interwebs for similar games/code but haven't been able to find.

Would be great if someone could assist me with this.

:) thanks

Chrisir

show your code

for dist : for-loop over all circles in your array and say

if (dist(circlesX[i],circlesY[i],mouseX,mouseY) < circlesRadius[i]) {

this depends from how you store your data, which you didn't tell

but the principle is the same

are you into oop yet?

but dist() should do it - please see reference

;-)

Chrisir

can you draw a grid of circles?

ilikepancakes

To be fair. I'm only into processing since a week or 6. I'm probably going at it all wrong. hehe

var score, fout, level, snelheid;
var radius = 120; 
var teller = 0;

function setup() {
    createCanvas(800,600);
    background(0);
    frameRate(30);

    score = 0;
    fout = 0;
    level = 1;
}

function draw() {
    for(var i = 0; i< 20; i++){
    tekenPil();
    }
}

function tekenPil() {
    var x = (teller % 5) * 120;
    var y = (floor(teller / 5)) * 120;

    teller++;
    stroke(255);
    ellipse(x+160,y+120,radius,radius);
}

ilikepancakes

Can you show me how to create that circle-grid with an array?

Chrisir

what happens when you run your code?

Chrisir

maybe this is a different language than processing / java?

because var and function don't exist here

int score, fout, level, snelheid;
int radius = 120; 
int teller = 0;

void setup() {
  size(800, 1700);
  background(0);
  frameRate(30);

  score = 0;
  fout = 0;
  level = 1;
}

void draw() {
  for (int i = 0; i < 20; i++) {
    tekenPil();
  }
}

void tekenPil() {
  int x = (teller % 5) * 120;
  int y = (floor(teller / 5)) * 120;

  teller++;
  stroke(255);
  ellipse(x+160, y+120, radius, radius);
}

Chrisir

this is a new version that makes it 20 circles and not endless many...

int score, fout, level, snelheid;
int radius = 120; 
int teller = 0;

void setup() {
  size(800, 600);
  background(0);
  frameRate(30);

  score = 0;
  fout = 0;
  level = 1;
}

void draw() {
  teller=0;
  for (int i = 0; i < 20; i++) {
    tekenPil();
  }
}

void tekenPil() {
  int x = (teller % 5) * 120;
  int y = (floor(teller / 5)) * 120;

  teller++;
  stroke(255);
  ellipse(x+160, y+120, radius, radius);
}

Chrisir

when you really try to work in processing (and not another language), please take a look at the first five tutorials and at the examples and in the reference.

processing is very good documented, so it puzzles me that you come up with a code that doesn't run.

in the new version I inserted teller = 0 in draw.

;-)

Chrisir

you wrote:

goal is to click the circles before they disappear.

yes... and when clicked, the cirlce is off, right?

to do so you need a method to store which circle is on and which is off...

have you done arrays or oop?

I recommend to have multiple parallel arrays to store the position of each circle, its color and whether it's still ON.

OK?

Best, Chrisir ;-)

Chrisir

your radius isn't radius, it's diameter by the way

Chrisir

don't accept answers when your question is not solved. btw

to do the dist thing: in function void mousePressed() for-loop over your circles, calculate their positions and then do the dist check (see above) --- but then you need to put the value (on/off) in an array and use it when displaying the circle (using if).

do come back when you need more help...

ilikepancakes

var pint, gameStarted, startScreen, gameOver;
var angle = 0;
var counter = 0;

function setup() {
    createCanvas(800,600);

    // AFBEELDINGEN LADEN
    pint = loadImage("pint.png");

    // SPELMODUSSEN INITIALISEREN BIJ OPSTART
    startScreen = true;
    gameStarted = false;
    gameOver = false;

}

function draw() {

    // CHECK STARTSCHERM

    if (gameStarted == false && startScreen == true && gameOver == false){

    // STARTSCHERM
    background(237,222,91);
    noStroke();
    fill(67,123,190,50);

        for (var i = 0; i < 800; i+=15){
            for (var j = 0; j < 600; j+=15){
            ellipse(i+2,j+8,10,10);
            }
        }

    var x = mouseX;
    var y = mouseY;
    angle += 0.05;
    var dy = sin(angle)*20;

    fill(247,70,70);
    ellipse(400+(0.01 * -x),300+(0.01 * -y),500,500);
    fill(67,123,190);
    ellipse(400+(0.02 * -x),300+(0.02 * -y),350,350);
    imageMode(CENTER);
    image(pint,400+(0.03 * -x),300+(0.03 * -y),286,267);

    fill(229);
    rect(100,370+dy,70,70);
    rect(630,370+dy,70,70);
    fill(194);
    triangle(630,420+dy,650,420+dy,630,440+dy);
    triangle(150,420+dy,170,420+dy,170,440+dy);
    fill(255);
    rect(150,350+dy,500,70);
    fill(247,70,70);
    textSize(45);
    textFont("Helvetica Neue");
    textAlign(CENTER);
    textStyle(BOLD);
    text("RED-JE-KATER-SPEL", 400, 400+dy);

        // STARTKNOP

        if (mouseX < 500 && mouseX > 300 && mouseY > 500 && mouseY < 550){
            fill(255,80);
            cursor(HAND);

            if (mouseIsPressed == true){
            startScreen = false;
            gameStarted = true;
            gameOver = false;
            }

        } else {
            fill(255);
            cursor(ARROW);
        }


    stroke(67,123,190);
    strokeWeight(5);
    strokeJoin(ROUND);
    rect(300,500,200,50);
    noStroke();
    fill(67,123,190);
    textFont("Helvetica Neue");
    textStyle(ITALIC);
    textSize(40);
    text("START", 400, 540);

    // EIND STARTSCHERM

    }

    // CHECK OF SPEL GESTART IS
    if (gameStarted == true && startScreen == false && gameOver == false) {

    // START SPEL
    cursor(ARROW);
    background(237,222,91);
    noStroke();
    fill(67,123,190,50);

        for (var i = 0; i < 800; i+=15){
            for (var j = 0; j < 600; j+=15){
            ellipse(i+2,j+8,10,10);
            }
        }

        for(var i = 0; i < 30; i++){
            showCircle();
        }


    }
}

function showCircle(){
    ellipse(counter%5*100,floor(counter/5)*50,100,100);
    counter++;
}

ilikepancakes

could you give an example how to create an array like you described above?

GoToLoop

@ilikepancakes, you're better off going w/ OOP way rather than lotsa messy arrays! :P
Class syntax is much easier in Java. But JS' prototypical "classes" aren't that diff. either! 8-X

Take a look at "Anthills" sketch @ this forum thread below:
http://forum.processing.org/two/discussion/8380/issues-with-my-anthill-program#Item_11

You can also watch it running online via PJS framework (JS Mode) below:
http://studio.processingtogether.com/sp/pad/export/ro.91A3Jfnrsldhp/latest

Chrisir

I am sorry, I didn't realize it's js - my bad....

I suggested messy arrays assuming you were not into oop yet....

GoToLoop

@Chrisir, I dunno whether he knows OOP or not. I've just suggested him so!
And as a side note, keyword var is more than a proper hint it's much probably JS! In this case P5.JS! ;)

Chrisir

thanks.... @-)

Chrisir

I don't know the syntax in JS but normally it's

boolean[] circleIsOff = new boolean [21];

then when a circle is clicked say circleIsOff[i] = true;

when displaying the cirlces say

if (!circleIsOff[i]) {

.....

so only the non-clicked circles are showing

;-)

GoToLoop

Java to JS "automatic" human translation: :D
boolean[] circleIsOff = new boolean [21]; ---> const circleIsOff = Array(21);