Why can't redraw SecondApplet with processing? - processing

I am working with processing 3 and I am actually trying to work with 2 windows.
I would like redraw the second window but redraw do nothing (In final project data incoming from serial port will make the redraw). I don't know why.
Here is my code :
/*
* 17.09.16 : Logan Gallois
* future imporvement :
* Windows print graph of PWMs values from RGB LED
* Add autoDetect position to move windows at the good location
*/
import processing.serial.*;
Serial myPort;
SecondApplet sa;
int[] numbers = new int[600];
boolean flag = false;
float var1;
float var2;
float var3;
float var4;
void setup() {
size(1024, 576); //Affiche en plein écran
surface.setResizable(false);
noStroke();
println(Serial.list()); /* Verifier dans la liste ou se trouve l'arduino */
/* Puis changer en dessous la valeur en fonction */
/* En general 0 pour windows et 1 pour un mac */
String os=System.getProperty("os.name"); /* Detection automatique de l'OS */
if(os != "Mac OS X") {
if(Serial.list().length > 0) {
myPort = new Serial(this, Serial.list()[0], 115200);
}
} else {
if(Serial.list().length > 1) { /* Module BLE en position 0 */
myPort = new Serial(this, Serial.list()[1], 115200);
}
}
//Important : se câler sur la valeur en baud du prog Arduino
myPort.bufferUntil('\n');
String[] args = {"TwoFrameTest"};
sa = new SecondApplet();
PApplet.runSketch(args, sa);
delay(100);
}
void draw() {
if(!flag) {
surface.setLocation(displayWidth/2-width/2-400,displayHeight/2-height/2);
sa.frame.setTitle("Monitoring RGB Values");
flag = true;
}
background(color(int(var1), int(var2), int(var3)));
//sa.background(0, 255, 0);
/*for(int i = 0 ;i<=width/10;i++){
sa.stroke(200);
sa.line((-frameCount%10)+i*10,0,(-frameCount%10)+i*10,height);
sa.line(0,i*10,width,i*10);
}
sa.noFill();
sa.stroke(0);
sa.beginShape();
for(int i = 0; i<numbers.length;i++){
sa.vertex(i,350-numbers[i]);
}
sa.endShape();
for(int i = 1; i<numbers.length;i++){
numbers[i-1] = numbers[i];
}
numbers[numbers.length-1]=mouseY;*/
}
void mouseClicked() {
print("clicked");
sa.background(0, 0, 255);
sa.fill(100);
sa.redraw(); //This line do not redraw my 'sa' window
background(0, 0, 255);
redraw();
}
void serialEvent (Serial myPort) {
String inString = myPort.readStringUntil('\n');
//println(inString);
if (inString != null) {
inString = trim(inString);
int inputs[] = int(split(inString,',')); // on élude les virgules
// on affecte nos 4 valeurs
if(inputs.length == 4) {
var1 = inputs[0];
var2 = inputs[1];
var3 = inputs[2];
var4 = inputs[3];
// On ré-échelonne la valeur analogique en valeur RGB
var1 = map(var1, 0, 1023, 0, 255);
var2 = map(var2, 0, 1023, 0, 255);
var3 = map(var3, 0, 1023, 0, 255);
var4 = map(var3, 0, 1023, 0, 255);
print(int(var1));
print(" ,");
print(int(var2));
print(" ,");
print(int(var3));
print(" ,");
println(var4);
}
}
}
public class SecondApplet extends PApplet {
public void settings() {
size(600, 600);
noLoop(); //I tried with and without that
}
public void draw() {
}
public void mouseClicked() {
print("clicked2");
background(0, 255, 0);
redraw(); //This line works great
}
}
Any Ideas ?

