NetLogo GbCC 3.0 View Extensions

Layers in a NetLogo View

Patches + Drawing + Turtles

Patches + Javascript Extension + Image Extension + Drawing + Turtles

View Extensions

Graph

Map

Physics

Image

Graph Extension


Geogebra API https://wiki.geogebra.org/en/Reference:JavaScript

Graph Commands

  extensions [ graph ]
GRAPH
graph:show-graphgraph:hide-graphgraph:show-toolbargraph:hide-toolbargraph:bring-to-frontgraph:send-to-backgraph:set-graph-offset [ left top width height ] show graph:get-graph-offset ;; returns [ left top width height ]graph:set-opacity 0.5 show graph:get-opacity ;; returns any number between 0 and 1show graph:center-view  [ x y ] show graph:mouse-on *** new ***show graph:mouse-off *** new ***
graph:set-all "long-string-of-xml" show graph:get-all ;; returns "long-string-of-xml"graph:import-ggb-file "filename.txt"*** new ***graph:export-ggb "filename.txt"graph:import-ggb*** new ***

POINTS
graph:create-point "Point1" [ 0 0 ]
✓ graph:create-points  [ [ "Point1" [ 0 2 ] ] [ "point-2" [ 0 0 ] ] ]
✓ show graph:get-point "Point1"  ;; [ "Point1" [ 0 2 ] ]show graph:get-points  ;; [ [ "Point1" [ 0 2 ] ] [ "point-2" [ 0 0 ] ] ]graph:delete-point "Point1" graph:delete-points 
graph:set-x "Point1" 0 graph:set-y "Point1" 2 graph:set-xy "Point1" [ 0 2 ] 
✓ show graph:get-x "Point1" ;; returns 0show graph:get-y "Point1" ;; returns 2show graph:get-xy "Point1" ;; returns [ 0 2 ] 
OBJECTS (Including Points)
set  new-object graph:get-object  "MyTriangle1" ;; returns a list with a name and a descriptionset  new-objects graph:get-objects ;; returns list of names and definitions of objects, in order of creation graph:create-object  new-object graph:create-objects  new-objects  graph:delete-object  "Triangle1" graph:delete-objects
show graph:get-value  "MyTriangle1"  ;; returns getValueshow graph:get-object-type  "MyTriangle1"  ;; returns typeshow graph:object-exists  "MyTriangle1"  ;; returns booleangraph:rename-object  "MyTriangle1" "MyTriangle2" graph:show-object  "MyTriangle1" graph:hide-object  "MyTriangle1" graph:show-object-label  "MyTriangle1" graph:hide-object-label  "MyTriangle1" graph:set-draggable "Point1" true *** new ***show graph:get-draggable "Point1" ;; returns true *** new ***show graph:get-command-string  "MyTriangle1"  ;; returns command string like Polygon(A, B, C) *** new ***show graph:get-value-string  "f"  ;; returns value string like "f(x) = 0.25x + 3.75" *** new ***
TRANSLATION between Patch Coordinates and GeoGebra Coordinates
show graph:graph-to-patch [ 0 0 ] ;; returns graph coordinatesshow graph:patch-to-graph [ 0 0 ] ;; returns patch coordinatesgraph:update-graph ;; upon changing center or zoom of graph, sync graph coords and patch coords
GeoGebra Eval Commands
graph:eval-command geogebra-command 
show graph:eval-reporter geogebra-command ;; returns a value

Ideas

1. Linear Regression

extensions [ graph ]
graph:create-graph
;; Save current state of points.
set saved-graph graph:get-points ;; returns points 
;; Grab points from someone else.
set new-points gbcc:get-from-user "my-points" ;; returns points 
;; Add points in to your environment.
graph:create-points new-points 
;; Something about including new points to linear regression.
2. Same Area

extensions [ graph ]
graph:show-graph
;; Save current state of points.
set saved-graph graph:get-points ;; returns points 
;; Grab points from someone else.
set new-points gbcc:get-from-user "my-points" ;; returns points 
;; Add points in to your environment.
graph:create-points new-points 
3. Same Perimeter

