CPSDay2
Creating APIs
// numberOfVertices sets the number of vertices for a
// regular polygon vertexSize is the radius of each // circle representing each vertex
function setVerticies(numberOfVertices, vertexSize)
// draw fractal using vertices of a regular polygon
// vertexSize is the size of the polygon vertices
// dots generated for the fractal are size pointSize
function drawFractal(vertexSize, pointSize)
// drawSegment creates a line segment with endpoints
// (x1, y1) and (x2, y2)
function drawSegment(x1, y1, x2, y2)
// Sample Code Below
setColor(0);
var x2 = 50;
for (var x1 = 0; x1 < 500; x1 += 50)
{
drawRectangle(0, x1, 100, x1+10);
}
var x2 = 50;
for (var x = 0; x < 500; x += 50)
{
setColor(x%20);
drawCircle(x, x, 5);
}
for (var rep = 0; rep < 100; rep += 10)
{
drawSegment(200, rep, 300, rep);
}
for (var rep = 100; rep < 200; rep += 10)
{
setColor( rep/10 % 20 );
drawSegment(rep, 0, rep, 300, rep);
}
Iteration
The Guess Game
Creating Graphical Patterns Using Iteration
// ================================================
// ================ The Chaos Game ================
// ================================================
maxNumberOfVertices = 20;
numberOfVertices = 3;
maxIterations = 20000; // number of points plotted
dim = 500 // dim is image width, height
magnification = 0.9; // fraction of dim / 2 used for plot
plotRatio = 0.5; // fraction of distance
// from curr. pt. to vertex
xUnit = magnification * (dim / 2);
yUnit = xUnit; // number of pixels for 1 unit
color = new Array(maxNumberOfVertices); // vertices color
for (rep = 0; rep < maxNumberOfVertices; rep++){
color[rep] = new Array(3);
}
color[0] = [255, 0, 0]; // color is an array of 3 integers
color[1] = [0, 255, 0]; // in [0, 255] for red, green, blue
color[2] = [0, 0, 255];
color[3] = [255, 111, 255];
color[4] = [138, 111, 226];
color[5] = [100, 55, 180];
color[6] = [0, 155, 255];
color[7] = [0, 255, 255];
color[8] = [155, 155, 155];
color[9] = [255, 155, 255];
color[10] = [200, 055, 155];
color[11] = [55, 55, 255];
color[12] = [55, 255, 155];
color[13] = [0, 0, 55];
color[14] = [0, 0, 55];
color[15] = [0, 0, 255];
color[16] = [0, 255, 0];
color[17] = [255, 0, 155];
color[18] = [55, 155, 155];
color[19] = [55, 55, 255];
function setVerticies() {
vertex = new Array(numberOfVertices);
for (rep = 0; rep < numberOfVertices; rep++){
vertex[rep] = new Array(2); // array of 2 coordinates
}
vertex[0][0] = 0.0; // x = x'cosT - y'sinT
vertex[0][1] = 1.0; // y = x'sinT + y'cosT
angle = 2.0 * Math.PI / numberOfVertices;
theta = angle; // rotate vertex[0] theta to next vertex
for (rep = 1; rep < numberOfVertices; rep++){
vertex[rep][0] = vertex[0][0] * Math.cos(theta) -
vertex[0][1] * Math.sin(theta);
vertex[rep][1] = vertex[0][0] * Math.sin(theta) +
vertex[0][1] * Math.cos(theta);
theta += angle;
}
currVx = vertex[0][0]; // initial point for start of game
currVy = vertex[0][1];
nextVx = currVx;
nextVy = currVy;
}
function convertImage(rICE, gICE, bICE)
{
setColor(rICE, gICE, bICE);
for (var yICE = -dim/2-100; yICE < dim/2+100; yICE++)
{
segment(-dim/2, yICE, dim/2, yICE);
}
}
function getNextCoordinate(next, vert, plotRatio)
{ // add to the current coordinate the plotRatio
// of the distance to the chosen vertex
return next + (vert - next) * plotRatio;
}
function convertCoordToXPixel( coord )
{ // convert coord to pixel value for creative displays
// return 1.5*Math.sqrt(coord*coord)*xUnit*coord;
return xUnit * coord; // traditional
}
function convertCoordToYPixel( coord )
{ // convert coord to pixel value for creative displays
// return 1.1*Math.sin(1.2*Math.PI*coord) * yUnit * coord;
return yUnit * coord; // traditional
}
setBackgroundColor("#FFFF00");
convertImage(245, 245, 245);
setVerticies();
for (rep = 0; rep < maxIterations; rep++) {
vert = Math.floor( Math.random() * numberOfVertices );
currVx = getNextCoordinate(currVx,
vertex[vert][0], plotRatio);
currVy = getNextCoordinate(currVy,
vertex[vert][1], plotRatio);
pixelX = Math.floor( convertCoordToXPixel(currVx) );
pixelY = Math.floor( convertCoordToYPixel(currVy) );
setColor(color[vert][0], color[vert][1], color[vert][2]);
plot(pixelX, pixelY);
}
setColor(0, 0, 0);
segment(-200, 0, 200, 0);
segment(0, -200, 0, 200);
print("Good job!");
setColor(200,100,200);
circle(0,0,111);
circle(200,200,20);
fillCircle(-200,200,20);
rectangle(-200,-200,80,30);
fillRectangle(120,-200,80,30);
setColor(100,100,0);
writeText("This is fun CPS!", 0, 250);