p5.js block
Port of desgin sketch from 1997 to p5.js and viewable via bl.ocks.org
| <head> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.17/p5.js"></script> | |
| <script language="javascript" type="text/javascript" src="sketch.js"></script> | |
| <style> body {padding: 0; margin: 0;} </style> | |
| </head> | |
| <body style="background-color:white"> | |
| <P>MAS964 Problem Set # 2 (1997)</P> | |
| <P>1. Write a canvas function that demonstrates repetition using a circle | |
| as the base primitive.</P> | |
| </body> |
| function setup() { | |
| createCanvas(560, 420); | |
| ellipseMode(CORNER) | |
| } | |
| var unit, xp, yp; | |
| function mouseDo() { | |
| x = mouseX; | |
| y = mouseY; | |
| unit = width/4.0 - 2.0; | |
| xs = 2.0*mouseX/width - 1.0; | |
| ys = 2.0*mouseY/height - 1.0; | |
| xp = (int)(100 * xs); | |
| yp = (int)(100 * ys); | |
| } | |
| function draw() { | |
| // reset mouse-based variables | |
| mouseDo() | |
| // clear screen to white | |
| stroke(0); | |
| fill(255); | |
| rect(0,0,width-1,height-1); | |
| // now get ready to draw circles | |
| stroke(0); | |
| noFill(); | |
| for(curp=0;curp<11;curp++) { | |
| if(curp == 0) { | |
| xf = width/2.0; | |
| yf = height/2.0; | |
| sign = 1.0; | |
| } | |
| else if(curp == 1) { | |
| xf = width/2.0 - unit; | |
| yf = height/2.0; | |
| sign = -1.0; | |
| } | |
| else if (curp == 2) { | |
| xf = width/2.0 + unit; | |
| yf = height/2.0; | |
| sign = -1.0; | |
| } | |
| else if (curp == 3) { | |
| xf = width/2.0 - 3*unit/2; | |
| yf = height/2.0 - 0.866*unit; | |
| sign = 1.0; | |
| } | |
| else if (curp == 4) { | |
| xf = width/2.0 - unit/2; | |
| yf = height/2.0 - 0.866*unit; | |
| sign = -1.0; | |
| } | |
| else if (curp == 5) { | |
| xf = width/2.0 + unit/2; | |
| yf = height/2.0 - 0.866*unit; | |
| sign = -1.0; | |
| } | |
| else if (curp == 6){ | |
| xf = width/2.0 + 3*unit/2; | |
| yf = height/2.0 - 0.866*unit; | |
| sign = 1.0; | |
| } | |
| else if (curp == 7) { | |
| xf = width/2.0 - 3*unit/2; | |
| yf = height/2.0 + 0.866*unit; | |
| sign = 1.0; | |
| } | |
| else if (curp == 8) { | |
| xf = width/2.0 - unit/2; | |
| yf = height/2.0 + 0.866*unit; | |
| sign = -1.0; | |
| } | |
| else if (curp == 9) { | |
| xf = width/2.0 + unit/2; | |
| yf = height/2.0 + 0.866*unit; | |
| sign = -1.0; | |
| } | |
| else /* (curp == 10)*/{ | |
| xf = width/2.0 + 3*unit/2; | |
| yf = height/2.0 + 0.866*unit; | |
| sign = 1.0; | |
| } | |
| for(i=0;i<6;i++) { | |
| h = (int)((unit) * (11.0 - i)/11.0); | |
| x = (int)(xf + (i/11.0)*(xs*unit*sign) - h/2); | |
| y = (int)(yf + (i/11.0)*(ys*unit*sign) - h/2); | |
| ellipse(x, y, h, h); | |
| } | |
| } | |
| } |