extensions [ graph ]
graph:show-graph
;; Save current state of environment, locally.
set saved-xml graph:export  
;; Grab xml from someone else, by clicking on gallery.
set new-xml gbcc:get-from-user "my-xml" 
;; Replace old environment with new environment.
graph:import new-xml 
;; Change environment with Gui
;; Save new environment, where other users can access it.
gbcc:set "my-xml" graph:export
;; Share screenshot.
gbcc:broadcast-view""
4. Operations on Functions

extensions [ graph ]
graph:show-graph
;; Save objects, locally.
set saved-objects graph:get-objects 
;; Grab objects from someone else, by clicking on gallery.
set new-objects gbcc:get-from-user user-id "my-objects" 
;; Add new objects.
graph:create-objects new-objects 
;; Change environment with Gui
;; Save new environment, where other users can access it.
gbcc:set "my-objects" graph:get-objects
;; Share screenshot.
gbcc:broadcast-view""
5. Triangle Animation Ants

extensions [ graph ]
graph:show-graph
;; Create a turtle that controls a point.
create-turtles 1 [ 
  set user-name (word "carolyn" who)
  graph:create-point user-name [ graph:patch-to-graph [ xcor ycor ] ] 
  set my-turtle-id who
]  
;; Connect your point to the two other endpoints, to form a triangle.
graph:eval-command...
;; Move the turtle around, and watch the triangle change, too.
ask turtle my-turtle-id [
  graph:set-xy user-name [ graph:patch-to-graph [] xcor ycor ] ] 
]
;; Get data from others.
;; to gbcc-on-select [ user-id ] [ ;;create turtle and point and programatically make triangle...]
;; to gbcc-on-deselect [ user-id ] [ ;;remove turtle and point...]
;; to gbcc-on-forever-go [ user-id ] [ ;;move turtle and point ]
;; Version 1: Share each step, with others.
;; Version 2: Share each stamp, with others.
;; Version 3: Teacher saves stamps, replays action.  

Maps Extension


LeafletJS http://leafletjs.com/
GeoJson https://leafletjs.com/examples/geojson/

Maps Extension

  extensions [ graph ]
MAP
maps:show-mapmaps:hide-mapmaps:bring-to-frontmaps:send-to-backmaps:set-map-offset [ left top width height ] show maps:get-map-offset ;; returns [ left top width height ]maps:set-opacity 0.5 show maps:get-opacity ;; returns any number between 0 and 1show maps:mouse-on *** new ***show maps:mouse-off *** new ***
maps:set-all "long-string-of-json" show maps:get-all ;; returns "long-string-of-json" 
MAP SETTINGS
maps:set-zoom 3show maps:get-zoom  ;; returns 3maps:set-center-latlng [ 30 97 ]
✓ show maps:get-center-latlng ;; returns [ 30 97 ]
MARKERS
maps:create-marker "marker-1" [ 0 0 ]
✓ maps:create-markers  [ [ "marker-1" [ 0 0 ] ] [ "marker-2"[ 0 0 ] ] ]
✓ show maps:get-marker  ;; [ "marker-1" [ 0 0 ] ]
✓ show maps:get-markers  ;; [ [ "marker-1" [ 0 0 ] ] [ "marker-2" [ 0 0 ] ] ]
✓ maps:delete-marker "marker-1"maps:delete-markers
maps:set-lat "marker-1" 30 maps:set-lng "marker-1" 97 maps:set-latlng "marker-1" [  30 97 ] 
✓ show maps:get-lat "marker-1" ;; returns 30show maps:get-lng "marker-1" ;; returns 97show maps:get-latlng "marker-1" ;; returns [ 30 97 ] 
maps:set-draggable "marker-1" true *** new ***show maps:get-draggable "marker-1" ;; returns true *** new ***maps:update-my-latlng *** new ***show maps:get-my-latlng ;; returns [ 30 97 ] *** new ***
PATHS
maps:create-path "path-1" [ 0 0 ] 
✓ maps:create-paths  [ [ "path-1" [ 0 0 ] ] [ "marker-2"[ 0 0 ] ] ] 
✓ maps:delete-path "path-1"maps:delete-pathsmaps:set-path-color "path-1" "#555555" show maps:get-path-color "path-1" ;; returns "#555555"maps:set-path-vertices "path-1" [ [ 30 60 ] [ 31 59 ] [ 39 59 ] ] show maps:get-path-vertices "path-1" ;; returns [ [ 30 60 ] [ 31 59 ] [ 39 59 ] ] 
OBJECTS (Including Markers and Paths)
set  new-object maps:get-object  "path-1" ;; returns a list with a name and definitionmaps:create-object  new-object set  new-objectsmaps:get-objects ;; returns list of names and definitions of objects, in order of creation maps:create-objects  new-objects maps:delete-object  "path-1" maps:delete-objects 
show maps:object-exists  "path-1"  ;; returns booleanmaps:hide-object  "path-1" maps:show-object  "path-1"   
TRANSLATION between Patch Coordinates and Latitude / Latitude
✓ show maps:latlng-to-patch [ 30 -97 ] ;; returns latitude and longitudeshow maps:patch-to-latlng [ 0 0 ] ;; returns patch coordinatesmaps:update-map ;; upon changing center or zoom of map, sync lat-lng and patch coords 

