pbox2d 0.9.1-java → 1.0.0-java

data/docs/_posts/2016-10-14-welcome.md

@@ -0,0 +1,183 @@
+---
+layout: post
+title:  "Using pbox2d gem"
+date:   2016-10-14 06:00:13
+categories: jruby_art update
+---
+
+You should have JRubyArt (or propane) and the pbox2d gem installed, from your sketch `require` pbox2d
+```ruby
+require 'pbox2d'
+
+# A list we'll use to track fixed objects
+attr_reader :box2d, :boundaries, :boxes
+```
+You then need to create an instance of `Box2D` in the setup
+```ruby
+def setup
+  size(400,300)
+  @box2d = WorldBuilder.build(app: self, gravity: [0, -20])
+```
+
+### From sketch to physics world and vice versa
+
+Because of the peculiar choice by the processing guys down is up (dimensions in pixels) jbox2d doesn't like to live in the pixel world (where up is really up), and prefers meters or feet and inches (whatever). What this means is that there is a need to scale between the two worlds using `world_to_processing` and `processing_to_world` [methods provided][methods]. You should study the included [example sketches][examples].
+
+### Example Sketch ###
+
+```ruby
+require 'pbox2d'
+require_relative 'lib/boundary'
+
+# A list we'll use to track fixed objects
+attr_reader :box2d, :boundaries, :boxes
+
+java_alias :background_int, :background, [Java::int]
+java_alias :stroke_int, :stroke, [Java::int]
+
+Vect = Struct.new(:x, :y)
+
+def setup
+  sketch_title 'Quick Test'
+  stroke_int(0)  # set stroke this way to avoid overload warnings
+  srand(5)
+  # Initialize box2d physics and create the world
+  @box2d = WorldBuilder.build(app: self, scale: 10, gravity: [0, -20.0])
+  puts box2d.version
+  # Set a custom gravity
+  # box2d.gravity(0, -20)  
+  # Create ArrayLists
+  @boxes = []
+  @boundaries = [
+    Boundary.new(box2d, Vect.new(width / 4, height - 5), Vect.new(width / 2 - 50, 10)),
+    Boundary.new(box2d, Vect.new(3 * width / 4, height - 50), Vect.new(width / 2 - 50, 10))
+  ]
+end
+
+def draw
+  background_int(255) # set background this way to avoid overload warnings
+  # Boxes fall from the top every so often
+  boxes << Box.new(box2d, width / 2, 30) if rand < 0.99
+  boundaries.each(&:display)  
+  boxes.each(&:display)  
+  # Boxes that leave the screen, we delete them note they have to be deleted
+  # from both the box2d world and locally  
+  boxes.reject!(&:done)  
+  exit if frame_count >= 908
+end
+
+# A rectangular box
+class Box
+  include Processing::Proxy
+  # We need to keep track of a Body and a width and height
+  attr_reader :box2d, :body, :w, :h
+
+  # Constructor
+  def initialize(b2d, x, y)
+    @w = rand(4..16)
+    @h = rand(4..16)
+    @box2d = b2d
+    # Add the box to the box2d world
+    make_body(Vec2.new(x, y), w, h)
+  end
+
+  def done
+    # Let's find the screen position of the particle
+    pos = box2d.body_coord(body)
+    # Is it off the bottom of the screen?
+    return false unless (pos.y > box2d.height + w * h)
+    box2d.destroy_body(body)
+    true
+  end
+
+  # Drawing the box
+  def display
+    # We look at each body and get its screen position
+    pos = box2d.body_coord(body)
+    # Get its angle of rotation
+    a = body.angle    
+    rect_mode(CENTER)
+    push_matrix
+    translate(pos.x, pos.y)
+    rotate(-a)
+    fill(175)
+    rect(0, 0, w, h)
+    pop_matrix
+  end
+
+  # This function adds the rectangle to the box2d world
+  def make_body(center, w, h)    
+    # Define a polygon (this is what we use for a rectangle)
+    sd = PolygonShape.new
+    box2d_w = box2d.scale_to_world(w / 2)
+    box2d_h = box2d.scale_to_world(h / 2)
+    sd.setAsBox(box2d_w, box2d_h)    
+    # Define a fixture
+    fd = FixtureDef.new
+    fd.shape = sd
+    # Parameters that affect physics
+    fd.density = 1
+    fd.friction = 0.3
+    fd.restitution = 0.5    
+    # Define the body and make it from the shape
+    bd = BodyDef.new
+    bd.type = BodyType::DYNAMIC
+    bd.position.set(box2d.processing_to_world(center))    
+    cs = CircleShape.new
+    @body = box2d.create_body(bd)
+    body.create_fixture(fd)
+    # Give it some initial random velocity
+    body.setLinearVelocity(Vec2.new(rand(-5.0..5), rand(2.0..5)))
+    body.setAngularVelocity(rand(-5.0..5))
+  end
+end
+
+def settings
+  size(400,300)
+end
+```
+The boundary classes
+
+```ruby
+class Boundary
+  include Processing::Proxy
+  attr_reader :box2d, :b, :pos, :size, :a
+
+  def initialize(b2d, pos, sz, a = 0)
+    @box2d, @pos, @size, @a = b2d, pos, sz, a
+    # Define the polygon
+    sd = PolygonShape.new
+    # Figure out the box2d coordinates
+    box2d_w = box2d.scale_to_world(size.x / 2)
+    box2d_h = box2d.scale_to_world(size.y / 2)
+    # We're just a box
+    sd.set_as_box(box2d_w, box2d_h)
+    # Create the body
+    bd = BodyDef.new
+    bd.type = BodyType::STATIC
+    bd.angle = a
+    bd.position.set(box2d.processing_to_world(pos.x, pos.y))
+    @b = box2d.create_body(bd)
+    # Attached the shape to the body using a Fixture
+    b.create_fixture(sd, 1)
+  end
+
+  # Draw the boundary, it doesn't move so we don't have to ask the Body for location
+  def display
+    fill(0)
+    stroke(0)
+    stroke_weight(1)
+    rect_mode(CENTER)
+    a = b.get_angle
+    push_matrix
+    translate(pos.x, pos.y)
+    rotate(-a)
+    rect(0, 0, size.x,size.y)
+    pop_matrix
+  end
+end
+```
+
+[examples]:https://github.com/ruby-processing/JRubyArt-examples/tree/master/external_library/gem/pbox2d/
+[methods]:{{ site.github.url }}/methods/methods/
+[classes]:{{ site.github.url }}/classes/classes/

