We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
IndexProgramming Questions & HelpSyntax Questions › Help for a newbi french student
Page Index Toggle Pages: 1
Help for a newbi french student (Read 821 times)
Help for a newbi french student
Dec 2nd, 2008, 9:06pm
 
hey
I am a french student from a school design and i have processing courses during my cursus.  
For next week, I have to do my self-portrait. Here is a draft version:  http://turing.lecolededesign.com/i2/I2C_2008-2009/processing/autoportrait1/DURAND_Emmanuel/  . It is very very basic (I only used lines).
Now  I would like to add animation and interactivity in my self-portrait: for example I would like my face to be drawn automatically.

Here is an extract of my new code (it's an eye):

void setup (){
 size(280,320);
 frameRate (30);
 smooth();
}

void draw () {
 background(128);
 float m = millis(); // = m en milliseconde
 float a = m/10000; // = time en seconde

 line(98,135,(98-(3*a)) ,(135-(3*a)) );
 line(95,132,(95-(7*a)) ,130 );
 line(88,130,(88-(8*a)) ,130 );
 line(80,130,(80-(7*a)) ,(130+(2*a)) );
 line(73,132,(73-(7*a)) ,(132+(4*a)) );
 line(66,136,(66+(1*a)) ,(136-(3*a)) );
 line(67,133,(67+(6*a)) ,(133-(5*a)) );
 line(73,128,(73-(12*a)) ,(128+(7*a)) );
 line(61,135, 61 ,(135+(3*a)) );
 line(61,138,(61+(2*a)) ,138  );
 line(63,138,63 ,(138+(3*a)) );
 line(63,141,(63-(3*a)) ,(141+(3*a)) );
 line(60,144,(60+(3*a)) ,144  );
 line(63,144,(63+(4*a)) ,(144+(2*a)) );
 line(67,146,67 ,(146-(3*a)) );
 line(67,143,(67+(8*a)) ,(143-(6*a)) );
 line(75,137,75,(137+(3*a)) );
 line(75,140,(75+(3*a)) ,(140+(5*a)) );
 line(78,145,(78+(8*a)) ,(145+(2*a)) );
 line(85,147,(85+(7*a)) ,(147-(3*a)) );
 line(92,144,(92+(1*a)) ,(144-(5*a)) );
 line(93,139,(93+(1*a)) ,(139-(5*a)) );
 line(94,134,(94+(8*a)) ,(134+(3*a)) );
 line(102,137,(102+(4*a)) ,(137+(4*a)) );
 line(106,141,106 ,(141+(4*a)) );
 line(106,145,(106-(7*a)) ,(145+(1*a)) );
 line(99,146,(99-(4*a)) ,(146+(2*a)) );
 line(95,148,(95-(9*a)) ,(148+(1*a)) );
 line(86,149,(86-(2*a)) ,149 );
 line(84,149,(84-(3*a)) ,(149-(1*a)) );
 line(81,148,(81-(7*a)) ,(148-(1*a)) );
 line(74,147,(74-(3*a)) ,(147-(2*a)) );
 line(71,145,(71+(4*a)),(145-(5*a)) );
 if (a > 1){
   delay(100000);
 }
}


My problem: all lines are drawing at the same time. I would like the first line to start alone, and once this first line is completed, then the second line to start to draw:

example:

 line(98,135,(98-(3*a)) ,(135-(3*a)) );
if ((135-(3*a)) = 132) {
      continue }
 line(95,132,(95-(7*a)) ,130 );
if ((95-(7*a)) = 88) {
      continue }


I hope I was clear enough
Thank you very much

Emmanuel

Re: Help for a newbi french student
Reply #1 - Dec 2nd, 2008, 11:48pm
 
First thought is to replace lot of code with lot of data. Here is a naive first approach, with inconvenience that arrays are unrelated, and errors are hard to track. A better approach would use classes, I will show how later.
Code:
void setup()
{
 size(280,320);
 frameRate(30);
 smooth();
}

int[] anchorsX =
{
 98, 95, 88, 80, 73, 66, 67, 73,
 61, 61, 63, 63, 60, 63, 67, 67,
 75, 75, 78, 85, 92, 93, 94, 102,
 106, 106, 99, 95, 86, 84, 81, 74,
 71
};
int[] anchorsY =
{
 135, 132, 130, 130, 132, 136, 133, 128,
 135, 138, 138, 141, 144, 144, 146, 143,
 137, 140, 145, 147, 144, 139, 134, 137,
 141, 145, 146, 148, 149, 149, 148, 147,
 145
};
int[] endsX =
{
 98,-3,
 95,-7,
 88,-8,
 80,-7,
 73,-7,
 66,1,
 67,6,
 73,-12,
 61,0,
 61,2,
 63,0,
 63,-3,
 60,3,
 63,4,
 67,0,
 67,8,
 75,0,
 75,3,
 78,8,
 85,7,
 92,1,
 93,1,
 94,8,
 102,4,
 106,0,
 106,-7,
 99,-4,
 95,-9,
 86,-2,
 84,-3,
 81,-7,
 74,-3,
 71,4
};
int[] endsY =
{
 135,-3,
 130,0,
 130,0,
 130,2,
 132,4,
 136,-3,
 133,-5,
 128,7,
 135,3,
 138,0,
 138,3,
 141,3,
 144,0,
 144,2,
 146,-3,
 143,-6,
 137,3,
 140,5,
 145,2,
 147,-3,
 144,-5,
 139,-5,
 134,3,
 137,4,
 141,4,
 145,1,
 146,2,
 148,1,
 149,0,
 149,-1,
 148,-1,
 147,-2,
 145,-5
};

void draw()
{
float m = millis(); // = milliseconds
float a = m/10000.0; // = time in tenths of seconds
 background(128 + (a > 1 ? 64 : 0));
 if (a > 1) a = 1;

 for (int i = 0; i < anchorsX.length; i++)
 {
   line(anchorsX[i], anchorsY[i],
       endsX[2*i] + endsX[2*i + 1] * a,
       endsY[2*i] + endsY[2*i + 1] * a
   );
 }
}

It is the same effect, a first step toward your goal...
Re: Help for a newbi french student
Reply #2 - Dec 3rd, 2008, 12:05am
 
OK, here is the progressive drawing: replace the draw() routine above with the following code:
Code:

int lineNb = 0;
float linePercent = 0;
boolean bFinished;

void draw()
{
 background(128);
 if (!bFinished)
 {
   linePercent += 0.1;
   if (linePercent > 1.0)
   {
     lineNb++;
     linePercent = 0;
     if (lineNb >= anchorsX.length)
     {
       lineNb = anchorsX.length - 1;
linePercent = 1.0; // Fully draw last line
       bFinished = true;
     }
   }
 }

 // Fully draw all the previous lines
 for (int i = 0; i < lineNb; i++)
 {
   line(anchorsX[i], anchorsY[i],
       endsX[2*i] + endsX[2*i + 1],
       endsY[2*i] + endsY[2*i + 1]
   );
 }
 // Partially draw the current line
 line(anchorsX[lineNb], anchorsY[lineNb],
     endsX[2*lineNb] + endsX[2*lineNb + 1] * linePercent,
     endsY[2*lineNb] + endsY[2*lineNb + 1] * linePercent
 );
}
Re: Help for a newbi french student
Reply #3 - Dec 3rd, 2008, 12:32am
 
OK, the version with class isn't so much structured, I forgot Java lacks a good syntax to initialize arrays of objects...
Beside, it looks a bit like your first code, only more convoluted (but doing what you wanted!).
But one advantage is that now you can read the data out of a text file, for example, and feed the program with that: it is more flexible.
Code:
class ProgressiveLine
{
 private final int anchorX, anchorY;
 private final int endX, evolX;
 private final int endY, evolY;
 public static final int PARAM_NB = 6;

 ProgressiveLine(int ax, int ay,
     int ex, int evx, int ey, int evy)
 {
   anchorX = ax;
   anchorY = ay;
   endX = ex; evolX = evx;
   endY = ey; evolY = evy;
 }

 void DrawFull()
 {
   Draw(1.0);
 }
 void Draw(float linePercent)
 {
   line(anchorX, anchorY,
       endX + evolX * linePercent,
       endY + evolY * linePercent
   );
 }
}

ProgressiveLine[] lines;

void setup()
{
 size(280,320);
 frameRate (30);
 smooth();

 lines = new ProgressiveLine[data.length / ProgressiveLine.PARAM_NB];
 for (int i = 0, lineNb = 0;
     i < data.length;
     i += ProgressiveLine.PARAM_NB, lineNb++)
 {
   lines[lineNb] = new ProgressiveLine(
       data[i],     data[i + 1], data[i + 2],
       data[i + 3], data[i + 4], data[i + 5]
   );
 }
}

int[] data =
{
  98, 135,  98,  -3, 135, -3,
  95, 132,  95,  -7, 130,  0,
  88, 130,  88,  -8, 130,  0,
  80, 130,  80,  -7, 130,  2,
  73, 132,  73,  -7, 132,  4,
  66, 136,  66,   1, 136, -3,
  67, 133,  67,   6, 133, -5,
  73, 128,  73, -12, 128,  7,
  61, 135,  61,   0, 135,  3,
  61, 138,  61,   2, 138,  0,
  63, 138,  63,   0, 138,  3,
  63, 141,  63,  -3, 141,  3,
  60, 144,  60,   3, 144,  0,
  63, 144,  63,   4, 144,  2,
  67, 146,  67,   0, 146, -3,
  67, 143,  67,   8, 143, -6,
  75, 137,  75,   0, 137,  3,
  75, 140,  75,   3, 140,  5,
  78, 145,  78,   8, 145,  2,
  85, 147,  85,   7, 147, -3,
  92, 144,  92,   1, 144, -5,
  93, 139,  93,   1, 139, -5,
  94, 134,  94,   8, 134,  3,
 102, 137, 102,   4, 137,  4,
 106, 141, 106,   0, 141,  4,
 106, 145, 106,  -7, 145,  1,
  99, 146,  99,  -4, 146,  2,
  95, 148,  95,  -9, 148,  1,
  86, 149,  86,  -2, 149,  0,
  84, 149,  84,  -3, 149, -1,
  81, 148,  81,  -7, 148, -1,
  74, 147,  74,  -3, 147, -2,
  71, 145,  71,   4, 145, -5
};

int lineNb = 0;
float linePercent = 0;
boolean bFinished;

void draw()
{
 background(128);
 if (!bFinished)
 {
   linePercent += 0.1;
   if (linePercent > 1.0)
   {
     lineNb++;
     linePercent = 0;
     if (lineNb >= lines.length)
     {
       lineNb = lines.length - 1;
       linePercent = 1.0;  // Fully draw last line
       bFinished = true;
     }
   }
 }

 // Fully draw all the previous lines
 for (int i = 0; i < lineNb; i++)
 {
   lines[i].DrawFull();
 }
 // Partially draw the current line
 lines[lineNb].Draw(linePercent);
}
Page Index Toggle Pages: 1