Physics Extension

Box2DWeb Library. https://github.com/hecht-software/box2dweb
Documentation. https://github.com/hecht-software/box2dweb
Physics UI https://remmler.org/gbcc/v3/video.html

NetLogo/Physics Example: Import a world with friction, gravity, wrapping, linear impulses and angular impulses. The world can contain moving shapes, static shapes, joints and targets, any of which can be represented by turtles.

Objects in a Box2D Physics World


A line has two endpoints and is a member of a body.
A line has friction, density and restitution.
A line can be defined with an absolute position, or with a position relative to a body.

A circle has a center and a radius and is a member of a body.
A circle has friction, density and restitution.
A circle can be defined with an absolute position, or with a position relative to a body.

A polygon has vertices and is a member of a body.
A polygon has friction, density and restitution.
A polygon can be defined with an absolute position, or with a position relative to a body.

A body can be comprised of shapes such as lines, circles and polygons.
A body can be rotated around it's center.
A body has linear and angular velocity.
A body is defined with an absolute position.
Bodies can be dynamic (move and collide) or be static (only collide) or be a ghosts (only move).

A target is a location on a body, to which forces can be applied.

Physics Extension

  extensions [ physics ]
WORLD
physics:show-worldphysics:hide-worldgraph:show-toolbargraph:hide-toolbar 
physics:bring-to-front
physics:send-to-back
physics:set-world-offset [ left top width height ] 
show physics:get-world-offset ;; returns [ left top width height ] 
physics:set-opacity 0.5 
show physics:get-opacity ;; returns any number between 0 and 1 
physics:set-all "long-string-of-json" show physics:get-all ;; returns "long-string-of-json" 
physics:reset-ticksphysics:tick 
✓ <show physics:get-tick ;; returns list of collisions since last tickphysics:repaint 
;; WORLD SETTINGS
✓ physics:set-gravity-xy [ false true ]show physics:get-gravity-xy  ;; returns [ false true ]physics:set-wrap-xy [ true true ] ;; show physics:get-wrap-xy  ;; returns [ true true ]

physics:set-time-step 1 / 20 ;; length of time passed to simulate (seconds)  
show physics:get-time-step  ;; returns 1 / 20
physics:set-velocity-iterations 8 / 20 ;; how strongly to correct velocity  
show physics:get-velocity-iterations  ;; returns 8
physics:set-position-iterations 31 / 20 ;; how strongly to correct position  
show physics:get-position-iterations  ;; returns 3

;; LINES

