• Shyam Patel

Dot-To-Dot Drawing – Workshop 2

In this blog post, I have used an open-source website: (file:///Applications/Processing.app/Contents/Java/modes/java/reference/index.html) as a reference point to aid me in explaining each line of code, the meaning and what it does in this context.


Table table;

size(800, 800); – This function determines the size of the display window in the unit of pixels.

background(255); – This function sets the colour used for the background.

int dotSize = 4; – The variable called dot size which is an integer has been set to 4. On the programme the bigger the dot size, the dots get bigger on the programme that is run so we therefore control the size of the dots this way. The dot size determines specifically to this workshop and image below the size of the dots between each line.

strokeWeight(2); – We are drawing lines and the way we determine how thin or thick the line is by opening the strokeWeight. We cannot put strokeWeight of 3.7 because it has to be an integer.


boolean renderIndex = true; boolean renderLines = true; – A boolean is a datatype. A boolean is a true or false datatype. It is like a switch. Almost as if its like Adobe Photoshop and the layers can be turned on or off, the true and false values in this datatype work the same way.


table = loadTable(“drawingData.csv”, “header”); – Table is the object we created in the very first instance. The arguments are the names of the data to load in which are in the quotation marks. The first argument loads the file located in our sketch folder. The second argument tells the loadTable object that there is a header row in the data table. So what the table object is being told is to load in all the data from the spreadsheets and then to remember that the first row in that spreadsheet contains the header at the top of the columns.


println (table.getRowCount() + ” total points in our dot-to-dot drawing”); – Here, the printIn sends a message to the console it sends the message and it finds out how many rows are in the csv file in the table.


int x = table.getInt(0, “dotX”); int y = table.getInt(0, “dotY”); int dotIndex = table.getInt(0, “dotIndex”); – The first entry in any list is always index 0. So the first index in any data source is always 0. So if for example an array is queried, which is why the list variable, and I want the first value from that array, then I would index 0 always. Reminding that the X is an integer and same to the table, and I am using the function of the table to getInt which means get integer and getInt asks for two values. The first value is the row number. Row 0 would be the first row, which is why I am asking to be given the value of the column on row 0 for dot x. So we have the object and the row is the number and the column is the name. The same is done for the y. Table getInt row 0 but this time we want the column. This therefore makes it a 2 dimensional database where there are row numbers and column names. In addition, this initialises 3 variables, dotX, dotY, dotIndex with the values we have that are on the first row on the separated file.


These functions receive data files that have been created outside of Processing13. In this instance, text editor has been opened, coordinates have been put in and then this specific code has been written so that it loads the data table. Once the data table is loaded. The rest of the functions carry out the task of drawing from each point mapped out by the coordinates. In simple terms table enables us to in affect store the kind of data we would have in a spreadsheet. Columns and Rows. We set the dimensions of our documents and then we start to create some variables.


for (int i = 1; i <= table.getRowCount()-1; i++) { int x2 = table.getInt(i, “dotX”); int y2 = table.getInt(i, “dotY”); For the for-loop we have an I and we start the counter at 1 not 0 because we already have the value of 0 so we start at an index of 1. Whilst the I is the counter of the loop, it is less than or equal to a total number of rows in our table minus 1 and the reason we have a minus one in there is because the total number of rows we have in our table will always be one number higher than the highest index number because the index number starts counting at 0, and we as human beings start counting at 1. We have got X and Y, and effectively we have enough information to draw a line. if we are drawing lines from one coordinate to another, we need 2 sets of coordinates.


fill(0); We are setting the colour of the dot with a fill function, at the moment it has been set to 0 which is black, but if we change the RGB coordinates, that will in effect change the fill colour of the dot.


circle(x, y, dotSize); This circle is put at the value of X and the value of Y. The circles diameter is the same as that circles variable.


if (renderIndex) { we have here two conditionals. This conditional if (renderIndex) allows us to put the text that contains the dot index and x+5 is there so that the text is a little bit further away from the dot. The if (renderIndex) is the boolean which can either be true or false. text(dotIndex, x+5, y); }


if (renderLines) { – It is a conditional as to whether the lines are drawn or not. So if (renderLines) equals true, then the line can be drawn and set a strokeWeight to 2px wide and the starting point of that line would be x and y, and the end point would be x2 and y2.


line(x, y, x2, y2); }

x = x2; y = y2; dotIndex = table.getInt(i, “dotIndex”); } – At the end of the drawing, the end of the for loop, is that we set the values that we need for next time around.


x = table.getInt(table.getRowCount()-2, “dotX”); y = table.getInt(table.getRowCount()-2, “dotY”); int x2 = table.getInt(table.getRowCount()-1, “dotX”); int y2 = table.getInt(table.getRowCount()-1, “dotY”); – After the loop that is all of rows of data minus the last one, we draw our last dot and last line. At the very end, in order to draw the last line we pull out x and y are given the value of RowCount()-2 for x and y and then a

RowCount() of -1 for x and y where we want to pull in the last entry for the data source. The reason that the x2 and y2 is int is because x is 2 and y is 2 and the bulk of the programme are contained within the body of the function which is how the for loop has an issue of how the x2 and the y2 cannot be seen outside of that function.


fill(0); circle(x2, y2, dotSize); – After that, a circle is drawn.


if (renderIndex) { text(dotIndex, x2+5, y2); }

if (renderLines) { line(x, y, x2, y2); } – And then if “if (renderIndex” is true, we conditionally render the lines if it is true and we draw the line.


println(“drawing is complete – enjoy”); – This is the message that comes up once the programme has run successfully.

© 2020 by Merakee7.