Máquina de estados finitos que diferencia entre login e senha válido, login inválido ou senha inválida

import controlP5.*;
ControlP5 gui;
void setup() {
  size(200, 200);
  gui = new ControlP5(this);
  gui.addTextfield("Login")
    .setPosition(20, 80)
    .setSize(120, 20);
  gui.addTextfield("Senha")
    .setPosition(20, 130)
    .setSize(120, 20);
  gui.addBang("ok")
    .setPosition(150, 130)
    .setSize(30, 20)
    .getCaptionLabel()
    .align(ControlP5.CENTER, ControlP5.CENTER);
}

void draw() {
}
public void ok() {
  String x = gui.get(Textfield.class, "Login").getText();
  String y = gui.get(Textfield.class, "Senha").getText();
  println(x, y);
  ValidarLogin(x, y);
}

void ValidarLogin(String login, String senha) {
  if (login.equals("s")==true) {
    if (senha.equals("s")==true) {
      println("sim");
    } else {
      println("não1");
    }
  } else {
    println("não2");
  }
}

Bounding Box se refere ao menor retângulo possível para conter todos os elementos possíveis de um conjunto. Nesse caso, cada conjunto vai ser apenas um elemento. O código resultante será:

int bastaoX=250;
int bolaX=10;
int dx=5;
int bolaY=10;
int dy=5;
int bx=150, by=300, tx=100, ty=10;
int fx=250, zy=500;


void setup() {
  size(600, 800);
}

void draw() {
  background(0);
  rect(bastaoX, 580, 100, 10);
  rect(bx, by, tx, ty);
  rect(fx, zy, tx, ty);
  if (keyPressed ==true && keyCode == RIGHT && bastaoX+100<width) {
    bastaoX=bastaoX+5;
  }
  if (keyPressed ==true && keyCode == LEFT && bastaoX>=0) {
    bastaoX=bastaoX-5;
  }

  ellipse(bolaX, bolaY, 20, 20);
  bolaX+=dx;
  bolaY+=dy;

  if (bolaX+10>=590 || bolaX-10<=10) {
    dx=-dx;
  }

  if (bolaY-10<=0) {
    dy=-dy;
  }

  if (bolaY+10>=height) {// || bolaY<=10){
    dy=-0;
    dx=0;
    text("Você perdeu", 300, 400);
  }

  if ((bolaX+10>=bx && bolaX-10<=bx+tx)) {
    if ((bolaY+10>=by && bolaY-10<=by+ty)) {
      text("Você venceu", 300, 400);
      dx=0;
      dy=0;
    }
  }

  if ((bolaX+10>=fx && bolaX-10<=fx+tx)) {
    if ((bolaY+10>=zy && bolaY-10<=zy+ty)) {
      text("Você venceu", 300, 400);
      dx=0;
      dy=0;
    }
  }

  if (bolaX-10>=bastaoX && bolaX+10<= bastaoX+100) {
    if (bolaY+10>=580 && bolaY-2100<=600) {
      dy=-dy;
    }
  }
}

Primeiro, cria-se um retângulo. Depois, fazendo os cálculos que o losango precisa ter para ficar dentro do retângulo, 53/200 do módulo para a dimensão vertical e 83/200 do módulo para a horizontal. O círculo no final é simples. Acrescentando as cores, o resultado final é, utilizando:

void setup(){
  size(800,600);
}

void draw(){
  background(255);
  BandeiraBrasil(X, Y, M);
}

void BandeiraBrasil(float x, float y, float l){
  noStroke();
  fill(0,220,0);
  rectMode(CENTER);
  rect(x,y,l,(l*7/10));

  fill(255,255,0);
  quad(x, y+(l*53/200), x+(l*83/200), y, x, y-(l*53/200), x-(l*83/200), y);

  fill(0,0,255);
  ellipse(x,y,(l*7/20), (l*7/20));
}

O rectMode nesse código permite facilitar reduzir o número de cálculos no código, transformando o x e y no centro não apenas do losango e círculo, como também do retângulo.

O método mais simples de simular o quicar de uma bola é resetar o tempo que controla as funções MUV da bola. Caso deseja-se reduzir a velocidade, reduza-se quanto desejar a velocidade e aceleração. O resultado final deve ficar similar a esse:

Com o código apresentado anteriormente, precisa-se acrescentar outras duas caixas de entrada de dados adicionais para executar a função flor4(). O resultado final deve parecer algo como isso:

import controlP5.*;

ControlP5 gui;

int x,r,y;

void setup() {
  size(600, 600);
  gui= new ControlP5(this);
  gui.addTextfield("PosiçãoX").setPosition(20, 80).setSize(120, 20);
  gui.addTextfield("PosiçãoY").setPosition(20, 120).setSize(120, 20);
  gui.addTextfield("Raio").setPosition(20, 160).setSize(120, 20);

  gui.addBang("ok")
    .setPosition(150, 80).setSize(30, 20)
    .getCaptionLabel()
    .align(ControlP5.CENTER, ControlP5.CENTER);
}



void valor(int x) {
  println(x);
}

public void ok() {
  x=int(gui.get(Textfield.class, "PosiçãoX").getText());
  y=int(gui.get(Textfield.class, "PosiçãoY").getText());
  r=int(gui.get(Textfield.class, "Raio").getText());
  println(x);
}

void draw() {
  flor4(x,y,r);
}

void flor4(int x, int y, int r){
  ellipse(x,y,r,r);
  ellipse(x,y+r,r,r);
  ellipse(x,y-r,r,r);
  ellipse(x+r,y,r,r);
  ellipse(x-r,y,r,r);
}

O uso da ferramenta debug permite parar o código de executar e verificar se as operações matemáticas estão sendo executando de maneira correta para que os retângulos sejam mostrados de maneira correta.

O código usado como base para o estudo cria gradientes radiais, isso é, circulos com cores que mudam quanto mais se aproximam ou afastam do centro de maneira uniforme.

int dim;

void setup() {
  size(640, 360);
  dim = width/2;
  background(0);
  colorMode(HSB, 360, 100, 100);
  noStroke();
  ellipseMode(RADIUS);
  frameRate(1);
}

void draw() {
  background(0);
  for (int x = 0; x <= width; x+=dim) {
    drawGradient(x, height/2);
  } 
}

void drawGradient(float x, float y) {
  int radius = dim/2;
  float h = random(0, 360);
  for (int r = radius; r > 0; --r) {
    fill(h, 90, 90);
    ellipse(x, y, r, r);
    h = (h + 1) % 360;
  }
}

Esse código cria um circulo e dois semi-círculos na tela, com as cores mudando completamente de maneira randomizada. Mudando o código para:

int dim;

float h;

void setup() {

  size(640, 360);

  dim = width/4;

  background(0);

  colorMode(HSB, 360, 100, 100);

  noStroke();

  ellipseMode(RADIUS);

  frameRate(60);

}

void draw() {

  background(0);

  for (int x = 0; x <= width; x+=dim) {

    drawGradient(x, height/4,h);

    drawGradient(x, 3*height/4,h);

  } 

  h++;

  if(h>360)

  h=0;

}

void drawGradient(float x, float y, float h) {

  int radius = dim/2;

  

  for (int r = radius; r > 0; --r) {

    fill(h, 90, 90);

    ellipse(x, y, r, r);

    h = (h + 1) % 360;

  }

}

Cria-se 4 semi-circulos e 6 seis circulos que mudam a cor gradativamente, com todos os circulos possuindo o mesmo gradiente.