Processing Forum

Screen name:
sychaeusisdead

sychaeusisdead's Profile

2 Posts

3 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

using waveforms to draw down the screen

[0 Replies]
- 05-Aug-2012 08:10 PM
- Forum: Core Library Questions
Hi,
I'm hoping someone can help me find out how to use the audio waveform data to draw both across and down the screen-

Basically, at the moment im just drawing sine waves that overlap each other from right to left- as soon as they hit the edge of the screen, they start again from the left, a little lower. I'm using a mask to create areas that the pattern "skips" over.

I'd like to use minim to do the same with audio input instead of just a sine wave.

So- draw the waveform 'dynamically', hit the edge of the screen, and then keep drawing the waveform a little lower.

Below is the code i have that uses sine waves.
2. Fiber [] fiber;
3. int NUMFIBERS = 3;
4. int STEPS_PER_FRAME = 300; // number of moves made by each fiber per frame (call to draw())
6. PGraphics collisionMask;
8. void setup() {
9. size(800,600);
10. createFibers();
11. createCollisionMask();
12. background(0);
13. }
15. void createFibers () {
16. fiber = new Fiber[NUMFIBERS];
17. for (int i = 0; i < NUMFIBERS; i++) {
18. fiber[i] = new Fiber(0, 0);
19. fiber[i].amp = random(10, 40);
20. // fiber[i].angle = random(360);
21. // fiber[i].freq = 4 * int(random(1, 3));
22. // fiber[i].shade = color(random(200, 250), 64);
23. }
24. }
26. void createCollisionMask() {
27. collisionMask = createGraphics(width, height, JAVA2D);
28. collisionMask.beginDraw();
29. // Clear the collision mask's background to white
30. collisionMask.background(255);
31. // Draw three black circles on the collision mask
32. collisionMask.fill(0);
35. collisionMask.ellipse(0.50*width, 0.35*height, 300, 100);
38. collisionMask.endDraw();
39. }
41. void draw() {
42. for (int j = 0; j < STEPS_PER_FRAME; j++) { // perform a number of steps per frame
43. for (int i = 0; i < NUMFIBERS; i++) { // cycle through each fiber, and apply the following
44. fiber[i].move();
45. }
46. }
47. }
49. class Fiber {
50. float baseY; // the baseline to draw the sine wave around
51. float prevX, prevY; // the last position that a line was drawn to
52. float nextX, nextY; // the next position that a line may be drawn to (current position considered)
53. float angle;
54. float amp;
55. float gap;
56. float freq;
57. color shade;
59. Fiber(float x, float y) {
60. // set the baseline and the previous and next drawing positions to the given position
61. baseY = y;
62. prevX = x;
63. prevY = y;
64. nextX = x;
65. nextY = y;
66. shade = color(250);
67. angle = 0;
68. amp = 40;
69. gap = 4;
70. freq = 4;
71. }
73. void move() {
74. if (baseY > height) return; //contains the sketch to the height of the window
75. strokeWeight(1);
76. stroke(shade);
77. angle += freq;
78. nextX = nextX + 1;
79. nextY = baseY + sin(radians(angle)) * amp; //create the sin wave in the y direction
80. if (collisionMask.get(int(nextX), int(nextY)) != color(0)) { // if the points are not black
81. line(prevX, prevY, nextX, nextY); // draw a line between the previous and next positions
82. prevX = nextX; // update the previous position to match the next position
83. prevY = nextY; // update the previous position to match the next position
84. }
85. if (nextX > width) { // if the next location is beyond the width of the sketch
86. baseY += gap; // update the baseline for the sine wave
87. prevX = 0; // reset the previous and next positions for drawing the fiber
88. prevY = baseY;
89. nextX = 0;
90. nextY = baseY;
91. }
92. }
93. }
Any help would be much appreciated.
Thanks =)

updating object locations

[7 Replies]
- 21-Oct-2010 07:12 AM
- Forum: Programming Questions
I'm pretty new at all this, so.
I'm very, very stuck.

I'm trying to write a program that will draw a pattern of sine waves to the screen by updating the x and y locations of a bunch of "fibers" - objects that leave a trail behind them, basically.

My problem is, i want each line to draw / animate across the page, rather than just appearing (which is what's happening now).

For the life of me i cannot figure out how to work that in with what i've written so far. My code's pasted in below- i would be grateful if anyone could take a look and maybe point out what i ought to change.

Thanks xD

code ~

Fiber [] fiber;
int NUMFIBERS = 150;

float y = 0;
float x;
float nextX;
float nextY;
float angle = 0;
float amp;
float gap;
float freq;

PGraphics collisionMask;

void setup() {
size(800,600);

fiber = new Fiber[NUMFIBERS];
createFibers();//calls a function to create fibers

collisionMask = createGraphics(width, height, JAVA2D);
collisionMask.beginDraw();
// Clear the collision mask's background to white
collisionMask.background(255);
// Draw three black circles on the collision mask
collisionMask.fill(0);
collisionMask.ellipse(0.25*width, 0.50*height, 100, 100);
collisionMask.ellipse(0.50*width, 0.50*height, 200, 200);
collisionMask.ellipse(0.75*width, 0.50*height, 100, 100);
// Tell Processing that we've finished the drawing by calling endDraw()
collisionMask.endDraw();

}

void createFibers () {
for (int i = 0; i < NUMFIBERS; i++)
fiber[i] = new Fiber(x,y);
}

void draw() {
fill(255, 0) ;

for (int i = 0; i < NUMFIBERS; i++){
fiber[i].move();
}
}

class Fiber{
//location
float tempX, tempY;
float nextX, nextY;

int shade;

Fiber(float x, float y) {
    tempX=x;
    tempY=y;
    nextX=x;
    nextY=y;

    shade = int (250);
}

void move(){
    stroke(shade);
    if (y<height){
    amp=(40);
    gap=(4);
    freq=(4);
    float py=0;
    float tempY=0;
    float tempX=0;
    for(int i=0; i<width; i++){
    py = y+sin(radians(angle))*amp;
    if (collisionMask.get(int(py), int(i)) != color(0)){
    nextY=py;
    nextX=i;

    line(tempX,tempY,nextX,nextY);

    tempX=nextX;
    tempY=nextY;
}
    angle+=freq;
    }
    y+=gap;

}
}
}

«Prev
Next »