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);