...
Code Block | ||
---|---|---|
| ||
const gridXcount = 20; const intgridYcount gridHeight = 20; float shapeWidth = 30; float shapeHeight = 30; floatvar xSpacing; // x distance between each shape var ySpacing; // y distance between each shape var reactorScaler = 0.06; int// xOffset;this intfactor yOffset;controls PVectorthe reactorPosition;intensity of voidthe setup()reactors {influence reactorPosition = new PVector(0, 0);function setup() { sizecreateCanvas(700, 700); // offset used to center the graphics on the screen xOffset = floor(width/2-(shapeWidth*gridWidth/2)); yOffset = floor(height/2-(gridHeight*shapeHeight/2)); background(255xSpacing = width/(gridXcount-1) ySpacing = height/(gridYcount-1) fill(0); smoothnoStroke(); }; voidfunction draw() { background(255); fill(0); noStroke(); pushMatrix(); translate(xOffset, yOffset);//translate matrixpopulated tocanvas centerwith ellipses for (intvar i = 0; i<gridWidthi<gridXcount; i++ ) { for (intvar j = 0; j<gridHeightj<gridYcount; j++ ) { PVectorvar myPos = new PVectorcreateVector(i*shapeWidthxSpacing, j*shapeHeightySpacing); floatvar reactorDistance = dist(reactorPosition.xmouseX, reactorPosition.ymouseY, myPos.x, myPos.y); floatvar scaler = reactorDistance*reactorScaler; ellipse(myPos.x, myPos.y, 1*scaler, 1*scaler); }; }; popMatrix(); }; int mouse_X() { return (mouseX - xOffset); //correct positions after matrix translations } int mouse_Y() { return (mouseY - xOffset); //correct positions after matrix translations } void mouseMoved() { reactorPosition.x = mouse_X(); reactorPosition.y = mouse_Y(); }; |
...
|
Exercise
The example above uses the mouse point to scale the ellipses. Experiment with other shapes, and other transformations such as rotation, colour change, or more complex morphing.