physics:create-line "line-1" "body-1" ;; create a line attached to a bodyphysics:set-line-relative-endpoints "line-1" [ 0 0 ] [ 2 2 ] ;; name of line, coords of endpoints relative to center of mass of bodyphysics:set-line-endpoints "line-1" [ 10 10 ] [ 5 5 ] ;; name of line, absolute coords of endpointsshow physics:get-line-relative-endpoints "line-1"show physics:get-line-endpoints "line-1"
;; CIRCLES

physics:create-circle "circle-1" "body-1" ;; create a circle attached to a bodyphysics:set-circle-radius "circle-1" 4 ;; name of circle, radiusphysics:set-circle-relative-center "circle-1" [ 0 0 ] ;; name of circle, coords of center of circle, relative to center of mass of bodyphysics:set-circle-center "circle-1" [ 10 10 ] ;; name of circle, absolute coords of center of circleshow physics:get-circle-radius "circle-1"show physics:get-circle-relative-center "circle-1"show physics:get-circle-center "circle-1" 
;; RECTANGLES
 
physics:create-rectangle "rectangle-1" "body-1" ;; create a rectangle attached to a bodyphysics:set-rectangle-relative-corners "rectangle-1" [ [ 10 10 ] [ 5 5 ] ] ;; name of rectangle, coords of corners of rectanglephysics:set-rectangle-corners "polygon-1" [ [ 10 10 ] [ 5 5 ] ] ;; name of rectangle, coords of corners of rectangleshow physics:get-rectangle-relative-corners "rectangle-1"show physics:get-rectangle-corners "rectangle-1"physics:set-rectangle-corners "polygon-1" [ [ 10 10 ] [ 5 5 ] ] ;; name of rectangle, coords of corners of rectangleshow physics:set-rectangle-patch "rectangle-1" [ 0 0 ] show physics:get-rectangle-patch "rectangle-1";; name of rectangle, patch coords  
;; POLYGONS
 
physics:create-polygon "polygon-1" "body-1" ;; create a polygon attached to a bodyphysics:set-polygon-relative-vertices "polygon-1" [ [ 10 10 ] [ 5 5 ] [ 5 10 ] ] ;; name of line, coords of vertices for concave polygon, in clockwise order, relative to center of mass of bodyphysics:set-polygon-vertices "polygon-1" [ [ 10 10 ] [ 5 5 ] [ 5 10 ] ] ;; name of line, absolute coords of vertices for concave polygon, in clockwise ordershow physics:get-polygon-relative-vertices "polygon-1"show physics:get-polygon-vertices "polygon-1"
;; SHAPES
   
