I am currently working with the Ani Library in Processing.
I'm trying to fade in some rectangles one by one (on a PGraphics). To let the rectangles appear I use a loop - whose size I can control with MouseX. So one rectangle appears after the other. But I also want to fade in each one individually using the Ani Library. Currently I can only get the fade in to affect all of them at once.
So I tried to make an object out of the rectangle and put the FadeIn inside the object. But it behaves similar here – all fade in at once.
How can I solve this? Do I need an Array or an Array List for this?
This is my Code without an object:
import de.looksgood.ani.*;
PGraphics pg;
float alpha;
void setup() {
size(1920, 1920);
rectMode(CENTER);
Ani.init(this);
pg = createGraphics(width, height);
}
void draw() {
drawPG();
image(pg, 0,0);
}
void drawPG () {
pg.beginDraw();
pg.pushMatrix();
pg.translate(100, height/4.75);
pg.background(255);
pg.noStroke();
Ani.to(this, 10, "alpha", 255, Ani.EXPO_OUT);
color black = color(0, 0, 0, alpha);
pg.fill(black);
int blocks = int(map(mouseX, 0, width, 0, 7));
for (int i = 0; i < blocks; i++) {
pg.pushMatrix();
pg.translate(i * 200 + i*100, 0);
pg.rect(0, 0, 200, 200);
pg.popMatrix();
}
pg.popMatrix();
pg.endDraw();
}
And this is my tried out version with an Object:
import de.looksgood.ani.*;
PGraphics pg;
Rectangle myRect;
void setup() {
size(1920, 1920);
rectMode(CENTER);
myRect = new Rectangle();
Ani.init(this);
pg = createGraphics(width, height);
}
void draw() {
drawPG();
image(pg, 0,0);
}
void drawPG () {
pg.beginDraw();
pg.pushMatrix();
pg.translate(100, height/4.75);
pg.background(255);
pg.noStroke();
int blocks = int(map(mouseX, 0, width, 0, 7));
for (int i = 0; i < blocks; i++) {
pg.pushMatrix();
pg.translate(i * 200 + i*100, 0);
myRect.display(pg);
pg.popMatrix();
}
pg.popMatrix();
pg.endDraw();
}
class Rectangle {
float alpha;
Rectangle() {
}
void display(PGraphics pg) {
Ani.to(this, 10, "alpha", 255, Ani.EXPO_OUT);
color black = color(0, 0, 0, alpha);
pg.fill(black);
pg.rect(0, 0, 200, 200);
}
}
+++ EDIT +++
Found a solution here:
https://processing.org/tutorials/objects
And this gave me the hint to really work with an array. And then it says for the PGraphic:
void drawPG () {
pg.beginDraw();
pg.pushMatrix();
pg.translate(100, height/4.75);
pg.background(255);
pg.noStroke();
int blocks = int(map(mouseX, 0, width, 0, rectangles.length));
for (int i = 0; i < blocks; i++) {
pg.pushMatrix();
pg.translate(i * 200 + i*100, 0);
rectangles[i].display(pg);
pg.popMatrix();
}
pg.popMatrix();
pg.endDraw();
}
Above setup();
Rectangle[] rectangles = new Rectangle[7];
And in setup();
for (int i = 0; i < rectangles.length; i++) {
rectangles[i] = new Rectangle();
}
I am trying to create a round brush with blurred edges in Processing through the following code. The circle shape is drawn pixel by pixel because in the actual version, I try to draw with pixels taken from the PGraphic pg.
PFont font;
PGraphics pg;
int X;
int Y;
int rad = 20;
void setup (){
size(800, 800, P2D);
background(0);
noStroke();
pg = createGraphics(800, 800, JAVA2D);
pg.beginDraw();
pg.fill(255);
pg.noStroke();
pg.textFont(font);
pg.textSize(400);
pg.pushMatrix();
pg.translate(width/2, height/2-140);
pg.textAlign(CENTER, CENTER);
pg.text("b", 0 , 0);
pg.popMatrix();
pg.endDraw();
}
void draw () {
image(pg,0,0);
}
void mousePressed(){
X = mouseX;
Y = mouseY;
}
void mouseDragged(){
for (int x=0; x<rad; x++) {
for (int y=0; y<rad; y++) {
float distance = sqrt(pow(x,2)+pow(y,2));
float alpha = 255-map(distance,0,rad,0,255);
if (sqrt(pow(x,2)+pow(y,2)) < rad){
pg.beginDraw();
pg.set(mouseX+x,mouseY+y,color(255,255,255, alpha));
pg.set(mouseX-x,mouseY+y,color(255,255,255, alpha));
pg.set(mouseX+x,mouseY-y,color(255,255,255, alpha));
pg.set(mouseX-x,mouseY-y,color(255,255,255, alpha));
pg.endDraw();
}
}
}
}
Create a function which draw a single dot to a PGraphics object:
void DrawPen(PGraphics pg, int cptX, int cptY, int r) {
pg.beginDraw();
for (int x = 0; x < r; ++x) {
for (int y = 0; y < r; ++y) {
float distance = sqrt(x*x + y*y);
float alpha = 255-map(distance,0,r,0,255);
if (distance < r) {
pg.set(cptX+x,cptY+y,color(255,255,255, alpha));
pg.set(cptX-x,cptY+y,color(255,255,255, alpha));
pg.set(cptX+x,cptY-y,color(255,255,255, alpha));
pg.set(cptX-x,cptY-y,color(255,255,255, alpha));
}
}
}
pg.endDraw();
}
Draw a dot to a separate PGraphics object in setup
PGraphics pg;
PGraphics pg_pen;
int rad = 20;
void setup (){
size(800, 800, P2D);
pg = createGraphics(800, 800, JAVA2D);
pg.beginDraw();
// [...]
pg.endDraw();
pg_pen = createGraphics(2*rad, 2*rad, JAVA2D);
DrawPen(pg_pen, rad, rad, rad);
}
When the mouse is dragged then blend the pg_pen to the common PGraphics object (pg) at the current mouse position:
void mouseDragged(){
pg.beginDraw();
pg.image(pg_pen, mouseX-rad, mouseY-rad);
pg.endDraw();
}
For the seek of completeness the draw function:
void draw () {
background(0);
image(pg,0,0);
}
[...] and tried to get the color from the white part to draw on the black part.
Add a color parameter to the DrawPen function and clear the pen PGraphics before drawing to it:
void DrawPen(PGraphics pg, int cptX, int cptY, int r, color c) {
pg.beginDraw();
pg.clear();
for (int x = 0; x < r; ++x) {
for (int y = 0; y < r; ++y) {
float distance = sqrt(x*x + y*y);
float alpha = 255-map(distance,0,r,0,255);
if (distance < r) {
color pc = color(red(c),green(c),blue(c), alpha);
pg.set(cptX+x,cptY+y,pc);
pg.set(cptX-x,cptY+y,pc);
pg.set(cptX+x,cptY-y,pc);
pg.set(cptX-x,cptY-y,pc);
}
}
}
pg.endDraw();
}
Get the color in the mouse pressed event call back and change the color of the pen:
void mousePressed() {
color c = pg.get(mouseX, mouseY);
println(c);
DrawPen(pg_pen, rad, rad, rad, c);
}
Note, the color is get from the pg object and not from the screen. If you want to get the color from the screen then it has to be (without .pg):
color c = get(mouseX, mouseY);
Further the color is changed any time when any mouse is pressed (pressed not dragged). Possibly you want to change the color when the right mouse button is pressed and paint when the left mouse button is pressed:
void mousePressed() {
if (mouseButton == RIGHT) {
color c = pg.get(mouseX, mouseY);
println(c);
DrawPen(pg_pen, rad, rad, rad, c);
}
}
add a "background(0);" before "image(pg,0,0);" in your drawing method, that way you reset the background every time, if you don't do that the program will keep drawing every frame images on top of each other's, which will make the low opacity pixel gain opacity slowly every frame until reaching 100%
void draw () {
background(0);
image(pg,0,0);
}
Edit:
After testing your code I noticed there was a problem with the way you were creating those circles, making it super slow to run (every frame you go through that double for loop to draw one circle ) and also gave that weird black edges problem, so here is what I did:
First I used your variable pg and drew one circle on it on the startup, Then I declared another PGraphics 'pg_all', where I drew one pg every call of the mousedrag method, I tested it on multiple backgrounds it seems like working fine, here is the final code, let me know if you didn't understand a part or want to do it differently:
PFont font;
PGraphics pg;
PGraphics pg_all;
int X;
int Y;
int rad = 20;
void setup (){
size(800, 800, P2D);
background(0);
noStroke();
pg_all = createGraphics(800, 800, JAVA2D);
pg_all.beginDraw();
pg_all.endDraw();
pg = createGraphics(800, 800, JAVA2D);
pg.beginDraw();
for (int x=0; x<rad; x++) {
for (int y=0; y<rad; y++) {
float distance = sqrt(pow(x,2)+pow(y,2));
float alpha = 255-map(distance,0,rad,0,255);
if (sqrt(pow(x,2)+pow(y,2)) < rad){
pg.beginDraw();
pg.set(20+x,20+y,color(255,255,255, alpha));
pg.set(20-x,20+y,color(255,255,255, alpha));
pg.set(20+x,20-y,color(255,255,255, alpha));
pg.set(20-x,20-y,color(255,255,255, alpha));
pg.endDraw();
}
}
}
pg.endDraw();
}
void draw () {
background(0);
image(pg_all,0,0);
}
void mouseDragged(){
X = mouseX;
Y = mouseY;
pg_all.beginDraw();
pg_all.image(pg,X-rad,Y-rad);
pg_all.endDraw();
}
I have started to create a 2D game in LibGDX using a map(32x32 8 pixel tiles) from tiled map editor. In the method generateMushrooms, I want to access the cell(1,2) in layer 1 and set its tile to another tile in my tileset sprites.png with the id of 8. How would I achieve this? Right now I am getting a null pointer exception.
public void create() {
float w = Gdx.graphics.getWidth();
float h = Gdx.graphics.getHeight();
camera = new OrthographicCamera();
camera.setToOrtho(false, 256, 256);
camera.update();
tiledMap = new TmxMapLoader().load("custom.tmx");
tiledMapRenderer = new OrthogonalTiledMapRenderer(tiledMap);
generateMushrooms();
Gdx.input.setInputProcessor(this);
sb = new SpriteBatch();
texture = new Texture(Gdx.files.internal("badlogic.jpg"));
sprite = new Sprite(texture, 50, 50);
}
#Override
public void render() {
Gdx.gl.glClearColor(0, 0, 0, 0);
Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
camera.update();
tiledMapRenderer.setView(camera);
tiledMapRenderer.render();
sb.setProjectionMatrix(camera.combined);
sb.begin();
//sprite.draw(sb);
sb.end();
}
public void generateMushrooms() {
//Get first layer
TiledMapTileLayer layer = (TiledMapTileLayer) tiledMap.getLayers().get(1);
// Get cell at row 1 column 2
TiledMapTileLayer.Cell cell = layer.getCell(1, 2);
// Get Tileset
TiledMapTileSet tileSet = tiledMap.getTileSets().getTileSet("sprites.png");
//Set tile of id 8 for the cell
cell.setTile(tileSet.getTile(8));
//Set the cell back in the layer at their x and y positions
layer.setCell(8, 16, cell);
}
Solved my problem! I have a traversing for loop go through the tiles and replace certain tiles like this (note that cur is a layer in the map).
for(int i=0; i < row; i++)
{
for(int j=0; j < column; j++)
{
cell = cur.getCell(i, j);
cur.setCell(i * 8, j * 8, cell);
cell.setTile(new StaticTiledMapTile("Some type of TextureRegion/Texture");
}
}
I'm trying to spawn multiple versions of the same sprite. Each spawns with a random speed (using random numbers between minus and positive speeds to determine random direction) and I have created 2 for loops to load an arraylist with new sprites. However, it seems to spawn 5 sprites, but then it seems like they're deleting and creating 5 more over and over. Below are the methods used:
public void update(){
spritesArrayList.clear();
if (gameOver != true)
{
sprite.update();
}
for (int i = 0; i < count; i++)
{
sprite = new Sprite(this);
spritesArrayList.add(sprite);
}
}
/**
* To draw the game to the screen
* This is called from Thread, so synchronisation can be done
*/
public void doDraw(Canvas canvas) {
Paint textPaint = new Paint();
canvas.drawBitmap(mBackgroundImage, 0, 0, null);
//Draw all the objects on the canvas
canvas.drawText("The Game ",5,25, paint);
canvas.drawText("Score: " + hitCount, 5, 50, paint);
canvas.drawText("Time: " +displayTime, 5, 75, paint);
GetArrayListSize();
//Loop for sprite creation
for (int i = 0; i < arraySize; i++)
{
Sprite sprite = spritesArrayList.get(i);
sprite.draw(canvas);
}
if (gameOver == true)
{
canvas.drawText("Final Score: "+finalScore, 5,100, paint);
int width = this.getMeasuredWidth()/2;
int height = this.getMeasuredHeight()/2;
textPaint.setTextAlign(Align.CENTER);
canvas.drawText("GAME OVER - PRESS BACK BUTTON TO RETURN", width, height, textPaint);
}
}
i would like to know, how i could get a rendered Picture of an ModelInstance-ArrayList.
public void modelBufferIcon(int i){
for(int j = 0; j < i; j++){
frameBuffer = new FrameBuffer(Format.RGB565, Hangar.WindowWidth , Hangar.WindowHeight, false);
lights = new Lights();
lights.ambientLight.set(ambientLight);
lights.add(new PointLight().set(pointLightBack, 0f, -1f, -5f,pointLightBack_INTENSITY));
lights.add(new PointLight().set(pointLightFront, 0f, -5f, 10f, pointLightFront_INTENSITY));
perspectiveCamera.lookAt(roboterVector);
perspectiveCamera.update();
frameBuffer.begin();
Gdx.graphics.getGL20().glViewport(0, 0, frameBuffer.getWidth(), frameBuffer.getHeight());
Gdx.graphics.getGL20().glClearColor(0f, 0f, 0f, 1);
Gdx.graphics.getGL20().glClear(GL20.GL_COLOR_BUFFER_BIT);
Gdx.graphics.getGL20().glEnable(GL20.GL_TEXTURE_2D);
modelBatch.begin(perspectiveCamera);
modelBatch.render(physique.reBuildModel(Controller.getUser().getPets().get(j)),lights);
modelBatch.end();
frameBuffer.end();
texture = frameBuffer.getColorBufferTexture();
TextureRegion textureRegion = new TextureRegion(texture);
textureRegion.flip(false, true);
image_pet = new Image(textureRegion);
imageClickHandler(image_pet, j);
window.add(image_pet).row();
window.pack();
perspectiveCamera.lookAt(cameraVector);
perspectiveCamera.update();
}
}
On the left side u see the rendered Model, on the right side the picture:
Picture
With (physique.reBuildModel(Controller.getUser().getPets().get(j)),lights) the render-method get a Modelinstance of five 3d Models (Head, Arms,... ).