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.
Index › Programming Questions & Help › Programs › sinus in sinus
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
sinus in sinus (Read 1569 times)
i kill bombs
sinus in sinus
Apr 4th, 2010, 6:35pm  
hi everybody,

i'm having a little problem.. i want to draw a sinus into a circle. So from x and y pos i  want to have a sinus shape onto the line. After that i want to insert the values i have in my XML database

Code:

import java.util.ArrayList;
XMLElement xml;
int r = 0;
int maxPlace = 63;
int maxTime = 498-60;
float piCircle = TWO_PI/height; 
float a = 0.0;
ArrayList playerA = new ArrayList ();
ArrayList fromPlaceA = new ArrayList ();
ArrayList toPlaceA = new ArrayList ();
ArrayList setNum = new ArrayList ();



void setup() {
  size(500, 500);
  background(255);
  smooth();

  loadXML();

}

void loadXML() {
  xml = new XMLElement(this, "XML_final.xml");
  XMLElement game = xml.getChild(0);
  int num_dots = game.getChildCount();


  for (int i=0; i<num_dots; i++) {
    XMLElement move = game.getChild(i);
    XMLElement throw_val = move.getChild(3);
    int player = int(move.getChild(0).getContent());
    int timeFirst = int(move.getChild(1).getContent());
    int timeLast = int(move.getChild(2).getContent());
    int dice1 = int(throw_val.getChild(0).getContent());
    int dice2 = int(throw_val.getChild(1).getContent());
    int total = int(move.getChild(4).getContent());
    int fromPlace = int(move.getChild(5).getContent());
    int toPlace = int(move.getChild(6).getContent());

    println(player+"  "+timeFirst+"   "+timeLast+"   "+dice1+"   "+dice2+"   "+total+"   "+fromPlace+"   "+toPlace);
     setNum.add(new Integer(i));
     playerA.add(new Integer(player));
     fromPlaceA.add(new Integer(fromPlace));
     toPlaceA.add(new Integer(toPlace));

  }
  
  float r = width/2;
  float deg = 360/num_dots;
  for (int i=0; i<num_dots-1; i++) {

    float xpos1 = (cos(radians(deg*i))*r) + width/2;
    float ypos1 = (sin(radians(deg*i))*r) + height/2;
    
    float xpos2 = (cos(radians(deg*(i+1)))*r) + (width/2);
    float ypos2 = (sin(radians(deg*(i+1)))*r) + (height/2);
	  float y = (sin(i/20) * 100) + height/2;
	    float xC = 0;
	  for (float x=0; x<10; x++) {
    float yC = (sin(x/20) * 200) + height/2;
    xC++;
    ellipse(xpos1+xC, ypos1+yC, 2, 2);

  }
	  
    line(xpos1, ypos1, xpos2, ypos2);

    ellipse(xpos1, ypos1, 5, 5);
    ellipse(xpos2, ypos2, 5, 5);
    
 
    
    
  }
}


XML database: http://paste2.org/p/757177
sinus:
Code:

void setup() {
  size(500, 500);
  float x = 0;
  for (float i=0; i<100; i++) {
    float y = (sin(i/20) * 200) + height/2;
    x++;
    ellipse(x, y, 2, 2);

  }

}
Back to top
 
 
stopfocus
Re: sinus in sinus
Reply #1 - Apr 5th, 2010, 12:28am  
Whats the problem?
Back to top
 
 
PhiLho 
Re: sinus in sinus
Reply #2 - Apr 5th, 2010, 1:31am  
I see you have solved yourself your problem of XML reading, although I prefer my solution which is not relying on tag order and using a class to store the data, instead of several array lists.

As said above, I am not sure what is your problem exactly.
Back to top
« Last Edit: Apr 10th, 2010, 9:41am by PhiLho  »  
WWW  
i kill bombs
Re: sinus in sinus
Reply #3 - Apr 10th, 2010, 8:06am  
okay, i've drawn it. I want to make a sinus between the two points like this:
http://i44.tinypic.com/149ow0o.jpg

