{"id":74606,"date":"2022-10-15T22:39:06","date_gmt":"2022-10-16T02:39:06","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=74606"},"modified":"2022-10-15T22:43:24","modified_gmt":"2022-10-16T02:43:24","slug":"project-7","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/15\/project-7\/","title":{"rendered":"Project 7"},"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><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-139.js\" data-width=\"480\" data-height=\"480\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/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\">\/\/Paul\n\/\/kengpul\n\/\/Section A\nvar x;\nvar y;\nvar circ = [];\n\/\/ determines the line and size of the circle creating the circle w line inside\nvar drawingLine;\nvar lineDeg = 0;\nvar circleDeg = 0;\nvar colorStep = 0;\nvar colorStep2 = 0;\n\nfunction setup() {\n    createCanvas(480, 480);\n    background(random(50,70),100,random(150,256));\n}\n\n\nfunction draw() {\n    \/\/creating perilin colors\n    \/\/cghanges size of the elements based on mouse y\n    drawingLine = map(mouseY,0,height,20,height\/5)\n    \/\/background(240,170,20);\n    push();\n    translate(width\/2,height\/2);\n    rotate(radians(circleDeg));\n    bigCirc();\n    pop();\n    circleDeg += map(5,0,width\/2,0,drawingLine)*1.5;\n\n    \n    colorStep = colorStep += 0.01;\n    colorStep2 = colorStep2 += 0.005;\n\n}\n\n\n\n\/\/two functions under creates a line that spins \n\/\/according to the center of the circle created in bigCirc(), this is done to replicate \n\/\/the effect of an Astroid but with an interactive twist\n\nfunction insideLine(){\n    push();\n    stroke(100,255,100);\n    strokeWeight(1);\n    \/\/moves origin to center and top so the lines can rotate as it should\n    translate(width\/2-drawingLine,drawingLine\/2+drawingLine*2);\n    rotate(radians(lineDeg));\n    line(0,0,0,drawingLine\/2);\n    strokeWeight(7);\n    var pointCol = 255 * noise(colorStep2);\n    stroke(pointCol,10,10);\n    point(0,drawingLine*2);\n    pop();\n    \/\/changes how \"circular\" the dots are printed \n    lineDeg += map(mouseX,0,width,0,5);\n}\n\nfunction bigCirc(){\n    noFill();\n    strokeWeight(1.5);\n\n    \/\/rgb value created with noise so each color doesnt vary too much circle to circle\n    var r = 255 * noise(colorStep+5);\n    var g = 255 * noise(colorStep+15);\n    var b = 255 * noise(colorStep+20);\n    stroke(r,g,b);\n    circle(width\/2-drawingLine,drawingLine\/2+drawingLine*2,100);\n    insideLine();\n    \/\/rotates the insideLine inside the circ\n}\n\/\/when clicked , canvas resets with diff background so the program doesnt over crowd\nfunction mousePressed(){\n   background(random(50,70),100,random(150,256));\n}\n\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/Paul \/\/kengpul \/\/Section A var x; var y; var circ = []; \/\/ determines the line and size of the circle creating the circle w line inside var drawingLine; var lineDeg = 0; var circleDeg = 0; var colorStep = 0; var colorStep2 = 0; function setup() { createCanvas(480, 480); background(random(50,70),100,random(150,256)); } function draw() &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/15\/project-7\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 7&#8221;<\/span><\/a><\/p>\n","protected":false},"author":738,"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\/f2022\/wp-json\/wp\/v2\/posts\/74606"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/users\/738"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=74606"}],"version-history":[{"count":6,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74606\/revisions"}],"predecessor-version":[{"id":75296,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74606\/revisions\/75296"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=74606"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=74606"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=74606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}