OTS Javascript Snippets

drawing animate

// The old smiley function from the previous step
function smiley(x, y) {
  moveTo(x, y);
  color("yellow");
  circle(0, 0, 50);
  color("black");
  circle(-20, 10, 7);
  circle(20, 10, 7);
  lineWidth(3);
  path("g -20 -10 q 20 -10 0 -50 c");
  goBack();
}

function drawing() {
  // The angle variable stores the current rotation
  var angle = 0;
  // Draw twenty frames per second (20 * 50 = 1000 milliseconds)
  setInterval(frame, 5);
  function frame() {
    // Clear the screen
    clear();
    // Update the angle
    angle = angle + 2;
    // Rotate what we are about to draw
    rotate(angle);
    // A stick...
    color("black");
    box(-5, 100, 10, 150);
    // with a smiley on top
    smiley(0, 100);
  }
}

// The following functions are available:
//
//  color(string)            - set the current color
//  lineWidth(number)        - set the line width
//  box(x, y, width, height) - draw a box
//  circle(x, y, radius)     - draw a circle
//  line(x1, y1, x2, y2)     - draw a line
//  text(x, y, string)       - draw text
//  clear()                  - clear the screen
//  path(string)             - draw a complex line
//    In a line description, the following commands are valid:
//    g x y - go to point x,y without drawing
//    l x y - draw a line from the current point to point x,y
//    c     - draw a line back to the start of the line
//    q x y cx cy - draw a curve to x,y, using cx,cy as
//                  'control point' to determine the curvature
//
//  fill()                   - fill the current path with the current color
//
// Coordinates are interpreted as if 0,0 is the center of the
// screen. x is the horizontal axis, and y the vertical.
// Positive x goes to the right, positive y goes up.
// These operations can transform the coordinate system:
//
//  moveTo(x, y)    - move the origin to x, y
//  rotate(degrees) - rotate subsequent drawing operations
//                    by a number of degrees
//  scale(factor)   - scale subsequent drawing operations
//  goBack()        - undo one transformation

drawing if

function smiley(x,y){
  moveTo(x,y);
  color("yellow");
  circle(0, 0, 50);
  color("black");
  circle(-20, 11, 7);
  circle(20, 9, 7);
  lineWidth(3);
  path("g -20 -10 q 20 -10 0 -50 c");
}

function drawing() {
  smiley(0,0);
  smiley(-100,100);
  smiley(100,100);
}

// The following functions are available:
//
//  color(string)            - set the current color
//  lineWidth(number)        - set the line width
//  box(x, y, width, height) - draw a box
//  circle(x, y, radius)     - draw a circle
//  line(x1, y1, x2, y2)     - draw a line
//  text(x, y, string)       - draw text
//  clear()                  - clear the screen
//  path(string)             - draw a complex line
//    In a line description, the following commands are valid:
//    g x y - go to point x,y without drawing
//    l x y - draw a line from the current point to point x,y
//    c     - draw a line back to the start of the line
//    q x y cx cy - draw a curve to x,y, using cx,cy as
//                  'control point' to determine the curvature
//
//  fill()                   - fill the current path with the current color
//
// Coordinates are interpreted as if 0,0 is the center of the
// screen. x is the horizontal axis, and y the vertical.
// Positive x goes to the right, positive y goes up.
// These operations can transform the coordinate system:
//
//  moveTo(x, y)    - move the origin to x, y
//  rotate(degrees) - rotate subsequent drawing operations
//                    by a number of degrees
//  scale(factor)   - scale subsequent drawing operations
//  goBack()        - undo one transformation

drawing loop

Render or press cmd/ctrl + enter drawing_loop.js Save as   

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
function drawing() {
  color("yellow"); 
  box (0,200,200,200);
  var countX = 0;
  var countY = 20; 
  while (countY > 0) {
    countX = 0; 
    while (countX < 20) {
      //color((countX + countY) % 2 === 0 ? "red" : "black");
      
      setTimeout(function(args){
        console.log(args);
        color((args[0] + args[1]) % 2 === 0 ? "red" : "black");
        box(args[0] * 10, args[1] * 10, 9, 9);
      }, 1000, [countX, countY]);
      
      //box(countX * 10, countY * 10, 9, 9);
      countX = countX + 1;
    }
    countY = countY - 1; 
  }
}
 
// The following functions are available:
//
//  color(string)            - set the current color
//  lineWidth(number)        - set the line width
//  box(x, y, width, height) - draw a box
//  circle(x, y, radius)     - draw a circle
//  line(x1, y1, x2, y2)     - draw a line
//  text(x, y, string)       - draw text
//  clear()                  - clear the screen
//  path(string)             - draw a complex line
//    In a line description, the following commands are valid:
//    g x y - go to point x,y without drawing
//    l x y - draw a line from the current point to point x,y
//    c     - draw a line back to the start of the line
//    q x y cx cy - draw a curve to x,y, using cx,cy as
//                  'control point' to determine the curvature
//
//  fill()                   - fill the current path with the current color
//
// Coordinates are interpreted as if 0,0 is the center of the
// screen. x is the horizontal axis, and y the vertical.
// Positive x goes to the right, positive y goes up.
// These operations can transform the coordinate system:
//
//  moveTo(x, y)    - move the origin to x, y
//  rotate(degrees) - rotate subsequent drawing operations
//                    by a number of degrees
//  scale(factor)   - scale subsequent drawing operations
//  goBack()        - undo one transformation
 

drawing smiley

// Below is a definition of a drawing.

var xPos = 20;

function drawing() {
  color("#ccc");
  circle(xPos, 0, 50);
  color("black");
  circle(xPos - 20, 11, 7);
  circle(xPos + 20, 9, 7);
  lineWidth(3);
  path("g "+ (xPos-20) +"  -10 q "+ (xPos+20) +" -10 "+ xPos +" -50 c");

  setTimeout(function(args){
    color(args[0]);
    lineWidth(args[1]);
    line(xPos-50,50,xPos+50,-50);
    line(xPos+50,50,xPos-50,-50);   
  }, 1000, ['#ff0000', '8']);
}

// The following functions are available:
//
//  color(string)            - set the current color
//  lineWidth(number)        - set the line width
//  box(x, y, width, height) - draw a box
//  circle(x, y, radius)     - draw a circle
//  line(x1, y1, x2, y2)     - draw a line
//  text(x, y, string)       - draw text
//  clear()                  - clear the screen
//  path(string)             - draw a complex line
//    In a line description, the following commands are valid:
//    g x y - go to point x,y without drawing
//    l x y - draw a line from the current point to point x,y
//    c     - draw a line back to the start of the line
//    q x y cx cy - draw a curve to x,y, using cx,cy as
//                  'control point' to determine the curvature
//                  
//  fill()                   - fill the current path with the current color
//
// Coordinates are interpreted as if 0,0 is the center of the
// screen. x is the horizontal axis, and y the vertical.
// Positive x goes to the right, positive y goes up.
// These operations can transform the coordinate system:
//
//  moveTo(x, y)    - move the origin to x, y
//  rotate(degrees) - rotate subsequent drawing operations
//                    by a number of degrees
//  scale(factor)   - scale subsequent drawing operations
//  goBack()        - undo one transformation