I cannot get that exact shape between these points.
Back to top
 
 
PhiLho 
Re: sinus in sinus
Reply #4 - Apr 10th, 2010, 10:19am  
I still don't get the relation between the "database" (more like a dataset) and a sinus curve.
But well, I think you can compute a sinus value on one coordinate, then scale it, and add it to another curve.
Example:
Code:
float level = 0.1;
float rate = 0.1;

void setup()
{
  size(500, 500);
  smooth();
  frameRate(10);
}

void draw()
{
  background(255);

  noFill();
  stroke(0);
  int curveLength = 400;
  int curveHeight = 200;
  bezier(15, 120, 210, 90, 290, 420, 415, 380);

  stroke(#FF0000);
  int steps = 50;
  for (int i = 0; i < steps; i++)
  {
    float t = i / float(steps);
    float x = bezierPoint(15, 210, 290, 415, t);
    float y = bezierPoint(120, 90, 420, 380, t);
    
    float v = curveHeight * sin(t * TWO_PI * level);
    line(x, y, x, y + v);
  }
  level += rate;
  if (level > 4 || level < 0)
  {
    rate = -rate;
  }
}

Added a bit of animation to spice up the sketch, but it also works in static mode, obviously.
Back to top
 
WWW  
i kill bombs
Re: sinus in sinus
Reply #5 - Apr 10th, 2010, 9:17pm  
Hi, thanks for your help! I that's the sollution for my problem, but still it doesn't look right.

I want to visualize how it's gonna look first and afterwards i want to add the values i have.

This is what i've got right now, but it still doesn't look right. Somehow it takes the sinus from the positions and rotates all together. Not very clean coding though:
Code:

import java.util.ArrayList;
XMLElement xml;
int r = 0;
int maxPlace = 63;
int maxTime = 498-60;
float piCircle = TWO_PI/height; 

ArrayList playerA = new ArrayList ();
ArrayList fromPlaceA = new ArrayList ();
ArrayList toPlaceA = new ArrayList ();
ArrayList setNum = new ArrayList ();
float a = 0.0;
float inc = TWO_PI/25.0;
//int widthMax = width/2;
//int lengthMax
float level = 0.1;
float rate = 0.1;


void setup() {
  size(500, 500);
  background(255);
  smooth();

  loadXML();

}

void loadXML() {
  xml = new XMLElement(this, "XML_final.xml");
  XMLElement game = xml.getChild(0);
  int num_dots = game.getChildCount();


  for (int i=0; i<num_dots; i++) {
    XMLElement move = game.getChild(i);
    XMLElement throw_val = move.getChild(3);
    int player = int(move.getChild(0).getContent());
    int timeFirst = int(move.getChild(1).getContent());
    int timeLast = int(move.getChild(2).getContent());
    int dice1 = int(throw_val.getChild(0).getContent());
    int dice2 = int(throw_val.getChild(1).getContent());
    int total = int(move.getChild(4).getContent());
    int fromPlace = int(move.getChild(5).getContent());
    int toPlace = int(move.getChild(6).getContent());

    println(player+"  "+timeFirst+"   "+timeLast+"   "+dice1+"   "+dice2+"   "+total+"   "+fromPlace+"   "+toPlace);
    setNum.add(new Integer(i));
    playerA.add(new Integer(player));
    fromPlaceA.add(new Integer(fromPlace));
    toPlaceA.add(new Integer(toPlace));

  }

  float r = width/2;
  float deg = 360/num_dots;
  for (int i=0; i<num_dots-1; i++) {

    float xpos1 = (cos(radians(deg*i))*r) + width/2;
    float ypos1 = (sin(radians(deg*i))*r) + height/2;

    float xpos2 = (cos(radians(deg*(i+1)))*r) + (width/2);
    float ypos2 = (sin(radians(deg*(i+1)))*r) + (height/2);
     int curveLength = 200;
  int curveHeight = 50;
     bezier(xpos1, ypos1+2, xpos1, ypos1, xpos2, ypos2, xpos2, ypos2);


  int steps = 30;

    for(int q=0; q<steps; q++) {
	 float t = q / float(steps);
   float x = bezierPoint(xpos1, xpos1, xpos2, xpos2, t);
    float y = bezierPoint(ypos1, ypos1, ypos2, ypos2, t);
  
	  float v = curveHeight * sin(t * TWO_PI/25.0 * 25.0);
    line(x, y, x, y + v);
a = a + inc;

    }

     level += rate;
 
    ellipse(xpos1, ypos1, 5, 5);
    ellipse(xpos2, ypos2, 5, 5);

  }
}
Back to top
 
 
i kill bombs
Re: sinus in sinus
Reply #6 - Apr 10th, 2010, 10:26pm  
PhiLho  wrote on Apr 5th, 2010, 1:31am:
I see you have solved yourself your problem of XML reading, although I prefer my solution which is not relying on tag order and using a class to store the data, instead of several array lists.

As said above, I am not sure what is your problem exactly.

I've looked at your script and indeed it's a better way to interper the data.

tnx!
Back to top
 
 
i kill bombs
Re: sinus in sinus
Reply #7 - Apr 17th, 2010, 6:52am  
hi everybody,

i allmost got it, but i still have the problem that i want to have the values going to the centre of the circle (tried with green). You will see that the red value everything is aimed at the right side. Could somebody help me with my final problem?
Code:

import java.util.ArrayList;
XMLElement xml;
int r = 0;
int maxPlace = 63;
int maxTime = 498-60;
float piCircle = TWO_PI/height; 

ArrayList playerA = new ArrayList ();
ArrayList fromPlaceA = new ArrayList ();
ArrayList dice1A = new ArrayList ();
ArrayList dice2A = new ArrayList ();
ArrayList totalA = new ArrayList ();
ArrayList toPlaceA = new ArrayList ();
ArrayList setNum = new ArrayList ();
float a = 0.0;
float inc = TWO_PI/25.0;
//int widthMax = width/2;
//int lengthMax
float level = 0.1;
float rate = 0.1;


void setup() {
  size(800, 800);
  background(255);
  smooth();

  loadXML();

}

void loadXML() {
  xml = new XMLElement(this, "XML_final.xml");
  XMLElement game = xml.getChild(0);
  int num_dots = game.getChildCount();


  for (int i=0; i<num_dots; i++) {
    XMLElement move = game.getChild(i);
    XMLElement throw_val = move.getChild(3);
    int player = int(move.getChild(0).getContent());
    int timeFirst = int(move.getChild(1).getContent());
    int timeLast = int(move.getChild(2).getContent());
    int dice1 = int(throw_val.getChild(0).getContent());
    int dice2 = int(throw_val.getChild(1).getContent());
    int total = int(move.getChild(4).getContent());
    int fromPlace = int(move.getChild(5).getContent());
    int toPlace = int(move.getChild(6).getContent());

    println(player+"  "+timeFirst+"   "+timeLast+"   "+dice1+"   "+dice2+"   "+total+"   "+fromPlace+"   "+toPlace);
    setNum.add(new Integer(i));
    playerA.add(new Integer(player));
    dice1A.add(new Integer(dice1));
    dice2A.add(new Integer(dice2));    
    totalA.add(new Integer(total)); 
    fromPlaceA.add(new Integer(fromPlace));
    toPlaceA.add(new Integer(toPlace));

  }

  float r = width/2;
  float deg = 360/num_dots;
   for (int i=0; i<num_dots-1; i++) {

    float xpos1 = (cos(radians(deg*i))*r) + width/2;
    float ypos1 = (sin(radians(deg*i))*r) + height/2;

    float xpos2 = (cos(radians(deg*(i+1)))*r) + (width/2);
    float ypos2 = (sin(radians(deg*(i+1)))*r) + (height/2);
  noStroke();
fill(#fd0012,60);
    ellipse(xpos1, ypos1,  ((Integer)totalA.get(i)*10),  ((Integer)totalA.get(i))*10);
    i++;
fill(#36ff27,60);
    ellipse(xpos2, ypos2, ((Integer)totalA.get(i)*10),  ((Integer)totalA.get(i))*10);
stroke(0);
}



  for (int i=0; i<num_dots-1; i++) {

    float xpos1 = (cos(radians(deg*i))*r) + width/2;
    float ypos1 = (sin(radians(deg*i))*r) + height/2;

    float xpos2 = (cos(radians(deg*(i+1)))*r) + (width/2);
    float ypos2 = (sin(radians(deg*(i+1)))*r) + (height/2);
     int curveLength = 200;
  int curveHeight = 100;
     bezier(xpos1, ypos1, xpos1, ypos1, xpos2, ypos2, xpos2, ypos2);

//println("xpos1: "+xpos1+" ypos1: "+ypos1+" xpos2: "+xpos2+" ypos2: "+xpos2);
//  int steps = (Integer)fromPlaceA.get(i) - (Integer)toPlaceA.get(i);
  }
    for (int i=0; i<num_dots-1; i++) {
	 int steps = (Integer)toPlaceA.get(i);
	for(int q=0; q<steps; q++) {
	   float xpos1 = (cos(radians(deg*i))*r) + width/2;
	   float ypos1 = (sin(radians(deg*i))*r) + height/2;

	   float xpos2 = (cos(radians(deg*(i+1)))*r) + (width/2);
	   float ypos2 = (sin(radians(deg*(i+1)))*r) + (height/2);
	   int curveLength = 200;
	   int curveHeight = 100;
	   bezier(xpos1, ypos1, xpos1, ypos1, xpos2, ypos2, xpos2, ypos2);
	
	   float t = q / float(steps);
	   float x = bezierPoint(xpos1, xpos1, xpos2, xpos2, t);
	   float y = bezierPoint(ypos1, ypos1, ypos2, ypos2, t);
  
	  float v = curveHeight * sin(t * TWO_PI/25.0 * 25.0);
	  float u = curveHeight * cos(t * TWO_PI/25.0 );

	  stroke(#fd0012);
	  line(x, y, x + u, y + v);
	  stroke(100);
	  a = a + inc;

    }
     i++;
     int steps2 = (Integer)toPlaceA.get(i);
	for(int q=0; q<steps2; q++) {
	   float xpos1 = (cos(radians(deg*i))*r) + width/2;
	   float ypos1 = (sin(radians(deg*i))*r) + height/2;
	   float xpos1r = (acos(radians(deg*i))*r) + width/2;
	   float ypos1r = (asin(radians(deg*i))*r) + height/2;

	   float xpos2 = (cos(radians(deg*(i+1)))*r) + (width/2);
	   float xpos2r = (acos(radians(deg*(i+1)))*r) + (width/2);
	   float ypos2 = (sin(radians(deg*(i+1)))*r) + (height/2);
	   float ypos2r = (asin(radians(deg*(i+1)))*r) + (height/2);
	   int curveLength = 200;
	   int curveHeight = 50;
	   bezier(xpos1, ypos1, xpos1, ypos1, xpos2, ypos2, xpos2, ypos2);
	   bezier(xpos1r, ypos1, xpos1, ypos1, xpos2, ypos2, xpos2, ypos2);
	   float t = q / float(steps2);
	   float x = bezierPoint(xpos1, xpos1, xpos2, xpos2, t);
	   float y = bezierPoint(ypos1, ypos1, ypos2, ypos2, t);
  
	   float vx = sin(t * TWO_PI/25.0 * 25.0);
	   float ux = cos(t * TWO_PI/25.0 * 25.0);
	    float v = curveHeight * sin(vx)+ (height/2);
	   float u = curveHeight * cos(ux )+(width/2);
	   stroke(100);
	   stroke(#36ff27);
	   line(x, y, x + u, y + v);
	   stroke(100);
	   a = a + inc;

    }

     level += rate;


  }
 


}

Back to top
 
 
i kill bombs
Re: sinus in sinus
Reply #8 - Apr 18th, 2010, 7:43am  
anybody please?
Back to top
 
 
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›