So I am currently doing a generative GIF from Processing and currently saving these frames out. I am wondering how can I make the background transparent? For now, it is currently black but I want to make it transparent. Thanks !!
static final int NUM = 150;
static final float X[] = new float[NUM];
static final float Y[] = new float[NUM];
static final float T[] = new float[NUM];
void initCoordinates(boolean setup) {
for(int i = 0 ; i < NUM; i++) {
if (setup) {
T[i] = random(0, 180); // [0, PI]
}
// the magic curve
X[i] = 50 * sin(T[i]) * (exp(cos(T[i])) - 3*cos(4*T[i]) - pow(sin(T[i]/10), 5));
Y[i] = 50 * cos(T[i]) * (exp(cos(T[i])) - 3*cos(4*T[i]) - pow(sin(T[i]/10), 5));
}
}
void setup (){
size (800, 800, P2D);
//colorMode(HSB);
initCoordinates(true);
}
void draw(){
background(0);
//stroke(100);
//line (400,100,400,700);
//line (100,400,700,400);
translate(width/2, height/2);
//stroke(255);
beginShape();
for (int i = 0; i<NUM; i++){
T[i] +=.004;
if (T[i] > 180) {
T[i] = 0;
}
initCoordinates(false);
stroke(random(200, 255), random(200, 255), random(200, 255));
fill(random(155,255),random(100,55), random(0,10));
rect(X[i],Y[i], random(1,15), random(1,15));
endShape();
}}
void keyPressed(){
if(keyPressed && key==' ') saveFrame("frame1/frame-#####.png");
}
Reference:
Making a transparent background (application) in Processing language
Thanks to Kevin Workman for showing us how to do this with a Processing window. However, once the image is saved to a .png file it is on a solid black background. There are ways of getting it on a lighter background, but that is another topic. If you want to see the butterfly pattern more distinctly, try moving 'background(0,128)' from draw() to setup(). Not sure what you are trying to achieve.
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
javax.swing.JFrame frame;
static final int NUM = 150;
static final float X[] = new float[NUM];
static final float Y[] = new float[NUM];
static final float T[] = new float[NUM];
void initCoordinates(boolean setup) {
for (int i = 0; i < NUM; i++) {
if (setup) {
T[i] = random(0, 180); // [0, PI]
}
// the magic curve
X[i] = 50 * sin(T[i]) * (exp(cos(T[i])) - 3*cos(4*T[i]) - pow(sin(T[i]/10), 5));
Y[i] = 50 * cos(T[i]) * (exp(cos(T[i])) - 3*cos(4*T[i]) - pow(sin(T[i]/10), 5));
}
}
void setup() {
size(800,800);
background(0,128);
frame = (javax.swing.JFrame) ((processing.awt.PSurfaceAWT.SmoothCanvas) surface.getNative()).getFrame();
frame.dispose();
frame.setUndecorated(true);
frame.setOpacity(.5f);
frame.setVisible(true);
initCoordinates(true);
}
void draw() {
translate(width/2, height/2);
beginShape();
for (int i = 0; i<NUM; i++) {
T[i] +=.004;
if (T[i] > 180) {
T[i] = 0;
}
initCoordinates(false);
stroke(random(200, 255), random(200, 255), random(200, 255));
fill(random(155, 255), random(100, 55), random(0, 10));
rect(X[i], Y[i], random(1, 15), random(1, 15));
endShape();
}
}
void mousePressed(){
println("frame saved.");
saveFrame("frame1/frame-#####.png");
}
I couldn't get keyPressed() to work on the transparent window so I switched to mousePressed() to save the image. Operating system was MacOS.
Related
I'm very new to Processing and coding in general and trying to program a row of falling Domino bricks activated by an ellipse.
I have programmed a function for the bricks standing upright and one for the fallen bricks, but I can only get the bricks to fall all at the same time.
I'm looking for a way to make them fall one after the other. It would be great if someone could help me out.
This is my Code so far -
First tab:
Dom[] dominos = new Dom[20];
int m;
float x = 100;
void setup() {
size (600, 600);
for (int i=0; i < dominos.length; i++) {
dominos[i] = new Dom();
}
}
void draw() {
background(0);
if (m<91) {
m = m + 1;
}
fill(0);
ellipse(m, height/2 + 15, 20, 20);
fill(255, 80, 0);
ellipse (m, height/2 + 15, 20, 20);
for (int i=0; i < dominos.length; i++) {
if (m < 90)
dominos[1].show();
if (m >= 90)
dominos[i].fall();
}
}
Second tab:
class Dom {
float x = 100;
float y = height/2 - 22.5;
void fall() {
push();
stroke(255);
strokeWeight(10);
strokeCap(SQUARE);
for (int i = 0; i<15; i++) {
line (x + i*30 + 45, y+40, x + i *30, y+50);
}
pop();
}
void show() {
push();
stroke(255);
strokeWeight(10);
strokeCap(SQUARE);
for (int i = 0; i<15; i++) {
line (x + i*30, y, x + i *30, y+45);
}
pop();
}
}``
First of all, look what Your Dom.fall(), and Dom.show() is doing.
Each method draws 15 rectangles.
Next, look what Are You doing with dominos. It's an Array of 20 elements.
So, in draw() You are drawing 15 rectangles, 20 times with every frame refresh.
Basically You need an Array of 15 objects each drawing one rectangle. Or one object drawing 15 rectangles. But not 20 objects drawing 15 rectangles.
So, here is the simpler solution of Your problem:
Dom dominos;
int m;
void setup() {
size (600, 600);
dominos = new Dom();
}
void draw() {
background(0);
if (m<91) {
m++;
}
fill(255, 80, 0);
ellipse(m, height/2 + 15, 20, 20);
if (m>=90) {
dominos.fallenNumber++;
}
dominos.draw();
}
class Dom {
float x = 100;
float y = height/2 - 22.5;
int fallenNumber = 0;
void draw() {
push();
stroke(255);
strokeWeight(10);
strokeCap(SQUARE);
for (int i=0; i<15; i++) {
if (i<fallenNumber){
line (x + i*30 + 45, y+40, x + i *30, y+50);
} else {
line (x + i*30, y, x + i *30, y+45);
}
}
pop();
}
}
Clarifying my last question:
I would like to display, in Processing, many photos fading up and fading down over 15 seconds, with one second between their start times, so there are about 15 images on the screen at a time, at various levels of fading.
This example displays 15 objects, but they all start together:
PImage[] imgs = new PImage[42];
Pic[] pics = new Pic[15];
void setup() {
size(1000, 880);
for (int i = 0; i < pics.length; i++) {
pics[i] = new Pic(int(random(0, 29)), random(0, 800), random(0, height));
}
for (int i = 0; i < imgs.length; i++) {
imgs[i] = loadImage(i+".png");
}
}
void draw() {
background(255);
for (int i = 0; i < pics.length; i++) {
pics[i].display();
}
}
class Pic {
float x;
float y;
int num;
int f = 0;
boolean change = true;
Pic(int tempNum, float tempX, float tempY) {
num = tempNum;
x = tempX;
y = tempY;
}
void display() {
imageMode(CENTER);
if (change)f++;
else f--;
if (f==0||f==555)change=!change;
tint(0, 153, 204, f);
image(imgs[num], x, y);
}
}
If you can fade an image, then you can also cross fade an image by subtracting the fade amount from the maximum fade value (e.g. inverting the fade value).
In your case you're using tint so it's a value from 0-255.
Let's say tint is your variable: 255 - tint would be the inverted value.
Here's a basic sketch you can run that illustrates this (using fill() instead of tint()):
void draw(){
float fade = map(sin(frameCount * 0.03), -1.0, 1.0, 0, 255);
background(0);
noStroke();
// use fade value
fill(192, 0, 192, fade);
ellipse(45, 50, 60, 60);
// invert the fade value (by subtracting it from the max value)
fill(0, 192, 192, 255 - fade);
ellipse(60, 50, 60, 60);
}
Continuing from the previous question and answer you can tweak the code to use an inverted tint value to crossfade. The catch is you'd need to store a reference to the previous image to apply the inverted tint to:
PImage[] imgs = new PImage[42];
ImagesFader fader;
void setup(){
size(255, 255);
frameRate(60);
// load images
for (int i = 0; i < imgs.length; i++) {
imgs[i] = loadImage(i+".png");
}
// setup fader instance
// constructor args: PImage[] images, float transitionDurationSeconds, int frameRate
// use imgs as the images array, transition in and out within 1s per image at 60 frames per second
fader = new ImagesFader(imgs, 3.0, 60);
}
void draw(){
background(0);
fader.draw();
}
class ImagesFader{
int numFrames;
int numFramesHalf;
int frameIndex = 0;
PImage[] images;
int maxImages = 15;
int randomImageIndex;
float randomX, randomY;
PImage previousImage;
float previousX, previousY;
ImagesFader(PImage[] images, float transitionDurationSeconds, int frameRate){
numFrames = (int)(frameRate * transitionDurationSeconds);
numFramesHalf = numFrames / 2;
println(numFrames);
this.images = images;
// safety check: ensure maxImage index isn't larger than the total number of images
maxImages = min(maxImages, images.length - 1);
// pick random index
randomizeImage();
}
void draw(){
updateFrameAndImageIndices();
PImage randomImage = imgs[randomImageIndex];
// isolate drawing style (so only the image fades, not everything in the sketch)
pushStyle();
// if there is a previous image, cross fade it
float tintAlpha = tintFromFrameIndex();
if(previousImage != null){
// invert tint -> max(255) - value
tint(255, 255 - tintAlpha);
image(previousImage, previousX, previousY);
}
// render current random image (on top of the previous one, if any)
tint(255, tintAlpha);
image(randomImage, randomX, randomY);
popStyle();
}
float tintFromFrameIndex(){
int frameIndexToTint = abs(frameIndex - numFramesHalf);
return map(frameIndexToTint, 0, numFramesHalf, 255, 0);
}
void updateFrameAndImageIndices(){
// increment frame
frameIndex++;
// reset frame (if larger than transition frames total)
if(frameIndex >= numFrames){
// update previous image before generating another random image
previousImage = imgs[randomImageIndex];
previousY = randomX;
previousY = randomY;
frameIndex = 0;
// randomize index and position
randomizeImage();
println("fade transition complete, next image: ", randomImageIndex);
}
}
void randomizeImage(){
randomImageIndex = int(random(0, 29));
randomX = random(width);
randomY = random(height);
}
}
The above skeetch might not be 100% accurate (as I don't fully get the randomisation logic), but hopefully it illustrates the mechanism of crossfading.
I am trying to create a vertical carousel in processing with three ellipses.
I am able to get this done with two ellipses – that the carousel repeats itself over and over.
So far so good – it thought I could use the same logic for three but I am wrong. I started to think it works with more variables but wrong again… what am I missing in the logic? I really can not figure out how to set the values to make it seamless repeating itself…
Here is the example with two (this one is "seamless"):
float yspeed = 5;
float circleY;
int d = 720;
void setup() {
size(1080, 1620 );
circleY = 0;
}
void draw() {
background(255);
fill(0);
noStroke();
ellipse(width/2, circleY+height/2, d,d);
ellipse(width/2, circleY-height/2, d,d );
circleY = circleY + yspeed;
if (circleY > height) {
circleY=0;}
}
Here is my WIP with three … (BTW colors are only to see better):
float yspeed1 = 5;
float yspeed2 = 5;
float yspeed3 = 5;
float circleY1;
float circleY2;
float circleY3;
int d = 720;
void setup() {
size(1080, 1620);
circleY1 = 0;
circleY2 = 0;
circleY3 = 0;
}
void draw() {
background(255);
noStroke();
fill(255, 0, 0);
ellipse(width/2, circleY1, d, d);
circleY1= circleY1 + yspeed1;
if (circleY1 > height+d/2 ) {
circleY1=0;
}
fill(0, 255, 0);
ellipse(width/2, circleY2-810, d, d);
circleY2= circleY2 + yspeed2;
if (circleY2 > height+d/2 ) {
circleY2=0 ;
}
fill(0, 0, 255);
ellipse(width/2, circleY2-1620, d, d);
circleY3= circleY3 + yspeed3;
if (circleY3 > height+d/2 ) {
circleY3=0 ;
}
}
The one with three always starts at the intital point for all of them – but I thought that using individual variables would change it?
Thank you for any kind of help!
I found a solution myself! I used a trick – I did it with a loop and used four instead of three – three is in the end the only ones you see anyway!
float yspeed = 1;
float circleY;
int d = 360;
void setup() {
size(540, 810 );
circleY = 0;
}
void draw() {
background(255);
fill(0);
noStroke();
// fill(255,0,0);
translate(0, - height/2);
for (int i = 0; i< 5; i++) {
ellipse(width/2, circleY+height/2*i, d, d);
}
circleY = circleY + yspeed;
if (circleY > 405) {
circleY= 0;
}
}
I'm new to Processing and want to make the following sketch move images down, rather than up. I have tried adjusting the y to y+= speed in void move(), which does this but the images don't reload, they just do one cycle and the screen goes blank.
Your help would be appreciated :-)
Spot[] sp = new Spot[60];
PImage myImage;
/* #pjs preload="http://mathatelle.appspot.com/imgs/drawing_circle.png"; */
void setup() {
size(800, 400);
imageMode(CENTER);
myImage = loadImage("http://mathatelle.appspot.com/imgs/drawing_circle.png"); //100x100px
for (int i = 0; i < sp.length; i++) {
sp[i] = new Spot(random(width), random(height), random(0.2,1.0), random(0.1,1.0));
}
}
void draw() {
background(0);
for (int i = 0; i < sp.length; i++) {
sp[i].move();
sp[i].display();
}
}
class Spot {
float x, y, diameter, speed; // x座標, y座標, 直径, 速さ
Spot(float _x, float _y, float _diameter, float _speed) {
x = _x;
y = _y;
diameter = _diameter;
speed = _speed;
}
void move() {
speed *= 1.01;
y -= speed;
if (y < - myImage.width*diameter/2) {
x = random(width);
y = height + myImage.width*diameter/2;
speed = random(0.5,3);
}
}
void display() {
pushMatrix();
translate(x, y);
rotate(TWO_PI*diameter);
scale(diameter);
//tint(255, 255, 255, 153);
image(myImage, 0, 0);
popMatrix();
}
}
The logical is kind of inverted already,but just invert it again :)
here there are comments in the code:
Spot[] sp = new Spot[60];
PImage myImage;
/* #pjs preload="http://mathatelle.appspot.com/imgs/drawing_circle.png"; */
void setup() {
size(800, 400);
imageMode(CENTER);
myImage = loadImage("http://mathatelle.appspot.com/imgs/drawing_circle.png"); //100x100px
for (int i = 0; i < sp.length; i++) {
// a little change where spots are created...
sp[i] = new Spot(random(width), random(-myImage.height, height - 100), random(0.2, 1.0), random(0.1, 1.0));
}
}
void draw() {
background(0);
for (int i = 0; i < sp.length; i++) {
sp[i].move();
sp[i].display();
}
}
class Spot {
float x, y, diameter, speed; // x座標, y座標, 直径, 速さ
Spot(float _x, float _y, float _diameter, float _speed) {
x = _x;
y = _y;
diameter = _diameter;
speed = _speed;
}
void move() {
speed *= 1.01;
// invert movement direction
y += speed;
// also invert the test...
if (y > height + myImage.width*diameter/2) {
x = random(width);
y = height + myImage.width*diameter/2;
speed = random(0.5, 3);
}
}
void display() {
pushMatrix();
translate(x, y);
rotate(TWO_PI*diameter);
scale(diameter);
//tint(255, 255, 255, 153);
image(myImage, 0, 0);
popMatrix();
}
}
A friend helped me out, this is the solution to my problem :-)
Spot[] sp = new Spot[60];
PImage myImage;
/* #pjs preload="http://mathatelle.appspot.com/imgs/drawing_circle.png"; */
void setup() {
size(800, 400);
imageMode(CENTER);
myImage = loadImage("http://mathatelle.appspot.com/imgs/drawing_circle.png"); //100x100px
for (int i = 0; i < sp.length; i++) {
// a little change where spots are created...
sp[i] = new Spot(random(width), random(-myImage.height, height - 100), random(0.2, 1.0), random(0.1, 1.0));
}
}
void draw() {
background(0);
for (int i = 0; i < sp.length; i++) {
sp[i].move();
sp[i].display();
}
}
class Spot {
float x, y, diameter, speed; // x座標, y座標, 直径, 速さ
Spot(float _x, float _y, float _diameter, float _speed) {
x = _x;
y = _y;
diameter = _diameter;
speed = _speed;
}
void move() {
speed *= 1.01;
y += speed;
// change y = 0 - ...
if (y > height + myImage.width*diameter/2) {
x = random(width);
y = 0 - myImage.width*diameter/2;
speed = random(0.5, 3);
}
}
void display() {
pushMatrix();
translate(x, y);
rotate(TWO_PI*diameter);
scale(diameter);
//tint(255, 255, 255, 153);
image(myImage, 0, 0);
popMatrix();
}
}
I am trying to create a visualization where the nodes of my network change size in a loop as the visualization progresses (I have stripped out the interactions between the nodes for simplicity here). I have the array sizes that is looped over in the draw function with index j. I am not sure why the nodes are not changing size. Any insight into this problem would be appreciated.
int numBalls = 5;
Ball[] balls = new Ball[numBalls];
float[] sizes = {15,25,35,45,55,65};
void setup() {
size(800, 400);
int l = 0 ;
for (int i = 0; i < numBalls; i++) {
balls[i] = new Ball(random(width),random(height), random(30, 50), i, balls);
}
noStroke();
fill(255, 204);
}
void draw() {
background(0);
for (int j = 0; j < 6; j++){
for (int i = 0; i < numBalls; i++) {
print("\nNEW ID\n");
print(i);
print("\n");
print("Diameter in balls\n");
print(balls[i].diameter);
print("\n");
balls[i].diameter = sizes[j];
print("Diameter in balls after fix\n");
print(balls[i].diameter);
balls[i].display();
}
}
}
class Ball {
float x, y;
float diameter;
float mass;
float vx = 0;
float vy = 0;
int id;
Ball[] others;
Ball(float xin, float yin, float din, int idin, Ball[] oin) {
x = xin;
y = yin;
diameter = din;
mass = 50;
id = idin;
others = oin;
}
void display() {
textSize(32);
fill(0,255,0,255);
print("\nDiameter in display\n");
print(diameter);
print("\n");
ellipse(x, y, diameter, diameter);
print("\nDiameter in display\n");
print(diameter);
print("\n");
fill(255, 0, 0, 255);
text(id,x,y);
}
}
The thing is, in your draw() function you are running over the array of sizes with the first for-loop and assigning the value of that size to the balls. This way in each draw() you subsequently attach each size on each ball, and every time the size you attach overwrites the previous one... Remember, the window of Processing only refreshes after the draw() has finished! Instead of looping over all the sizes in each draw() you probably want a different size in each draw(). So a way to do that would be:
int numBalls = 5;
int sizeCounter = 0;
int everySoManyFramesChange = 3;
Ball[] balls = new Ball[numBalls];
float[] sizes = {
15, 25, 35, 45, 55, 65
};
void setup() {
size(800, 400);
int l = 0 ;
for (int i = 0; i < numBalls; i++) {
balls[i] = new Ball(random(width), random(height), random(30, 50), i, balls);
}
noStroke();
fill(255, 204);
}
void draw() {
background(0);
for (int i = 0; i < numBalls; i++) {
balls[i].diameter = sizes[sizeCounter];
balls[i].display();
}
if (frameCount%everySoManyFramesChange == 0) sizeCounter=(sizeCounter+1)%sizes.length;
}
class Ball {
float x, y;
float diameter;
float mass;
float vx = 0;
float vy = 0;
int id;
Ball[] others;
Ball(float xin, float yin, float din, int idin, Ball[] oin) {
x = xin;
y = yin;
diameter = din;
mass = 50;
id = idin;
others = oin;
}
void display() {
textSize(32);
fill(0, 255, 0, 255);
ellipse(x, y, diameter, diameter);
fill(255, 0, 0, 255);
text(id, x, y);
}
}
By the way I removed all those print statements because they are making the sketch horribly slow, but be my guest and re-introduce them!