Now I'm arranging a digital gallery to display this beautiful artworks for my university presentation (either online or only as an interactive display)
I'm doing flash animated gallery in flash.
Is there any way to play my sketch inside this animation?
1. Translate Processing Code into Flash code?
2. Input Java file into Flash animation as a scene/movie clip/etc.?
3. Put a button in Flash Animation that links to the java file.
Any solution is perfect for me as long as it works. Any other suggestions are very welcomed.
Thank you very much.
Here is the code:
* OpenProcessing Tweak of *@*http://www.openprocessing.org/sketch/66366*@* */ /* !do not delete the line above, required for linking your tweak if you re-upload */ PImage img1; PImage img2; PImage img3; // int cellsize = 2; // Dimensions of each cell in the grid int columns, rows; // Number of columns and rows in our system // color myColorWhite = color(255); // save white color color myColorBlack = color(0); // save black color void setup() { size(725, 560, P3D); img1 = loadImage("img1.png"); // Load the image img2 = loadImage("img2.png"); // load it img3 = loadImage("img3.png"); // load it // img1.loadPixels(); img2.loadPixels(); img3.loadPixels(); // println("image data:"); print("img1: " + img1.width+ " x "); println(img1.height); print("img2: " + img2.width+ " x "); println(img2.height); print("img3: " + img3.width+ " x "); println(img3.height); // columns = img1.width / cellsize; // Calculate # of columns rows = img1.height / cellsize; // Calculate # of rows // frameRate(1); // noLoop(); } // func void draw() { background(0); /// // Begin loop for columns for ( int i = 0; i < columns; i++) { // Begin loop for rows for ( int j = 0; j < rows; j++) { // // do some calculations ************************ int x = i*cellsize + cellsize/2; // x position int y = j*cellsize + cellsize/2; // y position int loc = x + y*img1.width; // Pixel array location color c = img1.pixels[loc]; // Grab the color // Calculate a z position as a function of mouseX and pixel brightness (in img2) float z = (mouseX / float(width)) * brightness(img2.pixels[loc]) - 20.0; // use it // // Draw the lines **************************** // Grab the color & compare to white if (img3.pixels[loc] == myColorWhite) { // if white: stroke(c); // set to white // line (x + 200, y + 100, -20, x + 200, y + 100, 20 ); // draw a line line (x + 200, y + 100, -20, x + 200, y + 100, z ); // draw a line } // if else if (img3.pixels[loc] == myColorBlack) { // do nothing } else { // do nothing } // // Draw the rects **************************** // Translate to the location, set fill and stroke, and draw the rect pushMatrix(); translate(x + 200, y + 100, z); fill(c, 204); noStroke(); rectMode(CENTER); rect(0, 0, cellsize, cellsize); popMatrix(); } // for } // for } // func draw //
I have an amazing code that visualises every second of sound from an MP3 track that wonderful
Chrisir helped me with.
But I need to change it so that it visualises every second of life sound instead of MP3 treck, I've found a code that use this life sound minim, then merged it to my code and.., it doesn't work.
I probably messed up the code, can anyone please help to fix so it works?
Looking forward for any piece of advice.
// visualizes sound in 1-second-blocks //
import ddf.minim.analysis.*; import ddf.minim.*;
Minim minim; AudioInput in; FFT fft; float x = 0; float y = 0; int lastTime=0; float oldCol=0.0; int count=0; // // void setup() { size (78*9, 78*9); // (860, 700); background(0); noStroke(); minim = new Minim(this); // setup audio input in = minim.getLineIn(Minim.MONO, bufferSize, sampleRate);
fft = new FFT(in.bufferSize(), in.sampleRate());
// suppress windowing inside FFT - we'll do it ourselves fft.window(FFT.NONE); track.loop(); lastTime=millis(); } // void draw() { // for (int i = 0; i < track.left.size(); i++) { // oldCol sums up the colors for one rect oldCol=oldCol+map( abs(track.left.get(i)), 0, .2, 0, 255); // "count" counts how many colors for one rect have been count count++; // the average of all count colors is the color fill( oldCol/count ); rect(x, y, 8, 8); // has 1 second passed? if (1000 <= millis() - lastTime) { // next rect x+=9; lastTime=millis(); // reset our colors count=0; oldCol=0; } // if // if ( x >= width ) { // start a new line on the left y += 9; x = 0; } // if } // for } // func // // void stop() { // always close Minim audio classes when you are done with them track.close(); minim.stop(); super.stop(); } // for //
PImage img; // The source image PImage img2; // declare it int cellsize = 2; // Dimensions of each cell in the grid int columns, rows; // Number of columns and rows in our system
void setup() { size(750, 500, P3D); img = loadImage("img1.jpg"); // Load the image img2 = loadImage("img2.jpg"); // load it columns = img.width / cellsize; // Calculate # of columns rows = img.height / cellsize; // Calculate # of rows }
void draw() { background(0); // Begin loop for columns for ( int i = 0; i < columns; i++) { // Begin loop for rows for ( int j = 0; j < rows; j++) { int x = i*cellsize + cellsize/2; // x position int y = j*cellsize + cellsize/2; // y position int loc = x + y*img.width; // Pixel array location color c = img.pixels[loc]; // Grab the color // Calculate a z position as a function of mouseX and pixel brightness float z = (mouseX / float(width)) * brightness(img2.pixels[loc]) - 20.0; // use it // Translate to the location, set fill and stroke, and draw the rect pushMatrix(); translate(x + 200, y + 100, z); fill(c, 204); noStroke(); rectMode(CENTER); rect(0, 0, cellsize, cellsize); popMatrix(); } } }
'Mouse horizontal location controls breaking apart of image and Maps pixels from a 2D image1 into 3D space using image2 as a mapping guide.
Pixel brightness of image2 controls translation of image1 along z axis.'
In other words when I apply this code for two images
Pixels of image1 that situated in the same positions where the brighter pixels of image2 are, comes up. So image2 becomes a 'map' of positions for the pixels of image1.
That's how this code works at the moment. What I need to do is to incorporate third image into this code (image3).
Image3 looks like a pattern of black or white cells.
The size of all 3 images is the same.
I need black cells of image3 not to show, and white cells to grow and create white lines (rays) behind image1. The length of the white rays should be determined by the same 'z' mapped by image 2.
This is an illustration of this idea.
Please help guys to change the existing coding to be able to do that.
I'm really really looking forward to hearing from you.
This is an amaizing visualising tool, but now I want to achieve accurate visual of every second of the sound.
And I have no Idea how to do that (I'm still very much a beginner in Processing)
My tutor told was going to help me with that but he is obviously too busy now, and also I'm eager to surprise him with any result I can ;)
But what he said was that an easier solution would be to just examine the buffer as the sound is playing, which would mean that to make the image would take 90 minutes which is absolutely fine for me!
If I may ask for your help in programming this process it would be amazing!
So here is the short outline of what I'm trying to achieve:
I have sound files *.mp3 they are very long soundtracks: 90-120 minutes.
what I need to do is to convert sound intensity (volume) into grayscale colour to visualize each second of the soundtrack.
for example if a soundtrack is 90 minutes = 5400 sec
than the artwork is a square of 5400 frames (sides: 73x73 frames)
(I make each frame 9x9 pixels)
every frame represents the volume of the soundtrack by grayscale colour:
the louder the sound the lighter the frame.
So silence will create black frames, extremely loud will appear white.
If my description needs more clarity, please let me know.
Please guys, let me know, if it is at all possible for you to help me with this project?
I will really appreciate, if it is.
Thanks
And yes, the final image should look something like this:
I need some help with my programming again. I have a text document of subtitles of a film.
I need a code that will help me to visualise them.
In this text file subtitles appear like this:
1 00:00:15,549 --> 00:00:17,798 What is your first name, your last name?
2 00:00:18,680 --> 00:00:20,037 My name is Yuri Zhary.
3 00:00:28,760 --> 00:00:31,568 Where did you come from?
4 00:00:38,640 --> 00:00:41,799 l came from...Kharkov.
......
653 01:36:34,359 --> 01:36:35,939 Everything will be...
654 01:37:49,119 --> 01:37:52,279 Would you rather have a boy or a girl?
655 01:42:32,520 --> 01:42:36,140
I need to convert them into dots on a grid.
These subtitles are of a film which is 100 minutes long, I create a grid of every second of the film (so there is 100x60=6000 seconds). So the grid is 78x78 frames (that’s how many seconds there are approx), each frame is 9 pixels, so the grid is 697x697 pixels.
• The seconds of the film that has the subtitles should be represented by the dots in the center of the frame.
• The seconds of the film that has no subtitles should be represented by the empty black frames.
This is a picture illustrating this idea.
Can you please help me to program this process?
I will really appreciate any help.
I'm still a beginner but I try very hard to manage Processing, so I'm sorry in advance for any stupid questions I may ask.
Thanks a lot, you guys are always incredibly helpful and friendly.
Regards,
Ollena
Here is a brilliant code from the Example section of Processing site
PImage img; // The source image
int cellsize = 2; // Dimensions of each cell in the grid
int columns, rows; // Number of columns and rows in our system
void draw() {
background(0);
// Begin loop for columns
for ( int i = 0; i < columns; i++) {
// Begin loop for rows
for ( int j = 0; j < rows; j++) {
int x = i*cellsize + cellsize/2; // x position
int y = j*cellsize + cellsize/2; // y position
int loc = x + y*img.width; // Pixel array location
color c = img.pixels[loc]; // Grab the color
// Calculate a z position as a function of mouseX and pixel brightness
float z = (mouseX / float(width)) * brightness(img.pixels[loc]) - 20.0;
// Translate to the location, set fill and stroke, and draw the rect
pushMatrix();
translate(x + 200, y + 100, z);
fill(c, 204);
noStroke();
rectMode(CENTER);
rect(0, 0, cellsize, cellsize);
popMatrix();
}
}
}
'Mouse horizontal location controls breaking apart of image and Maps pixels from a 2D image into 3D space.
Pixel brightness controls translation along z axis.'
So my question: is it possible to adjust this code so that it manipulates 2 images instead of one?
I have image 1 and image 2 which are the same size,
i need to bring the pixels of image 1 the same way as if I used this code for image 2.
So that when I apply a new code for these two images
brighter pixels of not image 1 come up, but the pixels that situated on the same positions where the brighter pixels of image 2 are.
so image 2 should become the 'map' of positions for pixels of image 1
I've made a little draft to explain what i mean
hope it make sense
please ask if anything is unclear
I'm a very beginner in processing so if you could tell me how exactly i should change the code i'll be very grateful,
Please help to turn the flow of my visual. at the moment it's right to left, I need it left to right, i struggle for a week already and can't find the way to do it. I'm pretty new in Processing so will appreciate any help.
Processing Forum is always very helpful. Thank you guys.
Hi there,
I'm doing some experiments with sound visuals. Can anyone please help me to change the direction in the existing coding, so that the sound 'flows' left-to-right instead of bottom-to-top (the drawing is attached).
I need to visualise a sound track for my graphic design project at Uni,
I'm not a programmer that's why I try to do it manually, but the result is not very accurate and also it takes me days to work on a couple of seconds of the track.
I was hoping maybe someone can help me to code it?
My track format is .AC3
I need to turn a soundtrack into a static 2D image.
Here are the parameters:
sounds are visualised by circles
sounds are forming up rows from left to right.
1 row = 20 seconds
1 circle = 0,2 second
there should be 100 circles in a row
and there should be 100 rows
Diameters of the circles are determined by intensity/volume of the sound
Louder sounds = 3mm diameter circles,
quite sounds = 0mm diameter
the size of the circles changes relatively
Please find attached the draft image of how it should look like. Hope it makes sense.
I'm very new in sound visualisation as well as processing itself, that's why I will rely on you guys, if you have any suggestions on how to visualise a sound track and convert it into a 2D pattern.
For my project I need to resize 300 000 images (*.jpeg) from a folder on my computer to the size 5x7 pixels.
Now I manually take the images from my folder, resize and put them together in a particular order (left to right, row after row - just as letters in a text) which creates a pattern. I use Photoshop to reduce the size of every image and to put them together. So in the end there should be a jpeg of the following size: 547 images wide BY 547 images high (equals 547x547=~300.000)
therefore:
547 images x 7 pixels = 3829 pixels WIDE
547 images x 5 pixels = 2735 pixels HIGH
(based on the size of the reduced film frames the final pattern will equal)
To do it manually it will take me ... months.
Is there any way to do it using Processing. Please help.
I am a beginner so can you please explane in details?
