lines

btot

Got another question for a second project. I want to have different lines labeled with months superposed. On that line are vertical lines marking different events. The user should be able to change between different events and for example you only see one line or if selected all off them superposed. Any tips?

Chrisir

homework?

Chrisir

in which format do you have the data on the different events? With dates?

Do the positions of the line signify the date? like left 1960, right 2015?

how do I create the lines?

line(30,height-20, 
30, height-20-200); 

your questions are very vague, you don't give any real information on projects that are far over your head....

better start reading the tutorials and come up with some code that you post here and ask valid questions then....

Best, Chrisir ;-)

btot

Well thank you for your help so far. I read the book generative design, but I do not really find any information I need. So I thought I can find help here. And I'm sorry if my questions are to confusing.

I have the year and the date of the events. One line should stand for one month of one event. Another line other color for the same month but another event. So if I select all events all the lines for one month are shown.

Ater

It may help if you try to draw what you want to make. Anyway, you should understand that is a complex task and we don't know either your level of programming skills or what makes trouble for you. Do you know how to create simple sketches in processing? Are you familiar with OOP? You'll get more clear answers if you ask specific questions.

btot

I am a beginner in processing. I did the tutorials from the book generative design. I will send you a photo of what I want to try.

btot

..

btot

I'm able to do the lines but no idea how to but the months on the side. And I can do the colors but how to put the vertical lines above the horizontal?

Ater

Vertical lines are simple, you just put line function with the same x. And these should go in code after horizontal lines to appear above them. Any text is displayed with text() function.

You need to understand that this will not give you interactive program, but only image-like.

Chrisir

do you want to have cursor keys to go to the next month or year?

your image makes no sense. You have multiple lines for each month?? And events in the same month on different lines?? And the lines are rotated??

post your entire code please.

And: Are you into oop?

btot

What is oop?

Chrisir

object oriented programming, like with objects and classes....see tutorial

Chrisir

with this code you can even make a csv table in processing (program A) and later write a program B to read the csv

Table table;

void setup() {

  size(640, 360);
  background(111);
  stroke(0);
  fill(255, 0, 0);

  table = new Table();

  table.addColumn("id");
  table.addColumn("Name");
  table.addColumn("ShortDescription");
  table.addColumn("Date");

  TableRow newRow ;

  newRow = table.addRow();
  newRow.setInt("id", table.lastRowIndex());
  newRow.setString("Name", "Earthquake in Peru");
  newRow.setString("ShortDescription", "Near town A happened an earthquake.");
  newRow.setString("Date", "22/07/1967");

  newRow = table.addRow();
  newRow.setInt("id", table.lastRowIndex());
  newRow.setString("Name", "Earthquake in Chile");
  newRow.setString("ShortDescription", "...........................");
  newRow.setString("Date", "22/07/1999");

  newRow = table.addRow();
  newRow.setInt("id", table.lastRowIndex());
  newRow.setString("Name", "Earthquake in India");
  newRow.setString("ShortDescription", ".......");
  newRow.setString("Date", "22/07/2002");


  println(table.getRowCount());  // Prints 
  println(table.getColumnCount());  // Prints 

  saveTable(table, "data/new.csv");
}   // func

void draw() { 
  background(0);

  // max for the for-loop
  final int border = table.getRowCount();

  final int distanceBetweenLines = 30; 

  final int yHeadline = 20;
  final int xFirstColumn = 30; 
  final int xSecondColumn = 190; 

  fill(255);
  text ("Name", xFirstColumn, yHeadline);
  text ("ShortDescription", xSecondColumn, yHeadline);

  // for-loop 
  fill(255, 2, 2);
  for (int i=0; i < border; i++) {
    noStroke(); 
    if (i%2==0)
      fill(111);
    else
      fill(141); 
    rect(xFirstColumn-2, distanceBetweenLines*i+ yHeadline + distanceBetweenLines-14, width-xFirstColumn*2, distanceBetweenLines-10);
    fill(255, 2, 2);
    text ( table.getString(i, "Name"), xFirstColumn, distanceBetweenLines*i+ yHeadline + distanceBetweenLines);
    text ( table.getString(i, "ShortDescription"), xSecondColumn, distanceBetweenLines*i + yHeadline + distanceBetweenLines);
  }

  // white lines 
  stroke(255);
  line(xFirstColumn, yHeadline+3, width, yHeadline+3); 
  line(xSecondColumn-5, yHeadline-10, xSecondColumn-5, height-5);
} // func 
//

btot

Thank u