{"id":67760,"date":"2021-10-16T20:23:38","date_gmt":"2021-10-17T00:23:38","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67760"},"modified":"2021-10-16T20:23:38","modified_gmt":"2021-10-17T00:23:38","slug":"project-cardioid-visualization","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/16\/project-cardioid-visualization\/","title":{"rendered":"Project &#8211; Cardioid Visualization"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"480\" data-height=\"480\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-103.js\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"480\" height=\"480\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Brandon Yi\n\/\/btyi@andrew.cmu.edu\n\/\/Section A\n\n\/\/ Cardioid Function\n\nvar points = 200; \/\/ number of points on circle\nvar rate; \/\/ coefficient\nvar r = 180; \/\/ radius of big circle\nvar count = 0;\n\nfunction setup(){\n  createCanvas(400, 400);\n  frameRate(200);\n  rate = 2;\n}\n\nfunction draw() {\n  \/\/basic settings \n  background(0);\n  translate(width\/2, height\/2);\n\n  \/\/  Large White Circle\n  stroke(255);\n  fill(0);\n  ellipse(0, 0 , r * 2, r * 2);\n\n  \/\/ drawing lines based on cardioid shape \n\n  for(var i = 0; i &lt; count; i++){\n\n    var x = r * cos(i * TWO_PI\/points);\n    var y = r * sin(i * TWO_PI\/points);\n\n    var x2 = r * cos(i*rate * TWO_PI\/points);\n    var y2 = r * sin(i*rate * TWO_PI\/points);\n\n    \/\/color gradient based on rate\n\n    if (rate % 3 == 0) {\n      stroke(i, 0, 255-i);\n    }\n\n    else if (rate%3 == 1) {\n      stroke(0, i, 255-i);\n    }\n\n    else {\n      stroke(i, 255-i, 0);\n    }\n    \/\/ drawing line\n    line(x, y, x2, y2);\n  }  \n\n  \/\/counter increases until count of 200 lines\n  if(count &lt;= points) {\n    count += 1;\n    frameRate(200);\n  }\n\n  \/\/counter hits 200 -- cardioid coefficient increases + counter reset\n  else {\n    rate++;\n    count = 0;\n  }\n\n  \/\/ coefficient reset\n  if (rate &gt;= 12) {\n    rate = 2;\n  }\n\n  \/\/ brief pause \n  if(count == points) {\n    frameRate(1);\n  }\n\n  \n}\n\n<\/code><\/pre><\/div>\n\n\n\n<p>I wanted to combine what we did with the line drawings and the new curves that we were trying to draw. Though it took some thinking, I think my project turned out really well. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/Brandon Yi \/\/btyi@andrew.cmu.edu \/\/Section A \/\/ Cardioid Function var points = 200; \/\/ number of points on circle var rate; \/\/ coefficient var r = 180; \/\/ radius of big circle var count = 0; function setup(){ createCanvas(400, 400); frameRate(200); rate = 2; } function draw() { \/\/basic settings background(0); translate(width\/2, height\/2); \/\/ Large &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/16\/project-cardioid-visualization\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project &#8211; Cardioid Visualization&#8221;<\/span><\/a><\/p>\n","protected":false},"author":679,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[108,55],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67760"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/users\/679"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67760"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67760\/revisions"}],"predecessor-version":[{"id":67763,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67760\/revisions\/67763"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}