hprint<\/title><script src=\"http:\/\/cdnjs.cloudflare.com\/ajax\/libs\/p5.js\/0.4.9\/p5.js\"><\/script><script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/p5.js\/0.4.9\/addons\/p5.dom.js\"><\/script><script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/p5.js\/0.4.9\/addons\/p5.sound.js\"><\/script><script src=\"hprint.js\" type=\"text\/javascript\"><\/script><script src=\"sketch.js\" type=\"text\/javascript\"><\/script><\/pre><\/pre><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Printing text is a time-honored debugging method. It’s often frowned upon as primitive, unfocused, or non-interactive, but printing has advantages: The information is all there, so you can go forward or backward in (run) time, scanning for information. You do not have to manually step through or pause your program to look at values. Sometimes … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/text-output\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Text Output”<\/span><\/a><\/p>\n","protected":false},"author":535,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/pages\/144"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/users\/535"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=144"}],"version-history":[{"count":12,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/pages\/144\/revisions"}],"predecessor-version":[{"id":34233,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/pages\/144\/revisions\/34233"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":144,"date":"2016-07-29T18:14:52","date_gmt":"2016-07-29T18:14:52","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?page_id=144"},"modified":"2018-10-17T11:14:04","modified_gmt":"2018-10-17T15:14:04","slug":"text-output","status":"publish","type":"page","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/text-output\/","title":{"rendered":"Text Output"},"content":{"rendered":"\n

Printing text is a time-honored debugging method. It’s often frowned
\nupon as primitive, unfocused, or non-interactive, but printing has
\nadvantages:<\/p>\n

The information is all there, so you can go forward or backward in (run) time, scanning for information.<\/li>\n
You do not have to manually step through or pause your program to look at values.<\/li>\n

Sometimes you can find timing-dependent or rare problems that you would not see using a debugger.<\/li>\n<\/ul>

We have introduced print<\/code>, but print<\/code> is \n awkward and requires you to open the console. Sometimes, it would be \nnice to put the text output right on the page with your canvas.<\/p>\n

hprint<\/h2>\nI’ve written a small library for displaying debugging output to the browser. It is called hprint<\/b>, short for “html print” (maybe you can think of a better name). Here are the functions you can use:<\/p>\n
hprint(a, b, c, ...)<\/code> — convert arguments to strings and print them with one space separation.<\/li>\n
hprintln(a, b, c, ...)<\/code> is identical to hprint()<\/code> except that it prints a newline after printing the arguments.<\/li>\n
hlines(n)<\/code> — restrict the number of lines to appear; if n<\/code> is negative (the default), there is no restriction.<\/li>\n
hprecision(d)<\/code> — Print floating point numbers with up to d<\/code> places to the right of the decimal point. If d<\/code> is negative (the default), numbers are printed using the default toString() method.<\/li>\n
createHlines(width, height)<\/code> — specifies output size in
\npixels. This is not required, but if called, output will appear in a
\nscrollable box. The default is to simply add text to the bottom of the
\npage, which can grow arbitrarily unless restricted by a call to hlines().<\/code><\/li>\n
removeHlines()<\/code> — removes all output. Output may be resumed. To resume output to a scrollable box, call createHlines() again.<\/li>\n<\/ul>Examples<\/h3>\nhprint(\"Hello World\")<\/code> — prints \"Hello World\\n\"<\/code><\/li>\n
hprint(3, 2, 1, 'go')<\/code> — prints \"3 2 1 go\"<\/code><\/li>\n
hprint(\"\" + 3 + 2 + 1 + 'go')<\/code> — prints \"321go\"<\/code><\/li>\n
hprecision(3); hprint(12.0, 1.23456)<\/code> — prints \"12 1.234\"<\/code><\/li>\n<\/ul>Here is an animated gif (you may have to click it to see it run). See below for how to use hlines.js in your programs.<\/p>\n
<\/p>\n
The code that created this is the following:<\/p>\n
\r\n \r\nfunction setup() {\r\n    createCanvas(250, 200);\r\n    background(220);\r\n    text(\"Example canvas with text output below.\", 10, 20);\r\n    text(\"Created with hprint.js library.\", 10, 40);\r\n    frameRate(4);\r\n    hlines(10);    \/\/ only keep last 10 lines of output\r\n    hprecision(3); \/\/ print numbers limited to 3 decimal places\r\n}\r\n \r\nvar count = 0;\r\n \r\nfunction draw() {\r\n    \/\/ hprint() does not print a newline:\r\n    if (count % 5 == 0) {\r\n        hprint(\"Hello\", millis());\r\n        hprintln(\" ms\");\r\n    } else { \/\/ hprintln() prints arguments followed by newline:\r\n        hprintln(\"Hello\", millis());\r\n    }\r\n    \/\/ Every 20 lines, we switch output style between scrolling box and \r\n    \/\/ output direct to the page.\r\n    if (count % 20 === 0) {\r\n        removeHlines(); \/\/ remove all hprint output\r\n        if (count \nUsing hprint in your code<\/h3>\nFirst, download the hprint.js<\/a> file and put it in the same directory as your sketch.
\nSecond, add a line to your .html file to load hprint.js, using the
\nfollowing as a guide. Notice line 9 with “hprint.js” — just add this
\nline to your .html file:<\/p>\n
\r\n\r\n\r\n  \r\n    hprint<\/title><script src=\"http:\/\/cdnjs.cloudflare.com\/ajax\/libs\/p5.js\/0.4.9\/p5.js\"><\/script><script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/p5.js\/0.4.9\/addons\/p5.dom.js\"><\/script><script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/p5.js\/0.4.9\/addons\/p5.sound.js\"><\/script><script src=\"hprint.js\" type=\"text\/javascript\"><\/script><script src=\"sketch.js\" type=\"text\/javascript\"><\/script><\/pre><\/pre><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Printing text is a time-honored debugging method. It’s often frowned upon as primitive, unfocused, or non-interactive, but printing has advantages: The information is all there, so you can go forward or backward in (run) time, scanning for information. You do not have to manually step through or pause your program to look at values. Sometimes … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/text-output\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Text Output”<\/span><\/a><\/p>\n","protected":false},"author":535,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/pages\/144"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/users\/535"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=144"}],"version-history":[{"count":12,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/pages\/144\/revisions"}],"predecessor-version":[{"id":34233,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/pages\/144\/revisions\/34233"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}