physics:set-friction "shape-1" 0.5 ;; name of shape, number between 0 and 1 (from no friction to a lot of friction)physics:set-density "shape-1" 0.5 ;; name of shape, number between 0 and 1 (from not dense to very densephysics:set-restitution "shape-1" 0.5 ;; name of shape, number between 0 and 1 (from not bouncy to very bouncy)show physics:get-friction "shape-1"show physics:get-density "shape-1"show physics:get-restitution "shape-1"
;; BODIES

physics:set-behavior "body-1" "dynamic" ;; static (doesn't move, does collide), dynamic (does move and collide), ghost (does move, doesn't collide)physics:set-body-xy "body-1" [ 0 0 ] physics:set-angle "body-1" 180 ;; degreesphysics:set-linear-velocity "body-1" [ 0 0 ] ;; vector physics:set-angular-velocity "body-1" 180 ;; angle in degrees show physics:get-behavior "body-1"show physics:get-body-xy "body-1"show physics:get-angle "body-1"show physics:get-linear-velocity "body-1"show physics:get-angular-velocity "body-1"
;; TARGETS

physics:create-target "target-1" "body-1"physics:set-target-relative-xy "target-1" [ 0 0 ] ;; name of target, coords relative to center of mass of bodyphysics:set-target-xy "target-1" [ 10 10 ] ;; name of target, absolute coordsshow physics:get-target-relative-xy "target-1"show physics:get-target-xy "target-1"physics:delete-target "target-1"physics:delete-targets
;; OBJECTS
   
physics:set-body-id "shape-1" "body-2" ;; connect line, circle, polygon or target to a different bodyshow physics:get-body-id "shape-1" ;; get which body the shape or target is connected toset new-objects physics:get-objects ;; returns list of objectsphysics:create-objects  new-objects set  new-object physics:get-object "shape-1";; returns a list with a shape and a descriptionphysics:create-object  new-objectshow physics:get-object-type  "my-triangle-1"  ;; returns "triangle"physics:delete-object "object-1"physics:delete-objects
physics:object-existsshow physics:show-objectsshow physics:hide-objects 
;; SHAPES AND BODIES
   
show physics:get-mass "shape-1"
show physics:get-center-of-mass "shape-1"
;; APPLY FORCE AT TARGET
✓ physics:apply-force "target-1" 10 180 ;; applies with force of 10 and angle of 180 degreesphysics:apply-force-relative-angle "target-1" 10 20 ;; applies with force of 10 and relative angle of 20 degreesphysics:apply-linear-impulse "target-1" 10 180 ;; applies with force of 10 and angle of 180 degrees physics:apply-linear-impulse-relative-angle "target-1" 10 20 ;; applies with force of 10 and relative angle of 20 degrees physics:apply-torque "target-1" 10  ;; applies with force of 10 physics:apply-angular-impulse "target-1" 10 ;; applies with force of 10
  
  ;; Connections between Turtles and Objects
✓ physics:connect-who-to-object who object-idshow physics:get-connected;; get list of pairs of turtle ids to object ids physics:disconnect-who who 

Ideas

1. Apply a force to each bristlebot

extensions [ physics ]
create-turtles 6 [
  set shape "turtle"
  ;; create a circle, and make it belong to a body
  physics:create-circle (word "circle- who) (word "body-" who )
  ;; place the body, somewhere
  physics:set-body-xy ("body-1" [ xcor ycor  ]
  physics:set-circle-relative-xy (word "circle-" who) [ 0 0 ]
  physics:set-radius (word "circle-" who) 2
  ;; create a target at the center of a body
  physics:create-target (word "target-" who) (word "body-" who) 
  physics:set-target-relative-xy (word "target-" who) [ 0 0 ]
  ;; connect the turtle to the body to which the circle and target belong
  physics:connect-who-to-object who  (word "body-" who )
]
ask turtles [
  ;; apply a force of 10, to a target on a body, at a relative angle of 90 degrees 
  physics:apply-force-relative-angle (word "target-" who) 10 90
]
2. Apply a linear force (white arrow)
to a Pokemon card
extensions [ physics ]
;; create a polygon, and make it belong to a body
physics:create-polygon "rectangle-1" "body-1"
physics:set-polygon-vertices [ [ 0 0 ] [ -4 0 ] [ -4 4 ] [ 0 4 ] ]
;; create a rectanglular turtle and connect it to the body
create-turtles 1 [
  set shape "rectangle"
  physics:connect-who-to-object who  body-1
]
;; create a target, offset from the center of a body
physics:create-target "target-white" "body-1"
physics:set-target-relative-xy "target-white" [ 2 2 ]
;; create an arrow shaped turtle and connect it to the target
create-turtles 1 [
  set shape "arrow"
  physics:connect-who-to-object who "target-white"
]
;; apply a force of 10, to a target on a body, at a relative angle of 35 degrees 
physics:apply-force-relative-angle "target-white" 10 35
3. Apply a linear force (yellow arrow)
and an angular force (red arrow)
;; apply a linear impulse of 12, at a relative angle of -30 degrees 
physics:apply-linear-impulse-relative-angle "target-yellow" 12 -30
;; apply an angular impulse of 20 
physics:apply-angular-impulse "target-red" 10
4. In ideas 2 and 3, above,
something else needs to be happening to make
two touch become one touch.

Image Extension

Image Extension

extensions [ image ]

Commands

image:clear

image:import-file "cats.png";; imports an image file, local to the app