code involving fading, time and sound - image

I am a student learning to become a comic artist.
Now we have this course called "Media" in wich we have to make an interactive program using a program called processing.
I have to show this to a jury in 2 days but I am litteraly stuck with these codes for the past 3 weeks, I just can't get it to work the way I want it to, so here I ask you if anyone would be able to help me with this.
What I want to make :
Basically I wanted it to be interactive without being interactive, So I tried to accomplish this by making a Buddha-themed program.
So what does it have to do? I think it shouldn't be all that hard, all I want it to do is take the amount of sound it gets, and when the sound is below a certain amount, the screen, wich is completely white, will start fading to black, whenever there is sound it will rapidly become white again.
So after 30 seconds of no sound it should be completely black and it should go into a new mechanism where it will start fading the black screen ( there is a picture with the word "emptyness" behind it ) so that word should start becoming visible very slowly ( approx 30 seconds again ) then when that picture is completely visible it should start fading again and start showing a picture of a buddha ( wich is behind that picture with the word ) and that's all I want it to do.
So now I will show you what I have, I've got the screen fading whenever it's really quite, but that's where I get stuck, I don't know how to set the timer, how to set the images behind it etc :
import ddf.minim.*;
Minim minim;
AudioInput in;
PImage img;
int a = 125;//sound value
int fade = 0;//starting fade, big fade is darker
int stmin = 2; //fadestep darker
int stplus = 20; //fadestep lighter
float gw = 0.001;//sensitivity smaller = more sensitive
void setup() {
img = loadImage("emptyness.jpg");
background(0);
size(1000, 1000);
frameRate(10); // Maximum 30 frames/images per second
minim = new Minim(this);
// get a line in from Minim, default bit depth is 16
in = minim.getLineIn(Minim.STEREO, 640);
}
void draw() {
image(img, 10,10);
fill(255);
rect(0,0,1000,1000);
if (abs(in.left.get(a))> (gw)) {
fade = fade-stplus;
}
else {
fade = fade+stmin;
}
fade = constrain(fade,0,300);
fill(0,fade);
rect(0,0,1000,1000);
}
void stop()
{
// always close Minim audio classes when you are done with them
in.close();
minim.stop();
super.stop();
}
I really hope someone can help me with this for posting this here really is my last resort, I have only 2 days left untill my jury, i've been trying, getting crashes, and the worst thing of all, I really don't understand anything about java or processing cause we never got any lessons about it, they just expected us to 'find out ourselves'
thanks for reading this, and hopefully someone can help me
greetz and lots of thanks in advance

