{"id":49,"date":"2012-10-03T15:02:39","date_gmt":"2012-10-03T15:02:39","guid":{"rendered":"https:\/\/brettjpeterson.com\/blog\/?p=49"},"modified":"2012-10-03T16:36:41","modified_gmt":"2012-10-03T16:36:41","slug":"processing-catch-up-post","status":"publish","type":"post","link":"https:\/\/brettjpeterson.com\/blog\/2012\/10\/03\/processing-catch-up-post\/","title":{"rendered":"Processing catch-up post"},"content":{"rendered":"<p>I haven&#8217;t posted any of my ICM homework to my blog yet, so this post will take care of it in one shot! Here are a few of the projects I&#8217;ve worked on recently.<\/p>\n<h2>Sparks<\/h2>\n<p>Move the mouse inside the window to create sparks!<br \/>\n<script type=\"application\/processing\">\nvoid setup() {\n  size(500,500);\n  background(50);\n}<\/p>\n<p>void draw() {\n  noStroke();\n   fill(255, millis()%255,100);\n   triangle(mouseX,mouseY, width\/2-50, height\/2, width\/2,height\/2); \n}\n<\/script><\/p>\n<h2>Equalizer<\/h2>\n<p>The inspiration for this one was an equalizer. I ended up spending way to much time thinking about the math of the line heights<br \/>\n<script type=\"application\/processing\">\nvoid setup() {\n size(255,500); \n background(0);<\/p>\n<p>}<\/p>\n<p>void draw() {\n  background(0);\n  noStroke();<\/p>\n<p>  for (int i = -100; i < 100; i = i + 10) {\n    if ( i != 0) {\n      fill(mouseX+i%255, 80,90);\n      rect(mouseX-(mouseX%10)+i, height - ((height - mouseY)\/abs(.11 * i)), 5,height - mouseY);\n    }\n    else {\n      fill(mouseX%255, 80,90);\n      rect(mouseX-(mouseX%10)+i, height - ((height - mouseY)), 5,height - mouseY);\n    }  \n  }\n\n  for (int i = 0; i < width; i= i + 10) {\n    fill(i%255, 80, 90);\n    rect(i, height-60, 5,60);\n  }\n}  \n<\/script><\/p>\n<h2>Symmetry<\/h2>\n<p>click inside the box to start drawing.<br \/>\n<script type=\"application\/processing\"><\/p>\n<p>float pointsX[];           \/\/ array of x coords of points \nfloat pointsY[];           \/\/ array of y coords of points\nint circleSize = 2;        \/\/ size of circle points\nfloat lastX;      \/\/ used to draw lines, holds position of previous point \nfloat lastY;    \/\/  used to draw lines, holds position of previous point\nlong lastDraw = 0;         \/\/ used to space out drawing lines, tells when the last run happened\nint delay = 40;           \/\/ time to delay draw in milliseconds\nboolean playback = false;  \/\/ Toggle whether in drawing mode or playback mode\nint R = int(random(0,255));\nint B = int(random(0,255));<\/p>\n<p>int i = 1;                 \/\/ Iterator used to keep track of position when drawing lines<\/p>\n<p>void setup() {\n  size(500, 500); \n  background(0);<\/p>\n<p>  \/\/ initialize new arrays of points  \n  pointsX = new float[1];\n  pointsY = new float[1];<\/p>\n<p>  \/\/ assign default first value for first item in array\n  pointsX[0] = 0;\n  pointsY[0] = 0;<\/p>\n<p>  lastX = pointsX[0];\n  lastY = pointsY[0];<\/p>\n<p>  \/\/ initialize lastDraw variable\n  lastDraw = millis();\n}<\/p>\n<p>void draw() {<\/p>\n<p>  if (!playback) {\n   fill(255);\n      \/\/ draw points at mouse coords when mouse is clicked. Also draw point at reflected x coords\n      fill(R,mouseY%255, B);\n      stroke(R,mouseY%255, B);\n      ellipse(mouseX, mouseY, circleSize, circleSize);\n      ellipse(width-mouseX, mouseY, circleSize, circleSize);<\/p>\n<p>      \/\/stroke(255);<\/p>\n<p>      \/\/ connect the dots from last point to current point, same for reflected\n\/\/      line(lastX, lastY, mouseX, mouseY);\n\/\/      line(width-lastX, lastY, width-mouseX, mouseY);<\/p>\n<p>      \/\/ set current point as new last point for connecting dots\n      lastX = mouseX;\n      lastY = mouseY;<\/p>\n<p>      \/\/ append new points to array\n      pointsX = (float[]) append(pointsX, lastX);\n      pointsY = (float[]) append(pointsY, lastY);<\/p>\n<p>      \/\/ DEBUGGING - print length of arrays\n      \/\/println(pointsX.length);<\/p>\n<p>  }<\/p>\n<p>  \/\/ This is triggered when the user presses the 'P' key, for playback\n  if (playback) {<\/p>\n<p>    \/\/  Check to see if a second has passed since the last run. Used to space out the drawing\n    if (millis() - lastDraw > delay) {<\/p>\n<p>      \/\/ Draw circle for endpoint at position held in array, and on the mirrored side as well\n      fill(R,pointsY[i]%255, B);\n      stroke(R,pointsY[i]%255, B);\n      ellipse(pointsX[i], pointsY[i], circleSize, circleSize);<\/p>\n<p>      \/\/ width - point is used to mirror the points onto the right side of window\n      ellipse(width-pointsX[i], pointsY[i], circleSize, circleSize);<\/p>\n<p>      \/\/stroke(255);<\/p>\n<p>      \/\/ connect dots with lines on each side of reflection\n\/\/      line(pointsX[i-1], pointsY[i-1], pointsX[i], pointsY[i]);\n\/\/      line(width-pointsX[i-1], pointsY[i-1], width-pointsX[i], pointsY[i]);<\/p>\n<p>      \/\/ increment iterator\n      i = i + 1;<\/p>\n<p>      \/\/ set last draw at current millis\n      lastDraw = millis();\n    } \n    else {<\/p>\n<p>    }<\/p>\n<p>    \/\/ when iterator reaches length of points arrays, return to draw mode\n    if (i == pointsX.length) {\n      playback = false;\n      i = 1;\n    }\n  }\n}<\/p>\n<p>void mouseClicked() {<\/p>\n<p>  \/\/ draw points at mouse coords when mouse is clicked. Also draw point at reflected x coords\n  ellipse(mouseX, mouseY, circleSize, circleSize);\n  ellipse(width-mouseX, mouseY, circleSize, circleSize);<\/p>\n<p>  stroke(255);<\/p>\n<p>  \/\/ connect the dots from last point to current point, same for reflected\n  line(lastX, lastY, mouseX, mouseY);\n  line(width-lastX, lastY, width-mouseX, mouseY);<\/p>\n<p>  \/\/ set current point as new last point for connecting dots\n  lastX = mouseX;\n  lastY = mouseY;<\/p>\n<p>  \/\/ append new points to array\n  pointsX = (float[]) append(pointsX, lastX);\n  pointsY = (float[]) append(pointsY, lastY);<\/p>\n<p>  \/\/ DEBUGGING - print length of arrays\n  \/\/println(pointsX.length);\n}<\/p>\n<p>void keyPressed() {<\/p>\n<p>  \/\/ DEBUGGING println(keyCode); <\/p>\n<p>  \/\/ Check for 'P' keypress to begin playback mode \n  if (keyCode == 80) {<\/p>\n<p>    \/\/ Begin playback\n    playback = true;<\/p>\n<p>    \/\/ Set backgorund to black\n    background(0);\n  }\n}\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I haven&#8217;t posted any of my ICM homework to my blog yet, so this post will take care of it in one shot! Here are a few of the projects I&#8217;ve worked on recently. Sparks Move the mouse inside the window to create sparks! Equalizer The inspiration for this one was an equalizer. I ended [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,3,1],"tags":[],"class_list":["post-49","post","type-post","status-publish","format-standard","hentry","category-introduction-to-computational-media","category-itp","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/brettjpeterson.com\/blog\/wp-json\/wp\/v2\/posts\/49","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brettjpeterson.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/brettjpeterson.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/brettjpeterson.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/brettjpeterson.com\/blog\/wp-json\/wp\/v2\/comments?post=49"}],"version-history":[{"count":10,"href":"https:\/\/brettjpeterson.com\/blog\/wp-json\/wp\/v2\/posts\/49\/revisions"}],"predecessor-version":[{"id":87,"href":"https:\/\/brettjpeterson.com\/blog\/wp-json\/wp\/v2\/posts\/49\/revisions\/87"}],"wp:attachment":[{"href":"https:\/\/brettjpeterson.com\/blog\/wp-json\/wp\/v2\/media?parent=49"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brettjpeterson.com\/blog\/wp-json\/wp\/v2\/categories?post=49"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brettjpeterson.com\/blog\/wp-json\/wp\/v2\/tags?post=49"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}