Difference between revisions of "API"

From CodeStuff
Jump to: navigation, search
(Created page with "==Simple Functions== ===clear();=== Clears the screen ===drawCircle(x, y, radius);=== Draws an unfilled circle with the center at x, y ===drawLine(x1, y1, x2, y2);=== Draws...")
 
(→‎inputManager)
 
(17 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
==Simple Functions==
 
==Simple Functions==
 +
 +
Where functions use parameters of x and y as a pair they refer to screen [[coordinates]].
  
 
===clear();===
 
===clear();===
 
Clears the screen
 
Clears the screen
 +
<edcode class="example">
 +
setColour("red");
 +
fillCircle(100,240,50);
 +
clear();
 +
setColour("green");
 +
fillCircle(540,240,50);
 +
</edcode>
 +
 +
===setColour(colourValue);===
 +
Sets the drawing colour to be colourValue.  colourValue is a text string that can take several forms.
 +
 +
These are all valid values for setColour.
 +
"black"
 +
"green"
 +
"orange"
 +
"rgb(50,20,10)"
 +
"rgba(60,20,40,0.5)" 
 +
"#ff00ff"
 +
 +
You can read more about what colour names are available and how the different forms work on wikipedia http://en.wikipedia.org/wiki/Web_colors
  
 
===drawCircle(x, y, radius);===
 
===drawCircle(x, y, radius);===
 
Draws an unfilled circle with the center at x, y
 
Draws an unfilled circle with the center at x, y
 +
<edcode class="example">
 +
setColour("red");
 +
drawCircle(300,50,10);
 +
 +
setColour("green");
 +
drawCircle(50,200,10);
 +
 +
setColour("black");
 +
drawCircle(320,240,10);
 +
drawCircle(320,240,20);
 +
drawCircle(320,240,30);
 +
drawCircle(320,240,40);
 +
</edcode>
  
 
===drawLine(x1, y1, x2, y2);===
 
===drawLine(x1, y1, x2, y2);===
 
Draws a line starting at x1, y1 and ending at x2, y2
 
Draws a line starting at x1, y1 and ending at x2, y2
 +
<edcode class="example">
 +
setColour("red");
 +
//both ends of this line have Y values of 100 so this line is horizontal
 +
drawLine(50,100,300,100);
 +
 +
setColour("green");
 +
//both ends of this line have X values of 500 so this line is vertical
 +
drawLine(500,100,500,400);
 +
 +
setColour("blue");
 +
drawLine(50,100,500,400);
 +
</edcode>
  
 
===drawRectangle (x, y, width, height);===
 
===drawRectangle (x, y, width, height);===
Line 15: Line 62:
 
===fillCircle (x, y, radius);===
 
===fillCircle (x, y, radius);===
 
Draws a filled circle with the center at x, y
 
Draws a filled circle with the center at x, y
 +
 +
<edcode class="example">
 +
setColour("red");
 +
fillCircle(300,50,10);
 +
 +
setColour("green");
 +
fillCircle(50,200,10);
 +
 +
setColour("black");
 +
fillCircle(320,240,40);
 +
 +
setColour("yellow");
 +
drawCircle(320,240,10);
 +
drawCircle(320,240,20);
 +
drawCircle(320,240,30);
 +
</edcode>
  
 
===fillRectangle (x, y, width, height);===
 
===fillRectangle (x, y, width, height);===
Line 22: Line 85:
 
Draws text at x,y
 
Draws text at x,y
 
If x and y are not given, the text will appear below the last printed line.
 
If x and y are not given, the text will appear below the last printed line.
 +
<edcode class="example">
 +
print("Hello there");
 +
print("This line is below the first line");
 +
print("This line has a position",200,300);
 +
</edcode>
  
 
===makeBackground();===
 
===makeBackground();===
 
Turns the current contents of the screen into a background image that remains after a clear() call.
 
Turns the current contents of the screen into a background image that remains after a clear() call.
 +
<edcode class="example">
 +
setColour("green");
 +
drawCircle(160,240,100);
 +
fillCircle(500,240,100);
 +
makeBackground();
 +
setColour("blue");
 +
fillCircle(320,240,400);
  
−
===loadImage(imageURL);===
+
//call clear after a delay of 3200 milliseconds (3.2 seconds);
 +
clear.delay(3200);
 +
 
 +
</edcode>
 +
 
 +
===loadImage(imageURL,framesWide,framesHigh);===
 
Loads an Image from a url and returns an object that can be used for drawImage.
 
Loads an Image from a url and returns an object that can be used for drawImage.
 
The image download will begin immediately, but drawing the image will have no effect until the download has completed.  
 
The image download will begin immediately, but drawing the image will have no effect until the download has completed.  
Line 33: Line 113:
 
===drawImage(image, x, y)===
 
===drawImage(image, x, y)===
 
Draws an image with the top left corner at x,y on the screen.
 
Draws an image with the top left corner at x,y on the screen.
−
 
−
===getMousePostion()===
 
−
Returns an object with x and y fields indicating the current mouse pointer position;
 
  
 
===keyIsDown(keyCode)===
 
===keyIsDown(keyCode)===
−
Returns true if the key indicated by keyCode is held down.
+
Returns true if the key indicated by [[Keycodes|keyCode]] is held down.
 +
<edcode class="example">
 +
//press space to see the message
 +
 
 +
function update(){
 +
  clear();
 +
  if (keyIsDown(32)) {
 +
    print("The Space Bar is held down");
 +
  }
 +
}
 +
 
 +
run(update);
 +
</edcode>
  
 
===run(move,draw,updateRate)===  
 
===run(move,draw,updateRate)===  
Line 47: Line 136:
 
Returns true if the key indicated by keyCode was pressed since the last move() cycle of a program using run().
 
Returns true if the key indicated by keyCode was pressed since the last move() cycle of a program using run().
  
 +
 +
===canvasSave()===
 +
saves the canvas state.  Remembers position, scale and angle of the canvas.
 +
 +
===canvasRestore()===
 +
sets the canvas state back to what it was when you last called canvasSave.
 +
 +
===canvasTranslate(x,y)===
 +
 +
===canvasRotate(angle)===
 +
 +
===canvasScale(scaleX,scaleY)===
 +
 +
===drawPolygon(...a list of x,y values...)===
 +
<edcode class="example">
 +
  drawPolygon(  300,100, 500,20, 400,300, 200,200);
 +
</edcode>
 +
 +
===fillPolygon(...a list of x,y values...)===
 +
 +
===getMouseInfo()===
 +
Returns the position of the mouse pointer and the state of the mouse buttons.
 +
 +
===distance(a,b)===
 +
Returns the distance between the point (a.x,a.y) and (b.x,b.y)
 +
<edcode class="example">
 +
var c= {x:320, y:240};
 +
 +
function update() {
 +
  var m = getMousePosition();
 +
 +
  clear();
 +
  drawLine(c.x,c.y,m.x,m.y);
 +
  fillCircle(c.x,c.y,5);
 +
  fillCircle(m.x,m.y,5);
 +
 +
  print("c",c.x,c.y-5);
 +
  print("m",m.x,m.y-5);
 +
 +
  var d = distance(c,m);
 +
  print("The distance from c to m is "+d,0,20);
 +
 +
}
 +
 +
run(update);
 +
</edcode>
 +
 +
===rgb(r,g,b)===
 +
Returns the text representation of the colour using r,g,b  as numbers for the the red green and blue parts.
 +
 +
===grey(shade)===
 +
Returns the text representation of a shade of grey using shade as the value for all of the red green and blue parts.
 +
 +
===setRgb(r,g,b)===
 +
sets the colour using three numbers for the red green and blue parts.
 +
this is equivalent to  setColour(rgb(r,g,b));
 +
 +
<edcode class="example" >
 +
setColour("green");
 +
print("This text has one colour");
 +
 +
setRgb(150,30,200);
 +
print("This text has another colour");
 +
 +
setRgb(150,255,200);
 +
print("And this text has yet another colour");
 +
 +
 +
setRgb(0,0,0);
 +
print("0,0,0  is black" );
 +
 +
setRgb(255,0,0);
 +
print("255,0,0  is full red" );
 +
 +
setRgb(0,255,0);
 +
print("0,255,0  is full green" );
 +
 +
setRgb(0,0,255);
 +
print("0,0,255  is full blue" );
 +
 +
</edcode>
 +
 +
===setGrey(shade)===
 +
sets the colour to a shade of grey
 +
this is equivalent to  setColour(grey(sade));
 +
 +
===noise2d(x,y)===
 +
returns a value from a 2d field of noise.
 +
 +
The returned value will be in the range -1...1.
 +
<edcode class="example">
 +
var width=32;
 +
var height=24;
 +
var size=20;
 +
var zoom=10;
 +
 +
function drawLine(y) {
 +
  function drawBlock(x) {   
 +
    var n=noise2d(x/zoom,y/zoom);
 +
    // n is somewhere between -1 and 1.  We add 1 to make it between 0 and 2 then multiply it by 128 to make it between 0 and 256
 +
    var s=(n+1)*128;
 +
    setGrey(s);
 +
    fillRectangle(x*size,y*size,size,size);
 +
  }
 +
  width.times(drawBlock);
 +
}
 +
 +
height.times(drawLine);
 +
</edcode>
 +
 +
===noise3d(x,y,z)===
 +
returns a value from a 3d field of noise
  
 
==Objects==
 
==Objects==
Line 68: Line 269:
 
===inputManager===
 
===inputManager===
  
−
The input Manager tracks input events to provide a poll-able state.  The functions getMousePostion(), keyIsDown(), and  keyWentDown() access methods of inputManager with the same name.
+
The input Manager tracks input events to provide a poll-able state.  The functions getMouseInfo(), keyIsDown(), and  keyWentDown() access methods of inputManager with the same name.
  
 
Key down events are accumulated in a buffer and transferred to the keyWentDown buffer when inputManager.cycle() is called.  The run(move,draw) function calls inputManager.cycle() before each move() call.
 
Key down events are accumulated in a buffer and transferred to the keyWentDown buffer when inputManager.cycle() is called.  The run(move,draw) function calls inputManager.cycle() before each move() call.

Latest revision as of 06:32, 21 May 2023

Simple Functions[edit]

Where functions use parameters of x and y as a pair they refer to screen coordinates.

clear();[edit]

Clears the screen

setColour(colourValue);[edit]

Sets the drawing colour to be colourValue. colourValue is a text string that can take several forms.

These are all valid values for setColour. "black" "green" "orange" "rgb(50,20,10)" "rgba(60,20,40,0.5)" "#ff00ff"

You can read more about what colour names are available and how the different forms work on wikipedia http://en.wikipedia.org/wiki/Web_colors

drawCircle(x, y, radius);[edit]

Draws an unfilled circle with the center at x, y

drawLine(x1, y1, x2, y2);[edit]

Draws a line starting at x1, y1 and ending at x2, y2

drawRectangle (x, y, width, height);[edit]

Draws an unfilled rectangle with the top left corner at x, y.

fillCircle (x, y, radius);[edit]

Draws a filled circle with the center at x, y


fillRectangle (x, y, width, height);[edit]

Draws a filled rectangle with the top left corner at x, y.

print (text, x, y);[edit]

Draws text at x,y If x and y are not given, the text will appear below the last printed line.

makeBackground();[edit]

Turns the current contents of the screen into a background image that remains after a clear() call.

loadImage(imageURL,framesWide,framesHigh);[edit]

Loads an Image from a url and returns an object that can be used for drawImage. The image download will begin immediately, but drawing the image will have no effect until the download has completed. This means if you try to draw an image immediately after a loadImage call it will most likely not appear since it has not had time to download.

drawImage(image, x, y)[edit]

Draws an image with the top left corner at x,y on the screen.

keyIsDown(keyCode)[edit]

Returns true if the key indicated by keyCode is held down.

run(move,draw,updateRate)[edit]

This function expects move and draw to be functions. It will set up a timer and repeatedly call move() and draw() updateRate times a second.

keyWentDown(keyCode)[edit]

Returns true if the key indicated by keyCode was pressed since the last move() cycle of a program using run().


canvasSave()[edit]

saves the canvas state. Remembers position, scale and angle of the canvas.

canvasRestore()[edit]

sets the canvas state back to what it was when you last called canvasSave.

canvasTranslate(x,y)[edit]

canvasRotate(angle)[edit]

canvasScale(scaleX,scaleY)[edit]

drawPolygon(...a list of x,y values...)[edit]

fillPolygon(...a list of x,y values...)[edit]

getMouseInfo()[edit]

Returns the position of the mouse pointer and the state of the mouse buttons.

distance(a,b)[edit]

Returns the distance between the point (a.x,a.y) and (b.x,b.y)

rgb(r,g,b)[edit]

Returns the text representation of the colour using r,g,b as numbers for the the red green and blue parts.

grey(shade)[edit]

Returns the text representation of a shade of grey using shade as the value for all of the red green and blue parts.

setRgb(r,g,b)[edit]

sets the colour using three numbers for the red green and blue parts. this is equivalent to setColour(rgb(r,g,b));


setGrey(shade)[edit]

sets the colour to a shade of grey this is equivalent to setColour(grey(sade));

noise2d(x,y)[edit]

returns a value from a 2d field of noise.

The returned value will be in the range -1...1.

noise3d(x,y,z)[edit]

returns a value from a 3d field of noise

Objects[edit]

eventManager[edit]

The eventManager receives events from the hosting webpage and passes them out to attached listeners.

Programs can receive events by installing listeners with eventManager.addEventListener(eventName,eventFunction)

The events that can be received are

  • mousedown
  • mouseup
  • mousemove
  • keydown
  • keyup
  • batchnotify

The object passed to the event listener will not have the full details that may exist in the browser. It is a simple object with no methods and just a few of the standard fields transferred from the browser event.

inputManager[edit]

The input Manager tracks input events to provide a poll-able state. The functions getMouseInfo(), keyIsDown(), and keyWentDown() access methods of inputManager with the same name.

Key down events are accumulated in a buffer and transferred to the keyWentDown buffer when inputManager.cycle() is called. The run(move,draw) function calls inputManager.cycle() before each move() call.

Retrieved from "https://fingswotidun.com/code/index.php?title=API&oldid=1355"