167

• p5.js


  Reimplementation of Processing on top of Javascript
• p5.js


  • Supports script-like coding
  • Easy to get simple programs up and running
  • Has built-in methods and classes to make drawing and animation easier
• Drawing shapes


  1. rect(x, y, width, height)

  2. rectMode(mode) – CORNER(default), CENTER

  3. ellipse(x, y, width, height)

  4. ellipseMode(mode) – CENTER (default), CORNER

  
• Once you change the mode with these methods call, it will apply to all the rest of your code unless you explicitly change it again
• Drawing more shapes


  1. line(x1, y1, x2, y2)

  2. triangle(x1, y1, x2, y2, x3, y3)

  3. quad(x1,y1,x2,y2,x3,y3,x4,y4)

  
• Drawing shapes


  • ellipse(60, 50, 85, 85)
  • rect(30, 20, 60, 60)
  • triangle(90, 20, 90, 80, 30, 80)
  • line(30, 20, 90, 80)

  
• Method calling


  method, parameter, argument
• Method definition


  parameters: place holders, arguments: actual values passed in
• JavaScript and Python are dynamically typed, Java/Processing (and TypeScript) are statically typed
• Colors represented as Red Green Blue (RGB) values or Gray


  Each one ranges from 0 to 255, RGBA for transparency
• background(R,G,B)


  Paints the window with the color, clears the prior content
• background(gray)


  Specifies a value between black and white
• Basic structure of program (sketch) in processing


  Declare variables, Initialize values in setup(), Update values and draw each frame in draw(), Define any callback functions
• Drawing arcs


  arc(x, y, width, height, start, stop)
• Drawing curves


  curve(cx1, cy1, x1, y1, x2, y2, cx2, cy2)

  
• Primary colors


  red, green, blue
• Blended colors


  Secondary colors generated by mixing the primary colors
• Stroke


  The line style for a shape
• Setting stroke color and weight

  stroke(red, green, blue, alpha), stroke(red, green, blue), stroke(gray, alpha), stroke(gray), strokeWeight(weight)
• Fill


  The color of a shape
• Setting fill color


  fill(red, green, blue, alpha), fill(red, green, blue), fill(gray, alpha), fill(gray)
• Once you call stroke(), strokeWeight(), or fill() to change the settings for drawing, they will apply to all the rest code unless you change them again explicitly
• Method Overloading


  The practice to create methods with the same name but different parameters
• noStroke()


  Disable outline drawing around shapes
• noFill()


  Don't fill the shapes (background shows through)
• Controlling color and line

  • createCanvas(200, 200), strokeWeight(3), stroke(255, 0, 0), ellipse(60, 50, 85, 85), stroke(0, 255, 0), rect(30, 20, 60, 60), fill(0, 0, 255), noStroke(), triangle(90, 20, 90, 80, 30, 80), stroke(100), line(30, 20, 90, 80)
• setup()


  A builtin Processing method that is called once when a sketch first starts executing
• draw()


  A builtin Processing method that is called repeatedly by the Java Runtime Environment
• Callbacks


  Builtin functions that need to be defined by the programmer to be functioning, you define them but don't call them, the callbacks get called by the system in response to some internal or user-initiated events
• Worked out example


  • Shows for loops, simple animation
• Transformation


  Fundamental part of computer graphics, which has three components: translation, rotation, and scaling
• Transformation


  Modifying the drawing space rather than each individual visual objects
• Shapes drawn directly all use the default origin (the top-left corner of the window) as the reference point
• When rotation is applied


  The entire drawing space rotates around the default origin
• translate(x, y)


  Moves the entire drawing space to location (x, y), the top-left corner of the shifted drawing space now represents the new (0, 0)
• Drawing shapes at a negative location with top-left-corner negative halves of its width and height places the rect's center at the new (0, 0)

  
• Recipe for rotation


  1. translate(centerX, centerY)

  2. rotate(angle)

  3. draw in rotated coordinates
• Translation moves the drawing space to a new location, the new (0, 0) now represents the location that was translated to
• Transformations (including translations, rotations & scalings) are cumulative
• Saving and restoring drawing space for transformations

  1. push()

  2. Transforming and drawing the shape

  3. pop()