The advice I gave you on the Processing forum still stands: You have to break your problem down into smaller individual steps and take on those steps one at a time instead of trying to tackle the whole thing at once.
Can you create a simple sketch that just fades to black after 30 seconds?
Can you create a simple sketch that fades to black after 30 seconds, but then fades back to white when you click the mouse?
Can you create a simple sketch that shows you whether it can hear sound?
Now can you combine those ideas to create a sketch that fades to black after 30 seconds, but fades back to white when it hears a sound?
This might seem like a lot for 2 days (and that's a lesson in time management), but you'll have better luck if you take a step back and focus on one small thing at a time instead of your whole project. That will also allow you to ask more specific questions, as this one is too broad to really answer without doing your homework for you. And you don't want to cheat, do you?

Related

switch screen and display image in Processing

I am making an animation using Processing 3, I would like to know how can I switch screen smoothly?
each screen contains different images.
Also, if for example, I would like an image to appear at the end, how can I do that, is it to do with time?
Stack Overflow isn't really designed for general "how do I do this" type questions. It's for specific "I tried X, expected Y, but got Z instead" type questions. You need to break your problem down into smaller steps, and you need to be much more specific about exactly what you want to do: what do you mean by switching screens smoothly? What screens? What does smoothly mean in this context?
But I'll try to help in a general sense.
First, you need to store the state of your sketch in variables at the top of your code. This might be a series of boolean values representing which screen should be shown. Then you need to change those variables when you want the display to change: this can be in response to user input, or like you said a timer of some kind, or a combination of the two. Finally, you just need to draw each frame based on those variables.
Here's an example that stores a very simple state in a single variable, sets the variable in some event functions, and uses that variable to figure out what to draw each frame:
boolean showRed = false;
void mousePressed(){
showRed = true;
}
void keyPressed(){
showRed = false;
}
void draw(){
if(showRed){
background(255, 0, 0);
}
else{
background(0);
}
}
This is just a general answer to show you the kind of thing you need to be doing. Again, you need to break your problem down into smaller and more specific steps, and then take those smaller steps on one at a time. If you get stuck, post a MCVE in a new question and we'll go from there. Good luck.

graphics card getting activated during video? A test using a java (Processing) program

I have an application I was running that I created with Processing where I was drawing a lot of objects to the screen. Normally the sketch runs at 60 fps and predictably when a lot of stuff is drawn to the screen, it starts to reduce. I wanted to see what changing Processing's renderer would do, as there is a P3D option when you set the size. P3D is a '3D graphics renderer that makes use of OpenGL-compatible graphics hardware.'
I noticed that the performance improved when i used this in that I could draw more objects to the screen before framerate dropped, without really having to change anything in the code. Then i noticed something odd.
I started up the computer the next day and ran the program again and noticed that suddenly the framerate was lower, around 50 fps. There didn't seem to be anything wrong with my computer as it wasn't doing anything else. Then I thought it probably has something to do with the graphics card. I opened a youtube video and it seemed to be fine. Then I ran the sketch again and it went back up to 60fps.
I just want to know what might be going on here hardware wise. I'm using an NVIDIA GTX970 (i think its OC edition). It seems to me that watching the video sort of jump started the card and made it perform on the processing sketch properly. Why didn't the sketch itself make that happen?
as an example:
Vector<DrawableObject> objects;
void setup()
{
size(400,400, P3D); /// here is the thing to change. P3D is an option
objects = new Vector<DrawableObject>();
for(int i=0;i<400;i++)
{
objects.add(new DrawableObject());
}
}
void draw()
{
for(int i=0; i<objects.size(); i++)
{
DrawableObject o = objects.get(i);
o.run();
}
}

NSWindow Flip Animation - Like iWork

I'm attempting to implement window-flipping identical to that in iWork -
https://dl.dropbox.com/u/2338382/Window%20Flipping.mov
However, I can't quite seem to find a straightforward way of doing this. Some tutorials suggest sticking snapshot-images of both sides of the window in a bigger, transparent window and animate those. This might work, but seems a bit hacky, and the sample code is always bloated. Some tutorials suggest using private APIs, and since this app may be MAS-bound, I'd like to avoid that.
How should I go about implementing this? Does anyone have any hints?
NSWindow+Flipping
I've rewritten the ancient code linked below into NSWindow+Flipping. You can grab these source files from my misc. Cocoa collection on GitHub, PCSnippets.
You can achieve this using CoreGraphics framework. Take a look at this:
- (void) flipWithDuration: (float) duration forwards: (BOOL) forwards
{
CGSTransitionSpec spec;
CGSTransitionHandle transitionHandle;
CGSConnection cid = CGSDefaultConnection;
spec.type = CGSFlip;
spec.option = 0x80 | (forwards ? 2 : 1);
spec.wid = [self windowNumber];
spec.backColor = nil;
transitionHandle = -1;
CGSNewTransition (cid, &spec, &transitionHandle);
CGSInvokeTransition (cid, transitionHandle, duration);
[[NSRunLoop currentRunLoop] runUntilDate:
[NSDate dateWithTimeIntervalSinceNow: duration]];
CGSReleaseTransition (cid, transitionHandle);
}
You can download sample project: here. More info here.
UPDATE:
Take a look at this project. It's actually what You need.
About this project:
This category on NSWindow allows you to switch one window for
another, using the "flip" animation popularized by Dashboard widgets.
This was a nice excuse to learn something about CoreImage and how to
use it in Cocoa. The demo app shows how to use it. Scroll to the end
to see what's new in this version!
Basically, all you need to do is something like:
[someWindow flipToShowWindow:someOtherWindow forward:YES];
However, this code makes some assumptions: — someWindow (the initial
window) is already visible on-screen. — someOtherWindow (the final
window) is not already visible on-screen. — Both windows can be
resized to the same size, and aren't too large or complicated — the
latter conditions being less important the faster your CPU/video card
is. — The windows won't go away while the animation is running. — The
user won't try to click on the animated window or do something while
the animation is running.
The implementation is quite straightforward. I move the final to the
same position and size as the initial window. I then position a larger
transparent window so it covers that frame. I render both window
contents into CIImages, hide both windows, and start the animation.
Each frame of the animation renders a perspective-distorted image into
the transparent window. When the animation is done, I show the final
window. Some tricks are used to make this faster; the flipping window
is setup only once; the final window is hidden by setting its alpha to
0.0, not by ordering it out and later ordering it back in again, for instance.
The main bottleneck is the CoreImage filter, and the first frame
always takes much longer to render — 4 or 6 times what it takes for
the remaining frames. I suppose this time is spent with setup and
downloading to the video card. So I calculate the time this takes and
draw a second frame at a stage where the rotation begins to show. The
animation begins at this point, but, if those first two frames took
too long, I stretch the duration to make sure that at least 5 more
frames will get rendered. This will happen with slow hardware or large
windows. At the end, I don't render the last frame at all and swap the
final window in instead.

Slowing down looping animation as3

This is the first time I've ever posted in a forum, so thanks in advance for anyone who takes the time to read/answer this question.
What I'm trying to create is basically a flipping coin animation, which starts off turning very fast and then slows down to stop with a (randomly generated) side facing upwards after about 8 seconds.
I've done the animation of a complete flip, which lasts about half a second, and made it in to a movieclip... now I'm stuck!
Any ideas how I might go about doing this in actionscript3?
The fastest way around this would be to use some very basic actionscript. First, create 2 animations (One heads, one tails). Now, you only need a single frame for this and don't need to place the movieclips on the stage. Use the following or similar code:
var whichSide:int = 0;
var coin1:coinAnimation1 = new coinAnimation1();
var coin2:coinAnimation2 = new coinAnimation2();
whichSide = math.Round(math.Random(1));
if(whichSide == 1)
{
addChild(coin1);
}
else
{
addChild(coin2);
}
Just don't forget to right click the movieclip and export for actionscript, giving the movieclips the class of: coinAnimation1 and coinAnimation2.
Hope this helps.
I've accomplished such animation on ´Keyframes´ using the Tweener class. You can easily tween on the keyframe parameter with specific transition...
Basic example:
Tweener.addTween(myMovieClip, {_frame:10, time:2.5});
More information about Tweener here

HTC Desire specific OpenGL ES 1 frame rate - can't get it right

I am trying to get a quite simple openGL ES 1 program run a smooth solid 60fps on a couple devices out there, and I get stuck on HTC desire. The phone itself is quick, snappy, powerful, and overall a breeze to use ; however, I can't seem to display anything fullscreen at 60fps with OpenGL. After getting stuck for a long time with my app, I decided to make a test app with code right out the sample code from the documentation.
Here is what I am doing. Simple initialization code with GLSurfaceView. I have three versions of onDrawFrame, all dead simple. One is empty. One contains only glClear. One contains just enough state to only draw a fullscreen quad. Trace times before, and after. There is no view other than my GLSurfaceView in my program. I can't explain the times I get.
In all cases, the onDrawFrame function itself always finishes under 2ms. But very often, onDrawFrame does not get called again before 30~40ms, dropping my frame rate all the way to 30fps or less.
I get around 50fps with an empty onDrawFrame, 45 with glClear and 35 with a quad.
The same code runs at 60 fps on the HTC Magic, on the Samsung Galaxy S, on the Sharp ISO1. Sony Experia X10 caps at a solid 30fps because of its screen. I have been doing much more complicated scenes at a solid 60fps on the HTC Magic which is very underpowered compared to the Desire. I don't have a Nexus One in handy to test.
Sure, I except buffer swapping to block for a couple milliseconds. But it just jumps over frames all the time.
Trying to find out what the phone is doing outside of the onDrawFrame handler, I tried to use Debug.startMethodTracing. There is no way I can get the trace to reflect the actual time the phone spends out of the loop.
At the end of onDrawFrame, I use startMethodTracing then save the current time (SystemClock.uptimeMillis) in a variable. At the start of the next one I Log.e the time difference since the function last exited, and stopMethodTracing. This will get called over and over so I arrange for stopping once I get a trace for an iteration with a 40+ ms pause.
The time scale on the resulting trace is under 2ms time, as if the system was spending 38ms outside of my program.
I tried a lot of things. Enumerating EGL configs and try them all one after the other. Just to see if it changed anything, I switched to a render when dirty scheme requesting a redraw at each frame. To no avail. Whatever I do, the expected gap of 14~16ms to swap buffers will take 30+ms around half the time, and no matter what I do it seems like the device is waiting for two screen refreshes. ps on the device shows my application at around 10% cPU, and System_server at 35%. Of course I also tried the obvious, killing other processes, rebooting the device... I always get the same exact result.
I do not have the same problem with canvas drawing.
Does anyone know why the Desire (and afaict the Desire only) behaves like this ?
For reference, here is what my test code looks like :
public class GLTest extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mGLView = new GLSurfaceView(this);
mGLView.setRenderer(new ClearRenderer());
setContentView(mGLView);
}
#Override
protected void onPause() {
super.onPause();
mGLView.onPause();
}
#Override
protected void onResume() {
super.onResume();
mGLView.onResume();
}
private GLSurfaceView mGLView;
}
class ClearRenderer implements GLSurfaceView.Renderer {
public void onSurfaceCreated(GL10 gl, EGLConfig config) {}
public void onSurfaceChanged(GL10 gl, int w, int h) { gl.glViewport(0, 0, w, h); }
long start;
long end;
public void onDrawFrame(GL10 gl)
{
start = System.currentTimeMillis();
if (start - end > 20)
Log.e("END TO START", Long.toString(start - end));
// gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);
end = System.currentTimeMillis();
if (end - start > 15)
Log.e("START TO END", Long.toString(end - start));
}
}
You should look at this http://www.google.com/events/io/2010/sessions/writing-real-time-games-android.html
He recommends that you keep the framerate at 30fps not 60fps.
Maybe I've got the answer: The opengl driver may decide to do a large part of the actual rendering in a later step. This step is by default done right after onDrawFrame and seems to be the reason why the device is idling after leaving the method. The good news is that you can include this step right into your onDrawFrame method: just call gl.glFinish() - this will do the final rendering and returns when it is finished. There should be no idle time afterwards. However, the bad news is that there was actually no idling time, so you won't be able to get this time back (I had some illusions about how fast my rendering was... now I have to face the real slowness of my implementation ;) ). What you should know about glFinish: There seems to be an os level bug that causes deadlocks on some htc devices (like the desire), which is still present in 2.2 as far as i understood. It seems to happen if the animation runs for some hours. However, on the net exists a patched opengl surface view implementation, which you could use to avoid this problem. Unfortunately I don't have the link right now, but you should be able to find it via google (sorry for that!). There might be some way to use the time spent in glFinish(): It may be gpu activity for some (all?) part, so the cpu would be free to do other processing.

Resources