data/docs/_sass/_base.scss

@@ -0,0 +1,204 @@
+/**
+ * Reset some basic elements
+ */
+body, h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, hr,
+dl, dd, ol, ul, figure {
+    margin: 0;
+    padding: 0;
+}
+
+
+
+/**
+ * Basic styling
+ */
+body {
+    font-family: $base-font-family;
+    font-size: $base-font-size;
+    line-height: $base-line-height;
+    font-weight: 300;
+    color: $text-color;
+    background-color: $background-color;
+    -webkit-text-size-adjust: 100%;
+}
+
+
+
+/**
+ * Set `margin-bottom` to maintain vertical rhythm
+ */
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre,
+ul, ol, dl, figure,
+%vertical-rhythm {
+    margin-bottom: $spacing-unit / 2;
+}
+
+
+
+/**
+ * Images
+ */
+img {
+    max-width: 100%;
+    vertical-align: middle;
+}
+
+
+
+/**
+ * Figures
+ */
+figure > img {
+    display: block;
+}
+
+figcaption {
+    font-size: $small-font-size;
+}
+
+
+
+/**
+ * Lists
+ */
+ul, ol {
+    margin-left: $spacing-unit;
+}
+
+li {
+    > ul,
+    > ol {
+         margin-bottom: 0;
+    }
+}
+
+
+
+/**
+ * Headings
+ */
+h1, h2, h3, h4, h5, h6 {
+    font-weight: 300;
+}
+
+
+
+/**
+ * Links
+ */
+a {
+    color: $brand-color;
+    text-decoration: none;
+
+    &:visited {
+        color: darken($brand-color, 15%);
+    }
+
+    &:hover {
+        color: $text-color;
+        text-decoration: underline;
+    }
+}
+
+
+
+/**
+ * Blockquotes
+ */
+blockquote {
+    color: $grey-color;
+    border-left: 4px solid $grey-color-light;
+    padding-left: $spacing-unit / 2;
+    font-size: 18px;
+    letter-spacing: -1px;
+    font-style: italic;
+
+    > :last-child {
+        margin-bottom: 0;
+    }
+}
+
+
+
+/**
+ * Code formatting
+ */
+pre,
+code {
+    font-size: 15px;
+    border: 1px solid $grey-color-light;
+    border-radius: 3px;
+    background-color: #eef;
+}
+
+code {
+    padding: 1px 5px;
+}
+
+pre {
+    padding: 8px 12px;
+    overflow-x: scroll;
+
+    > code {
+        border: 0;
+        padding-right: 0;
+        padding-left: 0;
+    }
+}
+
+
+
+/**
+ * Wrapper
+ */
+.wrapper {
+    max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
+    max-width:         calc(#{$content-width} - (#{$spacing-unit} * 2));
+    margin-right: auto;
+    margin-left: auto;
+    padding-right: $spacing-unit;
+    padding-left: $spacing-unit;
+    @extend %clearfix;
+
+    @include media-query($on-laptop) {
+        max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
+        max-width:         calc(#{$content-width} - (#{$spacing-unit}));
+        padding-right: $spacing-unit / 2;
+        padding-left: $spacing-unit / 2;
+    }
+}
+
+
+
+/**
+ * Clearfix
+ */
+%clearfix {
+
+    &:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+}
+
+
+
+/**
+ * Icons
+ */
+.icon {
+
+    > svg {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        vertical-align: middle;
+
+        path {
+            fill: $grey-color;
+        }
+    }
+}

data/docs/_sass/_layout.scss

@@ -0,0 +1,236 @@
+/**
+ * Site header
+ */
+.site-header {
+    border-top: 5px solid $grey-color-dark;
+    border-bottom: 1px solid $grey-color-light;
+    min-height: 56px;
+
+    // Positioning context for the mobile navigation icon
+    position: relative;
+}
+
+.site-title {
+    font-size: 26px;
+    line-height: 56px;
+    letter-spacing: -1px;
+    margin-bottom: 0;
+    float: left;
+
+    &,
+    &:visited {
+        color: $grey-color-dark;
+    }
+}
+
+.site-nav {
+    float: right;
+    line-height: 56px;
+
+    .menu-icon {
+        display: none;
+    }
+
+    .page-link {
+        color: $text-color;
+        line-height: $base-line-height;
+
+        // Gaps between nav items, but not on the first one
+        &:not(:first-child) {
+            margin-left: 20px;
+        }
+    }
+
+    @include media-query($on-palm) {
+        position: absolute;
+        top: 9px;
+        right: 30px;
+        background-color: $background-color;
+        border: 1px solid $grey-color-light;
+        border-radius: 5px;
+        text-align: right;
+
+        .menu-icon {
+            display: block;
+            float: right;
+            width: 36px;
+            height: 26px;
+            line-height: 0;
+            padding-top: 10px;
+            text-align: center;
+
+            > svg {
+                width: 18px;
+                height: 15px;
+
+                path {
+                    fill: $grey-color-dark;
+                }
+            }
+        }
+
+        .trigger {
+            clear: both;
+            display: none;
+        }
+
+        &:hover .trigger {
+            display: block;
+            padding-bottom: 5px;
+        }
+
+        .page-link {
+            display: block;
+            padding: 5px 10px;
+        }
+    }
+}
+
+
+
+/**
+ * Site footer
+ */
+.site-footer {
+    border-top: 1px solid $grey-color-light;
+    padding: $spacing-unit 0;
+}
+
+.footer-heading {
+    font-size: 18px;
+    margin-bottom: $spacing-unit / 2;
+}
+
+.contact-list,
+.social-media-list {
+    list-style: none;
+    margin-left: 0;
+}
+
+.footer-col-wrapper {
+    font-size: 15px;
+    color: $grey-color;
+    margin-left: -$spacing-unit / 2;
+    @extend %clearfix;
+}
+
+.footer-col {
+    float: left;
+    margin-bottom: $spacing-unit / 2;
+    padding-left: $spacing-unit / 2;
+}
+
+.footer-col-1 {
+    width: -webkit-calc(35% - (#{$spacing-unit} / 2));
+    width:         calc(35% - (#{$spacing-unit} / 2));
+}
+
+.footer-col-2 {
+    width: -webkit-calc(20% - (#{$spacing-unit} / 2));
+    width:         calc(20% - (#{$spacing-unit} / 2));
+}
+
+.footer-col-3 {
+    width: -webkit-calc(45% - (#{$spacing-unit} / 2));
+    width:         calc(45% - (#{$spacing-unit} / 2));
+}
+
+@include media-query($on-laptop) {
+    .footer-col-1,
+    .footer-col-2 {
+        width: -webkit-calc(50% - (#{$spacing-unit} / 2));
+        width:         calc(50% - (#{$spacing-unit} / 2));
+    }
+
+    .footer-col-3 {
+        width: -webkit-calc(100% - (#{$spacing-unit} / 2));
+        width:         calc(100% - (#{$spacing-unit} / 2));
+    }
+}
+
+@include media-query($on-palm) {
+    .footer-col {
+        float: none;
+        width: -webkit-calc(100% - (#{$spacing-unit} / 2));
+        width:         calc(100% - (#{$spacing-unit} / 2));
+    }
+}
+
+
+
+/**
+ * Page content
+ */
+.page-content {
+    padding: $spacing-unit 0;
+}
+
+.page-heading {
+    font-size: 20px;
+}
+
+.post-list {
+    margin-left: 0;
+    list-style: none;
+
+    > li {
+        margin-bottom: $spacing-unit;
+    }
+}
+
+.post-meta {
+    font-size: $small-font-size;
+    color: $grey-color;
+}
+
+.post-link {
+    display: block;
+    font-size: 24px;
+}
+
+
+
+/**
+ * Posts
+ */
+.post-header {
+    margin-bottom: $spacing-unit;
+}
+
+.post-title {
+    font-size: 42px;
+    letter-spacing: -1px;
+    line-height: 1;
+
+    @include media-query($on-laptop) {
+        font-size: 36px;
+    }
+}
+
+.post-content {
+    margin-bottom: $spacing-unit;
+
+    h2 {
+        font-size: 32px;
+
+        @include media-query($on-laptop) {
+            font-size: 28px;
+        }
+    }
+
+    h3 {
+        font-size: 26px;
+
+        @include media-query($on-laptop) {
+            font-size: 22px;
+        }
+    }
+
+    h4 {
+        font-size: 20px;
+
+        @include media-query($on-laptop) {
+            font-size: 18px;
+        }
+    }
+}