When posting, please try to narrow your problem down to an MCVE. That means taking out all the Serial stuff and just using basic mouse events.
Your second sketch's draw() function is empty. What do you expect calling redraw() to actually do?
Here's an example MCVE:
SecondApplet sa;
void setup() {
size(500, 500); //Affiche en plein écran
String[] args = {"TwoFrameTest"};
sa = new SecondApplet();
PApplet.runSketch(args, sa);
delay(100);
}
void draw() {
background(255, 0, 0);
}
void mouseClicked() {
sa.redraw();
}
public class SecondApplet extends PApplet {
public void settings() {
size(100, 100);
noLoop();
}
public void draw() {
background(0);
ellipse(random(width), random(height), 25, 25);
}
public void mouseClicked() {
redraw();
}
}
This MCVE works perfectly, and correctly triggers the second sketch's draw() function from both the first and second sketch windows.
I'd recommend working from this MCVE. If you still can't get it working, feel free to post a follow-up question, preferably without the serial stuff (which makes your sketch impossible to run since we don't have access to your hardware). Good luck.

Related

Processing Fix & Optimization of https://github.com/jonlit/spacestarprocessing3d

I previously had an issue with a model not loading correctly (see Processing - loading obj File)
https://stackoverflow.com/users/89766/george-profenza helped me solve the problem in chat, and he wanted to post his optimizations to my code publically.
This also solved the original problem described in the question mentioned above.
You can check out the game at https://github.com/jonlit/spacestarprocessing3d
As mentioned in chat there were a few things slightly off with the existing approach and for visiblity, this are the steps taken to address the issues.
Hope this helps other to debug Processing P3D / OBJ issues:
The first step was to identify the slowest pieces of code. This was done using VisualVM.
This highlighted shape() calls were slow (not not why):
Step 2 was to isolate the problem. Why is loading/displaying a couple of obj files slow.
For reference these are the assets:
rock.obj using rockTexture.png (but currently missing .mtl)
cirno_low.obj using cirno_low_u1_v1.jpeg
This is a test sketch loading/display the .obj files as they are:
PShape rock;
PShape cirno;
void setup(){
size(900, 900, P3D);
cirno = loadShape("cirno_low.obj");
rock = loadShape("rock.obj");
int faces = 0;
int vertices = 0;
for(int i = 0 ; i < rock.getChildCount(); i++){
PShape c = rock.getChild(i);
vertices += c.getVertexCount();
faces++;
}
println("rock faces", faces, "vertices", vertices);
}
void draw(){
background(0);
lights();
translate(width * 0.5, height * 0.5, 0);
rotateY(map(mouseX, 0, width, -PI, PI));
rotateX(map(mouseY, 0, height, PI, -PI));
for(int i = 0 ; i < 81; i++){
pushMatrix();
translate(i % 9 * 100 - width * 0.5,
i / 9 * 100 - height * 0.5, -100);
rotate(map(i, 0, 80, -PI, PI), 0.5, 0.5, 0);
scale(0.5);
shape(rock);
popMatrix();
}
pushMatrix();
scale(10);
shape(cirno);
popMatrix();
surface.setTitle((int)frameRate + "fps");
}
It renders pretty fast, without textures though:
The game uses setTexture() and interestingly enough this drops the frame rate:
PShape rock;
PShape cirno;
void setup(){
size(900, 900, P3D);
cirno = loadShape("cirno_low.obj");
cirno.setTexture(loadImage("cirno_low_u1_v1.jpeg"));
rock = loadShape("rock.obj");
rock.setTexture(loadImage("rockTexture.png"));
int faces = 0;
int vertices = 0;
for(int i = 0 ; i < rock.getChildCount(); i++){
PShape c = rock.getChild(i);
vertices += c.getVertexCount();
faces++;
}
println("rock faces", faces, "vertices", vertices);
}
void draw(){
background(0);
lights();
translate(width * 0.5, height * 0.5, 0);
rotateY(map(mouseX, 0, width, -PI, PI));
rotateX(map(mouseY, 0, height, PI, -PI));
for(int i = 0 ; i < 81; i++){
pushMatrix();
translate(i % 9 * 100 - width * 0.5,
i / 9 * 100 - height * 0.5, -100);
rotate(map(i, 0, 80, -PI, PI), 0.5, 0.5, 0);
scale(0.5);
shape(rock);
popMatrix();
}
pushMatrix();
scale(10);
shape(cirno);
popMatrix();
surface.setTitle((int)frameRate + "fps");
}
Without checking the PShape source code, the assumption is behind the scenes the PShape has to do more work behind the scenes, because loading an .obj file with an .mtl (which helps load the texture as well) render just fine.
Here's the Processing > Examples > Basics > Shape > LoadDisplayOBJ example tweaked: it renders 1250 instances at 60fps:
/**
* Load and Display an OBJ Shape.
*
* The loadShape() command is used to read simple SVG (Scalable Vector Graphics)
* files and OBJ (Object) files into a Processing sketch. This example loads an
* OBJ file of a rocket and displays it to the screen.
*/
PShape rocket;
float ry;
public void setup() {
size(900, 900, P3D);
rocket = loadShape("rocket.obj");
}
public void draw() {
background(0);
lights();
translate(width/2, height/2 + 100, -200);
rotateY(map(mouseX, 0, width, -PI, PI));
rotateX(map(mouseY, 0, height, PI, -PI));
int nc = 1250;
float nr = sqrt(nc);
float sp = 150;
for(int i = 0 ; i < nc; i++){
pushMatrix();
translate(i % nr * sp - width * 0.5,
i / nr * sp - height * 0.5, -sp);
//rotate(map(i, 0, 80, -PI, PI), 0.5, 0.5, 0);
rotateZ(PI + radians(i));
rotateY(ry);
scale(0.5);
shape(rocket);
popMatrix();
}
//rotateZ(PI);
//rotateY(ry);
//shape(rocket);
ry += 0.02;
surface.setTitle((int)frameRate + "fps");
}
This pointed out another issue with how the obj files were used in the game:
each new Star() for example would load the .obj again.
public class Star extends UFO {
public Star (int x, int y, int spd) {
posX = x;
posY = y;
rot = int(random(0, 360));
speed = spd;
symbol = loadShape("rock.obj");
symbol.setTexture(rockTexture); //<>//
...
Ideally these meshes would be loaded once in setup(), with .mtl files and references passed to each instance needing to render them via shape().
This would allow instancing to work as it's the same geometry rendered multiple times. Reloading the same obj file into new memory addresses for each instance would result in many duplicated resources.
One quick fix for the .mtl issue is to simply import the obj in Blender, select it, apply the texture and export it:
(This would also be a good opportunity to rotate/scale models so when they're loaded in Processing, no additional transforms are required and they all can live an in easy to understand coordinate system)
The contents of the exported files I've used are:
cirno_lowWithMTL.mtl
cirno_lowWithMTL.obj
cirno_lowWithMTLDecimated.mtl
cirno_lowWithMTLDecimated.obj
They load/display (with textures) at 60fps (due to the .mtl files)
The recommended optimisation steps (other than using .obj with .mtl files and loading once and re-using mulitple times) are:
avoid extending fixed length arrays (e.g. kryptonit = (Kryptonit[]) append(kryptonit, new Kryptonit(int(random(50, width-150)), int(random(-300, 0))));). ArrayLists are better suited for resizing. In this case in particular a fixed length array is great, as long as it's objects are pre-allocated once, then the positions / states of the objects are updated (e.g. outside of screen objects are marked for re-use and hidden and instead of new objects, existing objects have positions visiblity/reset): in other words Object Pooling)
if meshes are displayed from a single point of view with only rotation on Z axis and position affecting them, they could be images (sprites) instead. (e.g. exporting a static image with alpha channel from Blender at the right scale (or using PGraphics to do this at runtime))
once meshes are loaded, instead of using transformations on them in draw() (e.g. symbol.rotateX(value), which will affect every single vertex in the PShape, use pushMatrix()/popMatrix() call with shape() so simply render the same geometry with different tranformations.
For reference this is the full program with minimal tweaks around loading/using .obj files efficiently (with the old approach commented out and few notes around those regions):
import com.dhchoi.CountdownTimer;
import com.dhchoi.CountdownTimerService;
import controlP5.*;
int zeit;
int punkte;
int leben;
int schwierigkeit = 20;
int zustand = 1;
int boost = 0;
int highscore = 0;
int minuten = 0;
int changeLevel = 0;
boolean paused = true;
boolean gameOver;
JSONArray saves = new JSONArray();
PFont gameOverFont;
PFont gameOverFontSmall;
CountdownTimer timer1 = CountdownTimerService.getNewCountdownTimer(this).configure(1000, 60000);
CountdownTimer kryptonitAnimationTimer1 = CountdownTimerService.getNewCountdownTimer(this).configure(10, 250);
boolean[] keysPressed = new boolean[65536];
ControlP5 cp5;
Star[] stars;
Kryptonit[] kryptonit;
Raumschiff raumschiff;
Player[] players;
String textValue = "";
PImage cirnoTexture;
PImage rockTexture;
PShape cirno;
PShape rock;
void loadMeshes(){
rock = loadShape("rockWithMTL.obj");
rock.scale(0.2);
cirno = loadShape("cirno_lowWithMTL.obj");
cirno.rotateY(HALF_PI);
cirno.rotateZ(HALF_PI * -1);
cirno.scale(5);
}
void settings()
{
//size(800, 400, P3D);
fullScreen(P3D);
smooth(8);
System.setProperty("jogl.disable.openglcore", "true");
}
void setup() {
surface.setResizable(true);
//println("loading textures");
//cirnoTexture = loadImage("cirno_low_u1_v1.jpeg");
//rockTexture = loadImage("rockTexture.png");
//println("finished loading textures: " + cirnoTexture);
loadMeshes();
stars = new Star[0];
kryptonit = new Kryptonit[0];
raumschiff = new Raumschiff(width/2, height/4*3, cirno);
leben = 5;
gameOverFont = createFont("Arial", 36, true);
gameOverFontSmall = createFont("Arial", 16, true);
for (int i = 0; i < schwierigkeit; i++) {
stars = (Star[]) append(stars, new Star(int(random(50, width-150)), int(random(50, height-100)), int(random(5, 15)), rock));
}
players = new Player[0];
cp5 = new ControlP5(this);
cp5.addTextfield("Name")
.setPosition(width/2-100, height/3*2-20)
.setSize(200, 40)
.setFont(gameOverFontSmall)
.setFocus(false)
.setColor(color(255))
.setAutoClear(false)
.setText("Name")
.setLabel("")
.hide()
.lock()
;
}
void draw() {
background(0);
lights();
switch (zustand) {
case 0:
break;
case 1:
fill(255);
text("Zeit:\t" + minuten + ":" + zeit, width-100, 50);
text("Punkte:\t" + punkte, width-100 , 100);
text("Leben:\t" + leben, width-100, 150);
text("Highscore:\t" + highscore, width-100, 200);
text("schwierigkeit:\t" + schwierigkeit, width-100, 250);
try {
for (int i = 0; i < players.length; i++) {
text(players[i].getName() + " " + players[i].getScore(), width-100, 300+15*i);
}
for (int i = 0; i < stars.length; i++) {
stars[i].zeichnen();
stars[i].drehen(random(0, 0.05), random(0, 0.05), random(0, 0.05));
}
for (int i = 0; i < kryptonit.length; i++) {
kryptonit[i].zeichnen();
}
if (kryptonitAnimationTimer1.getTimeLeftUntilFinish() != .0f) {
raumschiff.zeichnen(color(350-kryptonitAnimationTimer1.getTimeLeftUntilFinish(), 100, 100));
} else {
raumschiff.zeichnen(color(100, 100, 100));
}
} catch (Exception e) { e.printStackTrace(); }
noFill();
stroke(100);
rect(50, 50, width-200, height-150);
fill(0);
noStroke();
rect(0, 0, width-150, 48);
if (gameOver) {
pushMatrix();
fill(255);
textAlign(CENTER, CENTER);
textFont(gameOverFont, 36);
textSize(34);
text("GAME OVER!", width/2, height/2);
textFont(gameOverFontSmall, 16);
textSize(16);
text("Press ENTER to resume", width/2, height/2+30);
cp5.get(Textfield.class, "Name").unlock();
cp5.get(Textfield.class, "Name").show();
popMatrix();
}
else if (paused) {
pushMatrix();
fill(255);
textAlign(CENTER, CENTER);
textFont(gameOverFont, 36);
textSize(34);
text("PAUSED!", width/2, height/2);
textFont(gameOverFontSmall, 16);
textSize(16);
text("PRESS ANY KEY TO RESUME", width/2, height/2+30);
popMatrix();
}
break;
default :
background(0);
break;
}
for (int i = 0; i < stars.length; i++) {
if (stars[i].isVisible && sqrt((stars[i].posX - raumschiff.posX) * (stars[i].posX - raumschiff.posX) + (stars[i].posY - raumschiff.posY) * (stars[i].posY - raumschiff.posY) ) < 25){
stars[i].isVisible = false;
punkte+=stars[i].speed;
if (changeLevel > 0) {
changeLevel--;
}
}
}
if (punkte > highscore) {
highscore = punkte;
}
if (kryptonit.length < schwierigkeit / 5) {
//kryptonit = (Kryptonit[]) append(kryptonit, new Kryptonit(int(random(50, width-150)), int(random(-300, 0))));
}
if (stars.length < schwierigkeit) {
stars = (Star[]) append(stars, new Star(int(random(50, width-150)), int(random(-300, 0)), int(random(5, 15)), rock));
}
for (int i = 0; i < kryptonit.length; i++) {
if (kryptonit[i].isVisible && sqrt((kryptonit[i].posX - raumschiff.posX) * (kryptonit[i].posX - raumschiff.posX) + (kryptonit[i].posY - raumschiff.posY) * (kryptonit[i].posY - raumschiff.posY) ) < 25){
kryptonit[i].isVisible = false;
leben-=1;
kryptonitAnimationTimer1.start();
}
}
if (leben < 1){
gameOver = true;
}
if (punkte % 500 <= 20 && punkte % 500 >= 0 && changeLevel == 0 && zustand == 1) {
schwierigkeit+=5;
changeLevel = 5;
}
if (punkte % 500 > 20) {
changeLevel = 0;
}
if (!paused) {
try {
if (!gameOver) {
for (int i = 0; i < stars.length; i++) {
stars[i].bewegen(schwierigkeit/stars[i].speed+boost);
if (stars[i].posY > height-100){
stars[i] = null;
stars[i] = new Star(int(random(58, width-202)), int(random(-300, 0)), int(random(5, 15)), rock);
}
}
for (int i = 0; i < kryptonit.length; i++){
kryptonit[i].bewegen(schwierigkeit/10+boost);
if (kryptonit[i].posY > height-100){
kryptonit[i] = null;
kryptonit[i] = new Kryptonit(int(random(58, width-202)), int(random(-300, 0)));
}
}
}
} catch (Exception e) { e.printStackTrace(); }
}
if (keysPressed[56]){
boost = 5;
}
else {
boost = 0;
}
if (keysPressed[52] && !gameOver && !paused){
try {
raumschiff.bewegen(-7);
if (keysPressed[32]) {
raumschiff.bewegen(-10);
}
} catch (Exception e) { e.printStackTrace(); }
}
if (keysPressed[54] && !gameOver && !paused){
try {
raumschiff.bewegen(7);
if (keysPressed[32]) {
raumschiff.bewegen(10);
}
} catch (Exception e) { e.printStackTrace(); }
}
surface.setTitle((int)frameRate+"fps");
}
void keyPressed() {
if (gameOver && key == ENTER) {
players = (Player[]) append(players, new Player(cp5.get(Textfield.class, "Name").getText(), punkte));
cp5.get(Textfield.class, "Name").lock();
cp5.get(Textfield.class, "Name").hide();
for (int i = 0; i < saves.size(); i++) {
JSONObject playerJSONObject = new JSONObject();
playerJSONObject.setInt("id", i);
playerJSONObject.setString(cp5.get("Name", cp5.get(Textfield.class, "Name").getText()).toString(), "");
playerJSONObject.setInt("score", punkte);
}
saveJSONArray(saves, "data/highscores.json");
schwierigkeit = 20;
paused = true;
gameOver = false;
leben = 5;
punkte = 0;
timer1.reset(CountdownTimer.StopBehavior.STOP_IMMEDIATELY);
timer1.start();
zeit = 0;
stars = null;
stars = new Star[0];
for (int i = 0; i < schwierigkeit; i++) {
stars = (Star[]) append(stars, new Star(int(random(50, width-150)), int(random(50, height-100)), int(random(5, 15)), rock));
}
kryptonit = null;
kryptonit = new Kryptonit[0];
}
keysPressed[key] = true;
}
void keyReleased() {
keysPressed[key] = false;
}
void keyTyped() {
if (key == 'p' || key == 'P') {
if (!gameOver) {
paused = !paused;
if (paused) {
timer1.stop(CountdownTimer.StopBehavior.STOP_IMMEDIATELY);
}
else {
timer1.start();
}
}
}
if (paused && !gameOver && key != 'p' && key != 'P') {
paused = false;
timer1.start();
}
}
void onTickEvent(CountdownTimer t, long timeLeftUntilFinish) {
if (t == timer1) {
zeit++;
}
}
void onFinishEvent(CountdownTimer t) {
if (t == timer1) {
timer1.reset(CountdownTimer.StopBehavior.STOP_AFTER_INTERVAL);
timer1.start();
zeit = 0;
minuten++;
}
}
abstract class Flugobjekt {
public int posX;
public int posY;
public int rot;
public int speed;
boolean isVisible = true;
PShape symbol;
abstract void bewegen (int amount);
}
abstract class UFO extends Flugobjekt {
}
public class Star extends UFO {
float rotationX, rotationY, rotationZ;
public Star (int x, int y, int spd, PShape symbol) {
posX = x;
posY = y;
rot = int(random(0, 360));
speed = spd;
// use a reference to the preloaded PShape (instead of loading a the .obj again for each instance)
this.symbol = symbol;
//symbol = loadShape("rockWithMTL.obj");
//symbol.setTexture(rockTexture);
//symbol.scale(0.2);
/*
fill(255);
stroke(255);
strokeWeight(2);
symbol = createShape();
symbol.beginShape();
symbol.vertex(0, -5);
symbol.vertex(1.4, -2);
symbol.vertex(4.7, -1.5);
symbol.vertex(2.3, 0.7);
symbol.vertex(2.9, 4.0);
symbol.vertex(0, 2.5);
symbol.vertex(-2.9, 4);
symbol.vertex(-2.3, 0.7);
symbol.vertex(-4.7, -1.5);
symbol.vertex(-1.4, -2);
symbol.endShape(CLOSE);
/*/
}
public void zeichnen (){
// skip if PShape (or it's texture) isn't loaded yet)
if(symbol == null){
return;
}
if (isVisible) {
pushMatrix();
translate(posX, posY);
//rotate(rot);
rotateX(rotationX);
rotateY(rotationY);
rotateZ(rotationZ);
//scale(0.2);
shape(symbol);
popMatrix();
}
}
public void bewegen (int amount) {
posY = posY + amount;
}
public void drehen (float xAmount, float yAmount, float zAmount) {
rotationX += xAmount;
rotationY += yAmount;
rotationZ += zAmount;
// symbol.rotateX means all vertices inside the shape will be updated
// use rotateX() then shape() to simply render the same underlying PShape vertex data without updating it all the time
//symbol.rotateX(xAmount);
//symbol.rotateY(yAmount);
//symbol.rotateZ(zAmount);
}
}
public class Kryptonit extends UFO {
public Kryptonit (int x, int y) {
posX = x;
posY = y;
rot = int(random(0, 360));
fill(0);
stroke(255, 0, 0);
strokeWeight(2);
symbol = createShape();
symbol.beginShape();
symbol.vertex(0, -5);
symbol.vertex(1.4, -2);
symbol.vertex(4.7, -1.5);
symbol.vertex(2.3, 0.7);
symbol.vertex(2.9, 4.0);
symbol.vertex(0, 2.5);
symbol.vertex(-2.9, 4);
symbol.vertex(-2.3, 0.7);
symbol.vertex(-4.7, -1.5);
symbol.vertex(-1.4, -2);
symbol.endShape(CLOSE);
}
public void zeichnen (){
if (isVisible) {
pushMatrix();
translate(posX, posY);
rotate(rot);
shape(symbol);
popMatrix();
}
}
public void bewegen (int amount) {
posY = posY + amount;
}
}
public class Raumschiff extends Flugobjekt {
public Raumschiff (int x, int y, PShape symbol) {
posX = x;
posY = y;
fill(100);
noStroke();
this.symbol = symbol;
//symbol = loadShape("cirno_lowWithMTL.obj");//createShape(ELLIPSE, 0, 0, 50, 50);
//symbol.setTexture(cirnoTexture);
//symbol.rotateY(HALF_PI);
//symbol.rotateZ(HALF_PI * -1);
////symbol.rotateX(0.5);
//symbol.scale(5);
/* (Raumschiff)
symbol = createShape();
symbol.beginShape();
symbol.vertex(25, 0);
symbol.vertex(30, 5);
symbol.vertex(30, 5);
symbol.vertex(32, 12);
symbol.vertex(28, 20);
symbol.vertex(31, 28);
symbol.vertex(27, 25);
symbol.vertex(25, 29);
symbol.vertex(23, 25);
symbol.vertex(19, 28);
symbol.vertex(22, 20);
symbol.vertex(18, 12);
symbol.vertex(20, 5);
symbol.endShape(CLOSE);
//*/
}
public void zeichnen (color farbe){
if (isVisible) {
pushMatrix();
symbol.setFill(farbe);
translate(posX, posY);
rotate(rot);
shape(symbol);
popMatrix();
}
}
public void bewegen (int amount) {
posX+=amount;
if (posX < 50) posX = 50;
if (posX > width-150) posX = width-150;
}
}
public class Player {
private String name;
private int score;
public Player (String n, int s) {
name = n;
score = s;
}
public String getName() {
return name;
}
public int getScore() {
return score;
}
}
Here's an example of pre-allocating a number of objects to be reused (a-la object pooling), instead of constant reinstantiation (which has it's costs):
PShape rock;
int numRocks = 25;
Rock[] rocks = new Rock[numRocks];
float halfWidth;
float halfHeight;
void setup(){
size(900, 900, P3D);
rock = loadShape("rockWithMTL.obj");
// ideally the mesh would already been scaled down to avoid this
rock.scale(0.2);
halfWidth = width * 0.5;
halfHeight = height * 0.5;
for(int i = 0 ; i < numRocks; i++){
rocks[i] = new Rock(rock, random(-halfWidth, halfWidth), random(-halfHeight, halfHeight));
}
}
void draw(){
background(0);
lights();
translate(width * 0.5, height * 0.5, 0);
for(int i = 0 ; i < numRocks; i++){
rocks[i].draw();
}
surface.setTitle((int)frameRate + "fps");
}
class Rock{
PShape mesh;
PVector position = new PVector();
PVector velocity = new PVector();
PVector rotationAxis = new PVector();
float rotationAngle = 0;
Rock(PShape mesh, float x, float y){
this.mesh = mesh;
position.x = x;
position.y = y;
velocity.y = random(1, 10);
// pick a random rotation axis
rotationAxis.set(random(1), random(1), random(1));
}
void draw(){
// update
// increment position
position.add(velocity);
// increment rotation
rotationAngle += 0.1;
// object pool behaviour: reset if off screen (no need to re-allocate a new instance)
if(position.y > halfHeight + 100){
position.x = random(-halfWidth, halfWidth);
position.y = -halfHeight - 100;
}
// draw
pushMatrix();
translate(position.x, position.y, position.z);
rotate(rotationAngle, rotationAxis.x, rotationAxis.y, rotationAxis.z);
shape(mesh);
popMatrix();
}
}
Also, here's a super basic demo on encapsulating states. It's a bit hacky because each state know of the other, but shows each could behave as it's own "sketch" that can live in it's own tab and only override it's specific behaviour:
StartScreen start;
GameScreen game;
HighScoreScreen highScore;
StateScreen currentScreen;
void setup(){
size(300, 300);
textAlign(CENTER, CENTER);
textSize(18);
start = new StartScreen();
game = new GameScreen();
highScore = new HighScoreScreen();
currentScreen = start;
}
void draw(){
background(0);
currentScreen.draw();
}
void keyPressed(){
currentScreen.keyPressed();
}
class StateScreen {
StateScreen(){
setup();
}
void setup(){ println(this,"setup()"); }
void draw(){}
void keyPressed(){}
}
class StartScreen extends StateScreen{
void draw(){
fill(sin(frameCount * 0.1) * 127);
text("push any key to\nstart", width * 0.5, height * 0.5);
}
void keyPressed(){
currentScreen = game;
}
}
class GameScreen extends StateScreen{
void draw(){
fill(0, sin(frameCount * 0.1) * 127, 0);
text("push SPACE key to go to\nhigh score screen", width * 0.5, height * 0.5);
}
void keyPressed(){
currentScreen = highScore;
}
}
class HighScoreScreen extends StateScreen{
void draw(){
fill(random(255), random(255), random(255));
text("push SPACE key to go to\nstart screen", width * 0.5, height * 0.5);
}
void keyPressed(){
currentScreen = start;
}
}

Processing: Multiple bullets in top down shooter

I am trying to make a simple top down shooter. When the user presses W, A, S or D a 'bullet' (rectangle) will come out of the 'shooter'. With my code, you can only shoot one bullet per direction until it reaches the end of the screen. Is there a way to make it so they (the user) can shoot multiple bullets in one direction?
Here's my code:
package topdownshooter;
import processing.core.PApplet;
import processing.core.PImage;
public class TopDownShooter extends PApplet {
PImage shooter;
float shooterX = 400;
float shooterY = 300;
float u_bulletSpeed;
float l_bulletSpeed;
float d_bulletSpeed;
float r_bulletSpeed;
boolean shootUp = false;
boolean shootLeft = false;
boolean shootDown = false;
boolean shootRight = false;
public static void main(String[] args) {
PApplet.main("topdownshooter.TopDownShooter");
}
public void setup() {
shooter = loadImage("shooter.png");
}
public void settings() {
size(800, 600);
}
public void keyPressed() {
if(key == 'w') {
shootUp = true;
}
if(key == 'a') {
shootLeft = true;
}
if(key == 's') {
shootDown = true;
}
if(key == 'd') {
shootRight = true;
}
}
public void draw() {
background(206);
imageMode(CENTER);
image(shooter, shooterX, shooterY);
if(shootUp == true) {
rect(shooterX, shooterY-u_bulletSpeed, 5, 5);
u_bulletSpeed += 2;
if(u_bulletSpeed > 300) {
u_bulletSpeed = 0;
shootUp = false;
}
}
if(shootLeft == true) {
rect(shooterX-l_bulletSpeed, shooterY, 5, 5);
l_bulletSpeed += 2;
if(l_bulletSpeed > 400) {
l_bulletSpeed = 0;
shootLeft = false;
}
}
if(shootDown == true) {
rect(shooterX, shooterY+d_bulletSpeed, 5, 5);
d_bulletSpeed += 2;
if(d_bulletSpeed > 300) {
d_bulletSpeed = 0;
shootDown = false;
}
}
if(shootRight == true) {
rect(shooterX+r_bulletSpeed, shooterY, 5, 5);
r_bulletSpeed += 2;
if(r_bulletSpeed > 400) {
r_bulletSpeed = 0;
shootRight = false;
}
}
}
}
The language is processing and I am using the eclipse IDE.
Thanks!
Here's what I would do if I were you. First I'd encapsulate your bullet data into a class, like this:
class Bullet{
float x;
float y;
float xSpeed;
float ySpeed;
// you probably want a constructor here
void drawBullet(){
// bullet drawing code
}
}
Then I'd create an ArrayList that holds Bullet instances:
ArrayList<Bullet> bullets = new ArrayList<Bullet>();
To add a bullet, I'd create a new instance and add it to the ArrayList like this:
bullets.add(new Bullet(bulletX, bulletY));
Then to draw the bullets, I'd iterate over the ArrayList and call the corresponding function:
for(Bullet b : bullets){
b.drawBullet();
}
Shameless self-promotion:
Here is a tutorial on creating classes.
Here is a tutorial on using ArrayLists.

Processing Code "Error, disabling_serialEvent() in Arduino

I receive this error when trying to run my arduino and Processing
Error, disabling serialEvent() for /dev/cu.usbmodem1451 null
I am running process 2 and Arduino 1.6.5 on a MAC OSX 10.9.5
I am super new to processing and arduino . I am just trying to use three potentiometers to control the RGB values of the background color.
Arduino code:
int potPin = 0;
//int potPinB = 1;
//int potPinC = 2;
void setup()
{
Serial.begin(9600);
}
void loop()
{
int val = map(analogRead(potPin), 0, 1023, 0, 255);
Serial.println(val);
delay(500);
//int valB = map(analogRead(potPinB), 0, 1023, 0, 255);
//Serial.println(valB);
//delay(50);
//int valC = map(analogRead(potPinA), 0, 1023, 0, 255);
//Serial.println(valC);
//delay(50);
}
Processing code:
import processing.serial.*;
Serial port;
float val = 0;
//float valB = 1; // another analog input
//float valC = 2; // another analog input
void setup()
{
size(500, 500);
port = new Serial(this, "/dev/cu.usbmodem1451", 9600);
port.bufferUntil('\n');
if (frame != null);
frame.setResizable(true);
}
void draw ()
{
background(val,255,150);
}
void serialEvent (Serial port)
{
val = float(port.readStringUntil('\n'));
}
You might be getting an error in serialEvent which you should be handling (perhaps the float conversion). Also, if you're using bufferUntil(), you shouldn't need readStringUntil().
Try something like this:
import processing.serial.*;
Serial port;
float val = 0;
//float valB = 1; // another analog input
//float valC = 2; // another analog input
void setup()
{
size(500, 500);
port = new Serial(this, "/dev/cu.usbmodem1451", 9600);
port.bufferUntil('\n');
if (frame != null);
frame.setResizable(true);
}
void draw ()
{
background(val,255,150);
}
void serialEvent (Serial port)
{
try{
val = float(port.readString());
}catch(Exception e){
e.printStackTrace();
}
}
When simply reading a single value, readChar() or simply read() should work.
If the above works. You should be able to send multiple values.
Initially you can send a csv like formatter line:
arduinoR,arduinoG,arduinoB\n
which you can then read as a string, split() it into an array of 3 values, then convert each array element from String to int.
Update
Here an example:
import processing.serial.*;
int r, g, b;
void setup() {
try {
new Serial(this, "/dev/tty.usbmodemfa141", 9600).bufferUntil('\n');
}
catch(Exception e) {
println("check settings above and usb cable, something went wrong:");
e.printStackTrace();
}
}
void draw() {
background(r, g, b);
}
void serialEvent(Serial s) {
String data = s.readString();
try {
String[] rgb = data.trim().split(",");
print(rgb);
if(rgb.length == 3){
r = int(rgb[0]);
g = int(rgb[1]);
b = int(rgb[2]);
}
}
catch(Exception e) {
e.printStackTrace();
}
}
Later on you can look at sending data as binary: exactly 3 bytes (r,g,b).
Have fun :)

Image Cursor in Tuio Code

I'm looking to make an external image cursor to track the fiducial codes in tuio for my graffiti wall. Since I need background to not be run constantly in void draw(), the image cursor leaves a trail of the image around the stage. Anyone know how I can stop it from doing this without placing background in void draw()?
This is my code;
// background(255);
textFont(font, 18*scale_factor);
float obj_size = object_size*scale_factor;
float cur_size = cursor_size*scale_factor;
Vector tuioObjectList = tuioClient.getTuioObjects();
for (int i=0;i<tuioObjectList.size();i++) {
TuioObject tobj = (TuioObject)tuioObjectList.elementAt(i);
stroke(0);
fill(0);
//pushMatrix();
//translate(tobj.getScreenX(width),tobj.getScreenY(height));
//rotate(tobj.getAngle());
image(spray,10,10);
//rect(-obj_size/2,-obj_size/2,obj_size,obj_size);
// popMatrix();
if (mp == true)
{
if (tobj.getSymbolID()==66) {
fill(#FF00FF);
noStroke();
tint(255,127);
ellipse(tobj.getScreenX(width), tobj.getScreenY(height), 50, 50);
fill(#FF00FF);
text(""+tobj.getSymbolID(), tobj.getScreenX(width), tobj.getScreenY(height));
}
if (tobj.getSymbolID()==23) {
fill(#0000FF);
noStroke();
tint(255,127);
ellipse(tobj.getScreenX(width), tobj.getScreenY(height), 50, 50);
fill(#0000FF);
text(""+tobj.getSymbolID(), tobj.getScreenX(width), tobj.getScreenY(height));
}
if (tobj.getSymbolID()==22) {
fill(#00FF00);
noStroke();
tint(255,127);
ellipse(tobj.getScreenX(width), tobj.getScreenY(height), 50, 50);
fill(#00FF00);
text(""+tobj.getSymbolID(), tobj.getScreenX(width), tobj.getScreenY(height));
}
}
}
Vector tuioCursorList = tuioClient.getTuioCursors();
for (int i=0;i<tuioCursorList.size();i++) {
TuioCursor tcur = (TuioCursor)tuioCursorList.elementAt(i);
Vector pointList = tcur.getPath();
if (pointList.size()>0) {
stroke(0, 0, 255);
TuioPoint start_point = (TuioPoint)pointList.firstElement();
;
for (int j=0;j<pointList.size();j++) {
TuioPoint end_point = (TuioPoint)pointList.elementAt(j);
line(start_point.getScreenX(width), start_point.getScreenY(height), end_point.getScreenX(width), end_point.getScreenY(height));
start_point = end_point;
}
stroke(192, 192, 192);
fill(192, 192, 192);
ellipse( tcur.getScreenX(width), tcur.getScreenY(height), cur_size, cur_size);
fill(0);
text(""+ tcur.getCursorID(), tcur.getScreenX(width)-5, tcur.getScreenY(height)+5);
}
}
}
void mousePressed () {
bDrawFullSize = true;
mp = true;
player.play();
if (mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h) {
button = !button;
}
}
/*if(mousePressed) {
if(mouseX>x && mouseX <x+w && mouseY>y && mouseY <y+h){
image(stencil1,200,100,FULL_SIZE, FULL_SIZE);
}
else
{
if(mouseX>x && mouseX <x+w && mouseY>y && mouseY <y+h){
image(stencil2,200,100,FULL_SIZE, FULL_SIZE);
}
}
}
}*/
void mouseReleased() {
mp = false;
player.close();
//since close closes the file, we need to load the sound effect again.
player = minim.loadFile("spray_close.wav");
}
void mouseDragged() {
drag = true;
}
// these callback methods are called whenever a TUIO event occurs
// called when an object is added to the scene
void addTuioObject(TuioObject tobj) {
println("add object "+tobj.getSymbolID()+" ("+tobj.getSessionID()+") "+tobj.getX()+" "+tobj.getY()+" "+tobj.getAngle());
}
// called when an object is removed from the scene
void removeTuioObject(TuioObject tobj) {
println("remove object "+tobj.getSymbolID()+" ("+tobj.getSessionID()+")");
}
// called when an object is moved
void updateTuioObject (TuioObject tobj) {
println("update object "+tobj.getSymbolID()+" ("+tobj.getSessionID()+") "+tobj.getX()+" "+tobj.getY()+" "+tobj.getAngle()
+" "+tobj.getMotionSpeed()+" "+tobj.getRotationSpeed()+" "+tobj.getMotionAccel()+" "+tobj.getRotationAccel());
}
// called when a cursor is added to the scene
void addTuioCursor(TuioCursor tcur) {
println("add cursor "+tcur.getCursorID()+" ("+tcur.getSessionID()+ ") " +tcur.getX()+" "+tcur.getY());
}
// called when a cursor is moved
void updateTuioCursor (TuioCursor tcur) {
println("update cursor "+tcur.getCursorID()+" ("+tcur.getSessionID()+ ") " +tcur.getX()+" "+tcur.getY()
+" "+tcur.getMotionSpeed()+" "+tcur.getMotionAccel());
}
// called when a cursor is removed from the scene
void removeTuioCursor(TuioCursor tcur) {
println("remove cursor "+tcur.getCursorID()+" ("+tcur.getSessionID()+")");
}
// called after each message bundle
// representing the end of an image frame
void refresh(TuioTime bundleTime) {
redraw();
}
void keyPressed() {
endRecord();
background(bg1);
bDrawFullSize = false;
button = false;
}
Maybe using layers, draw your cursor and/or the other stuff in different layers. Erase one layer and not other as you need, display all them in draw. This is usually done with PGraphics objects. Search processing + layers to see samples. Here and/or in processing forum
something like this:
EDIT: Actually I think that the way to do it is to move all non refreshing draw to a PGraphics and do refresh draw with background(), where you can draw refreshing stuff without a trail. I changed the code to reflect that.
PGraphics l1;
void setup() {
size(200, 200);
l1 = createGraphics(200, 200, JAVA2D);
background(255);
noStroke();
}
void draw() {
background(255);
l1.beginDraw();
l1.fill(255, 0, 255);
l1.noStroke();
if (frameCount%100 == 0) {
l1.rect(random(width), random(height), 20, 20);
}
l1.endDraw();
image(l1, 0, 0);
fill(230);
ellipse(mouseX, mouseY, 30, 30);
}

Processing: Numbered Image squence

I am trying to create 100 frames where the numbers 0-100 are "printed" in the center of every frame. If I try the code below I get the error "It looks like you're mixing "active" and "static" modes".
size(1440,900);
font = loadFont("Arial-Black-96.vlw");
textFont(font,96);
int x = 0;
void draw() {
background(204);
y=0;
if (x < 100) {
text(y, 10, 50);
x = x + 1;
y=y+1;
} else {
noLoop();
}
// Saves each frame as screen-0001.tif, screen-0002.tif, etc.
saveFrame();
}
You need to wrap the first 3 lines in the setup() function.
Like:
void setup(){
size(1440,900);
font = loadFont("Arial-Black-96.vlw");
textFont(font,96);
}
I answered this without running the code, there were others issues, here a version of your code:
PFont font;
int x = 0;
int size = 96;
void setup() {
size(1440, 900);
font = createFont("Arial-Black", size);
textFont(font);
}
void draw() {
background(204);
if (x <= 100) {
String number = nf(x, 2);
text(number, width/2 - textWidth(number)/2, height/2);
x++;
saveFrame();
}
else {
exit();
}
}

Resources