{"id":562,"date":"2012-11-12T15:29:47","date_gmt":"2012-11-12T15:29:47","guid":{"rendered":"http:\/\/www.joshuarosenstock.com\/teaching\/IMGD3x00_B12\/?p=562"},"modified":"2012-11-12T15:34:11","modified_gmt":"2012-11-12T15:34:11","slug":"magic-baloons","status":"publish","type":"post","link":"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3x00_B12\/2012\/11\/12\/magic-baloons\/","title":{"rendered":"Magic Baloons"},"content":{"rendered":"<p>This one went through two versions. Here&#8217;s the first, using completely random colors:<\/p>\n<p><script type=\"application\/processing\">\r\n\/\/Info: http:\/\/processingjs.org\/reference\r\nint num = int(random(2, 40));\r\nWacko[] ws = new Wacko[num];\r\ncolor myColor = color(random(255), random(255), random(255), random(255)); \/\/sets a random color\r\ncolor myColor2 = color(random(255), random(255), random(255), random(255)); \/\/sets a random color\r\n\r\nvoid setup() {\r\n  size(1000, 800);\r\n  background(200);\r\n  \r\n  for (int i = 0; i < num; i++) {\r\n     ws[i] = new Wacko(random(1000), random(800));\r\n  }\r\n}\r\n\r\nvoid draw() {\r\n  background(myColor2);\r\n  \r\n  for (int i = 0; i < num; i++) {\r\n     ws[i].update();\r\n  }\r\n}\r\n\r\nclass Wacko {\r\n  float x = 0;\r\n  float y = 0;\r\n  float imageSize = random(8, 80);\r\n  float xmoveAmount = 4;\r\n  float ymoveAmount = -4;\r\n  \r\n  int xdiff = 0;\r\n  int ydiff = 0;\r\n  \r\n  Wacko(float newx, float newy) {\r\n    x = newx;\r\n    y = newy;\r\n  }\r\n  \r\n  void update() {\r\n    color myColor3 = color(random(255), random(255), random(255), random(255)); \/\/sets a random color\r\n    stroke(myColor3);\r\n    fill(myColor);\r\n    ellipse(x, y, imageSize*2, imageSize*2);\r\n    ellipse(x, y+imageSize, imageSize*2, imageSize*2);\r\n    ellipse(x, y-imageSize, imageSize*2, imageSize*2);\r\n    ellipse(x+imageSize, y, imageSize*2, imageSize*2);\r\n    ellipse(x-imageSize, y, imageSize*2, imageSize*2);\r\n    \r\n    move();\r\n    bounds();\r\n  }\r\n  \r\n  void move() {\r\n    x += xmoveAmount; \/\/move the shapes\r\n    y += ymoveAmount;\r\n    \r\n    xdiff = int(mouseX - x);\r\n    ydiff = int(mouseY - y);\r\n    \r\n    line(mouseX, mouseY, x, y);\r\n  }\r\n  \r\n   \/\/this section checks to see if we're out of bounds\r\n  void bounds() {\r\n    if (x>=width) {\r\n      xmoveAmount = (0-xmoveAmount); \/\/reverses direction and randomize a little bit\r\n    }\r\n    else if (x<=0) {\r\n      xmoveAmount = (0-xmoveAmount);\r\n    }\r\n    else if (y>=height) {\r\n      ymoveAmount = (0-ymoveAmount);\r\n    }\r\n    else if (y<=0) {\r\n      ymoveAmount = (0-ymoveAmount);\r\n    }\r\n  }\r\n}\r\n<\/script><\/p>\n<p>And the second version. It uses opposite colors to make it look better. Also, the closer a balloon is to the mouse, the smaller it gets. This is easily my favorite sketch so far. Click to spawn more balloons!<\/p>\n<p><script type=\"application\/processing\">\r\n\/\/Info: http:\/\/processingjs.org\/reference\r\nboolean clicking = false;\r\nboolean rclicking = false;\r\nint num = 0;\r\nWacko[] ws = new Wacko[40];\r\ncolor myColor = color(random(255), random(255), random(255)); \/\/sets a random color\r\ncolor myColor2 = -myColor;\r\n\r\nvoid setup() {\r\n  size(1000, 800);\r\n  background(0);\r\n}\r\n\r\nvoid draw() {\r\n  background(myColor2);\r\n  \r\n  if (mousePressed && (mouseButton == LEFT)) {\r\n    if (clicking == false && num < ws.length){\r\n      ws[num] = new Wacko(mouseX, mouseY);\r\n      num = num + 1;\r\n      clicking = true;\r\n    }\r\n  }\r\n  else clicking = false;\r\n  \r\n  if (mousePressed && (mouseButton == RIGHT)) {\r\n    if (rclicking == false && num > 0){\r\n      \r\n      num = num - 1;\r\n      rclicking = true;\r\n    }\r\n  }\r\n  else rclicking = false;\r\n  \r\n  for (int i = 0; i < num; i++) {\r\n     ws[i].update();\r\n  }\r\n}\r\n\r\nclass Wacko {\r\n  float x = 0;\r\n  float y = 0;\r\n  float imageSize = 1;\r\n  float xmoveAmount = 4;\r\n  float ymoveAmount = -4;\r\n  \r\n  int xdiff = 0;\r\n  int ydiff = 0;\r\n  \r\n  Wacko(float newx, float newy) {\r\n    x = newx;\r\n    y = newy;\r\n  }\r\n  \r\n  void update() {\r\n    color myColor3 = color(random(255), random(255), random(255), random(255)); \/\/sets a random color\r\n    stroke(myColor3);\r\n    fill(myColor);\r\n    ellipse(x, y, imageSize*2, imageSize*2);\r\n    ellipse(x, y+imageSize, imageSize*2, imageSize*2);\r\n    ellipse(x, y-imageSize, imageSize*2, imageSize*2);\r\n    ellipse(x+imageSize, y, imageSize*2, imageSize*2);\r\n    ellipse(x-imageSize, y, imageSize*2, imageSize*2);\r\n    \r\n    move();\r\n    bounds();\r\n  }\r\n  \r\n  void move() {\r\n    x += xmoveAmount; \/\/move the shapes\r\n    y += ymoveAmount;\r\n    \r\n    xdiff = mouseX - int(x);\r\n    ydiff = mouseY - int(y);\r\n    float hyp = sqrt(sq(xdiff) + sq(ydiff))+3;\r\n    imageSize = hyp\/10;\r\n    \r\n    line(mouseX, mouseY, x, y);\r\n  }\r\n  \r\n   \/\/this section checks to see if we're out of bounds\r\n  void bounds() {\r\n    if (x>=width) {\r\n      xmoveAmount = (0-xmoveAmount); \/\/reverses direction and randomize a little bit\r\n    }\r\n    else if (x<=0) {\r\n      xmoveAmount = (0-xmoveAmount);\r\n    }\r\n    else if (y>=height) {\r\n      ymoveAmount = (0-ymoveAmount);\r\n    }\r\n    else if (y<=0) {\r\n      ymoveAmount = (0-ymoveAmount);\r\n    }\r\n  }\r\n}\r\n<\/script><\/p>\n<p>For some reason the background doesn&#8217;t show up online.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This one went through two versions. Here&#8217;s the first, using completely random colors: And the second version. It uses opposite colors to make it look better. Also, the closer a balloon is to the mouse, the smaller it gets. This &hellip; <a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3x00_B12\/2012\/11\/12\/magic-baloons\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3x00_B12\/wp-json\/wp\/v2\/posts\/562"}],"collection":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3x00_B12\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3x00_B12\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3x00_B12\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3x00_B12\/wp-json\/wp\/v2\/comments?post=562"}],"version-history":[{"count":5,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3x00_B12\/wp-json\/wp\/v2\/posts\/562\/revisions"}],"predecessor-version":[{"id":565,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3x00_B12\/wp-json\/wp\/v2\/posts\/562\/revisions\/565"}],"wp:attachment":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3x00_B12\/wp-json\/wp\/v2\/media?parent=562"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3x00_B12\/wp-json\/wp\/v2\/categories?post=562"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3x00_B12\/wp-json\/wp\/v2\/tags?post=562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}