graphics & simulations (& games), oh my! ryan davis, seattle.rb … · 2020. 5. 16. ·...

Graphics & Simulations (& Games), Oh My!

RubyConf 2018, Los Angeles, CA

Ryan Davis, Seattle.rb

@the_zenspider

Graphics & Simulations

(& Games), Oh My!

@the_zenspider

Setting Expectations50% Show & Tell50% TutorialMedium CodeAll Levels of Developer

~180 slides / 35 min = ~5 spm�2

@the_zenspider

Ryan DavisCoding professionally 27 years, 18 years Ruby.Founder, Seattle.rb; First & Oldest Ruby Brigade.Author: minitest, flog, flay, debride, ruby_parser, etc.Pushed over 1000 gems into the Ruby Ecosystem.Developer’s Developer: I ❤ building tools.Run Seattle.rb Consulting http://seattlerb.com/I’m available for hire.

@the_zenspider

What is Graphics?

@the_zenspider

gem install graphics --pre

@the_zenspider

Simple Framework

@the_zenspider

Simulations�7

@the_zenspider

Art�8

@the_zenspider

Visualizations�9

@the_zenspider

Games�10

@the_zenspider

Grade-School Maths

@the_zenspider

NOT Game Programming

Conventions�12

@the_zenspider

Demystify�13

@the_zenspider

New Tool in Your Toolbox

@the_zenspider

WARNING:

@the_zenspider

I Suck at Art�16

@the_zenspider

Aesthetically Challenged

@the_zenspider

Maths = OK�18

@the_zenspider

!scientist�19

@the_zenspider

!game_dev�20

@the_zenspider

Just Like You!�21

@the_zenspider

Damn Good Tool Dev

@the_zenspider

graphics =

simple�23

@the_zenspider

Jumping Straight In

@the_zenspider

Totally Blank Canvas

require "graphics"

class SimpleSimulation < G::S include WhiteBackground end

SimpleSimulation.new.run

@the_zenspider

Drawing a Circle

# class SimpleSimulation def draw n super circle w/2, h/2, 15, :blue, :filled end

@the_zenspider

Drawing a Circle, via Body

class Ball < Graphics::Body COUNT = 1

class View def self.draw w, b w.circle b.x, b.y, 15, :blue, :filled end end end

@the_zenspider

Using a Body

# class SimpleSimulation def initialize super

register_bodies populate Ball end

@the_zenspider

Adding Behavior

# class Ball def initialize w super

self.a = random_angle self.m = rand 5..15 end

@the_zenspider

Moving the body—asteroids

# class Ball def update move wrap end

@the_zenspider

Moving the body—pong

# class Ball def update move bounce 0 # (0 == no friction) end

@the_zenspider

Moving the body—bouncing

# class Ball G = V[0, -0.3]

def update self.velocity += G move bounce end

@the_zenspider

Many bodies

# class Ball COUNT = 25

@the_zenspider

Final Versionrequire "graphics"

class SimpleSimulation < Graphics::Simulation include WhiteBackground

def initialize super

register_bodies populate Ball end end # … SimpleSimulation.new.run

@the_zenspider

class Ball < Graphics::Body COUNT = 25 G = V[0, -18 / 60.0]

def initialize w super

self.a = random_angle self.m = rand 5..15 end

def update self.velocity += G move bounce end end

@the_zenspider

class Ball class View def self.draw w, b w.circle b.x, b.y, 15, :blue, :filled end end end

@the_zenspider

require "graphics"

class SimpleSimulation < G::S include WhiteBackground

def initialize super register_bodies populate Ball end

class Ball < Graphics::Body COUNT = 25 G = V[0, -18 / 60.0]

def initialize w super self.a = random_angle self.m = rand 5..15 end

def update self.velocity += G move bounce end

class View def self.draw w, b w.circle b.x, b.y, 15, :blue, :filled end end end end

SimpleSimulation.new.run

@the_zenspider

Art Gallery

@the_zenspider

Generative Art

@the_zenspider�40

@the_zenspider�41

@the_zenspider�42

@the_zenspider�43

@the_zenspider�44

@the_zenspider�45

@the_zenspider

Mathy / Nerdy Things

@the_zenspider�47

@the_zenspider�48

@the_zenspider�49

@the_zenspider�50

@the_zenspider

Simulations

@the_zenspider�52

@the_zenspider�53

@the_zenspider�54

@the_zenspider

fluid.rb—fluid dynamics aka Smoothed particle dynamics

@the_zenspider�56

@the_zenspider�57

@the_zenspider�58

@the_zenspider

@the_zenspider�60

@the_zenspider�61

@the_zenspider�62

@the_zenspider�63

@the_zenspider�64

@the_zenspider

Graphics

@the_zenspider

How is it Different?

@the_zenspider

Approachable�67

@the_zenspider

Undemanding�68

@the_zenspider

Understandable

@the_zenspider

Empowering�70

@the_zenspider

Experimentable

@the_zenspider

Real Maths!

@the_zenspider

Uses degrees.�73

@the_zenspider

Draws in quadrant 1

(0-90 degrees).

@the_zenspider

Game Math Coordinates

@the_zenspider�76

@the_zenspider

Comprehensible

@the_zenspider

Opinionatedly Pretty

@the_zenspider

20+ Drawing Primitives

@the_zenspider

Pretty drawing!

@the_zenspider

Decoratorsclass MySimulation < Graphics::Simulation include WhiteBackground include ShowFPS include DrawGrid; GRID_WIDTH = 100 end

@the_zenspider

Architecture

@the_zenspider

Update & Draw Loop

@the_zenspider

30,000 Foot View

CanvasModel screen

@the_zenspider

Translates to:

drawupdate present

@the_zenspider

Abstraction of Drawing

CanvasModel screen

@the_zenspider

“Reality”

Previous Canvas

Current Canvas

@the_zenspider

Run Looploop do iter_per_tick.times { update n; n += 1 } draw n renderer.present end

@the_zenspider

updatedef update n _bodies.each do |ary| ary.each(&:update) end end

@the_zenspider

drawdef draw n clear

_bodies.each do |ary| draw_collection ary end end

def draw_collection ary return if ary.empty?

cls = get_view_class ary

ary.each do |obj| cls.draw self, obj end end

@the_zenspider

renderrenderer.present

@the_zenspider

Class Heirarchy

AbstractSimulation

Drawing Simulation

@the_zenspider

Simulation

@the_zenspider

“Normal” Functionality

@the_zenspider

Animation�95

@the_zenspider

Clears the window

@the_zenspider

Smooth Drawing

@the_zenspider

Drawing

@the_zenspider

Never Clears�99

@the_zenspider

Single Canvas�100

@the_zenspider

Single Buffered�101

@the_zenspider

Static�102

@the_zenspider

Primitives

�103

@the_zenspider

Shortcutsm = 50 # margin rx = rand w # random x ry = rand h # random y rc = color.keys.sample # random color rb = [true, false].sample # random bool

def r50 # random value rand 50 end

�104

@the_zenspider

�105

clear # defaults to CLEAR_COLOR clear :red

@the_zenspider

�106

1000.times do point rx, ry, rc end

@the_zenspider

�107

line m, h-n-m, w-m, n+m, :red

@the_zenspider

�108

angle w/2, h/2, 3*n, h/2-m, :red

@the_zenspider

hline/vline

�109

hline (3*n)%h, :red vline (3*n)%w, :blue

@the_zenspider

circle

�110

circle rx, ry, r50, rc, rb

@the_zenspider

ellipse

�111

ellipse rx, ry, r50, r50, rc, rb

@the_zenspider

fast_rect

�112

fast_rect rx, ry, r50, r50, rc

@the_zenspider

�113

rect rx, ry, r50, r50, rc, rb

@the_zenspider

polygon

�114

points = rand(3..8).times.map { [rx, ry] } polygon *points, rc

@the_zenspider

bezier

�115

bezier(m, m+n, # p1 2*m, 0, # c1 w-2*m, h, # c2 w-m, h-m-n, # p2 rc)

@the_zenspider

sprite & blit

�116

self.tank = sprite 40, 30 do rect 0, 0, 39, 29, :black rect 0, 4, 39, 21, :black

line 0, 2, 39, 2, :black line 0, 27, 39, 27, :black end

self.turret = sprite 41, 16 do # … more of the same end

blit tank, w/2, h/2, n*2 blit turret, w/2, h/2, n*3

@the_zenspider

image & blit

�117

self.tank = image "body.png" self.turret = image "turret.png"

blit tank, w/2, h/2, n*2 blit turret, w/2, h/2, n*3

@the_zenspider

render_text & put

�118

font = find_font("Livory", 32) hello = render_text( "Hello RubyConf!”, :red, font)

put hello, w/2, h/2, -n

@the_zenspider

�119

hello = "Hello RubyConf!" text hello, m, n*30, rc

@the_zenspider

debug, fps, & mouse

�120

fps n, :black x, y, * = mouse debug "n=%d x=%d, y=%d", n, x, y

@the_zenspider

�121

x, y, * = mouse debug "n=%d x=%d, y=%d", n, x, y fps n, :black

save "debug.png" if n == 100

@the_zenspider

Generative Art

�122

@the_zenspider�123

@the_zenspider

Mondrian-Style Generative Art

�124

http://www.zenspider.com/ruby/2018/06/interesting-problems-mondrian.html

@the_zenspider

Sketch

�125

@the_zenspider

�126

class Mondrian < G::D W = 20 include WhiteBackground include DrawGrid; GRID_WIDTH=W

def initialize super do art end end

def art # where the work goes end

alias r fast_rect # other helpers: rx, ry, etc end

@the_zenspider

Black Rectangle

�127

def art r 120, 0, W, h, :black r 0, 80, w, W, :black end

@the_zenspider

Stripes Spanning Window

�128

def art xs = rx rand 2..5 ys = ry rand 2..5

xs.each do |x| r x, 0, W, h, :black end

ys.each do |y| r 0, y, w, W, :black end end

@the_zenspider

Filled Regions

�129

COLOR = [:red, :yellow, :blue]

def regions xs, ys rand(1..5).times.each do xi = rand(xs.size-1) yi = rand(ys.size-1) x0, x1 = xs[xi..xi+1] y0, y1 = ys[yi..yi+1] c = COLOR.sample

r x0, y0, x1-x0, y1-y0, c end end

@the_zenspider

Comparing

�130

@the_zenspider

Visualization

�131

@the_zenspider

Plotting

�132

@the_zenspider

Too Much Data

�133

@the_zenspider

Message Size / Time

�134

@the_zenspider

Gathering Data is Easy

�135

@the_zenspider

Just Looking Doesn’t Help>> d = Marshal.load File.read "plot.cache"; nil => nil >> d.size => 954165 >> d.first 5 => [[100, 0.5], [30, 0.1], [46, 0.6], [439, 0.6], [215, 0.1]] >> d.transpose.map(&:min) => [30, 0.0] >> d.transpose.map(&:avg) => [151, 0.240460507354598] >> d.transpose.map(&:max) => [1740, 88.8] >> dsr = d.map { |a| a.map { |f| f.round 2 } }; nil => nil >> h = d.count_by(&:itself); nil >> pp h.sort_by { |(k,v), c| [-v, -c, k] }.first 5; nil [[[20.4, 500.0], 1], [[13.51, 479.17], 1], [[20.11, 462.84], 1], [[20.4, 458.9], 1]] => nil

�136

@the_zenspider

But Plotting It?�137

@the_zenspider

R?�138

@the_zenspider

Excel?�139

@the_zenspider

Or…?�140

@the_zenspider

Just Use Ruby™!

�141

@the_zenspider

Sketch

�142

@the_zenspider

Blank Canvas

�143

class Plot < G::S MAX = 500

include WhiteBackground include DrawGrid GRID_WIDTH = 50

def initialize data super MAX, MAX end

def draw n super end end

@the_zenspider

Prepare Dataattr_accessor :data

def initialize d super MAX, MAX

register_color :point, 255, 0, 0, 16 # very translucent red

d = scale_to d # scale to window self.data = d.group_by(&:itself) # group by values

data.each do |k, v| data[k] = Math.log(v.size) # count groups, log scale end end

�144

@the_zenspider

Visualize

�145

def draw n super

data.each do |(x, y), c| point x, y, :gray circle x, y, c, :point, :fill end end

@the_zenspider

Extend�147

@the_zenspider

Experiment!�148

@the_zenspider

Simulations

�149

@the_zenspider

https://en.wikipedia.org/wiki/Langton's_ant

Langston’s Ants

�150

@the_zenspider

Simple Rulesif ⚪: draw ⚫, turn ↰if ⚫: draw ⚪, turn ↱move onerepeat

�151

Draw BlackTurn Left

Forward 1

Draw WhiteTurn RightForward 1

BlackWhite

@the_zenspider

Sketch

�152

@the_zenspider

Blank canvas

�153

class Vants0 < Graphics::Drawing include WhiteBackground

register_bodies populate Vant end

# …other stuff…

class Vant < Graphics::Body COUNT = 100 end end

@the_zenspider

Drawing

�154

def draw if s[x, y] == white then s[x, y] = black turn 270 else s[x, y] = white turn 90 end move_by a, 1 end

@the_zenspider

Ant Farm!

�155

@the_zenspider

�156

https://en.wikipedia.org/wiki/Boids

@the_zenspider

Rulescohesion: steer to move toward the average position (center of mass) of local flockmates.separation: steer to avoid crowding local flockmates.alignment: steer towards the average heading of local flockmates.

�157

@the_zenspider

The Usual Startclass Boids < G::S include WhiteBackground include ShowFPS

attr_accessor :boids

self.boids = populate Boid register_bodies boids end end

�158

@the_zenspider

class Boid < G::B COUNT = 25 MAX_DISTANCE = 100 MAX_VELOCITY = 5

self.m = rand * MAX_VELOCITY self.a = random_angle end

class View def self.draw w, b x, y, a, m = b.x, b.y, b.a, b.m

w.circle x, y, MAX_DISTANCE, :gray90 w.angle x, y, a, 3 * m, :red w.circle x, y, 5, :black, :filled end end end

�159

@the_zenspider

Rule 1: Cohesiondef rule1 (center_mass - position) * PCT_DAMPENER end

def center_mass nearby = self.nearby

return position if nearby.empty?

nearby.avg(V::ZERO, &:position) end

�160

@the_zenspider

Rule 2: Separationdef rule2 too_close = nearby.filter_map { |b| diff = b.position - self.position next if diff.magnitude > TOO_CLOSE diff }

if too_close.empty? then V::ZERO else -too_close.avg(V::ZERO) / 8 end end

�161

@the_zenspider

Rule 3: Alignmentdef rule3 nearby = self.nearby

return velocity if nearby.empty?

v = nearby.avg(V::ZERO, &:velocity)

(v - velocity) / 4 end

�162

@the_zenspider

Sum and Movedef update v1 = rule1 v2 = rule2 v3 = rule3

self.velocity += v1 + v2 + v3 limit_velocity

move wrap end

�163

@the_zenspider

�165

@the_zenspider

Tanks (pew pew)

�166

@the_zenspider

Sketch

�167

@the_zenspider

Rulestank is in arenaleft/right: turn tankforward/back: accelerate/decelerate‘a’ / ’s’: turn the turret Bullets and firing left as an exercise.

�168

@the_zenspider

Blank canvasrequire "graphics"

class TankGame < Graphics::Simulation def initialize super 640, 640

register_body Tank.new self end end

TankSprites.new.run

�169

@the_zenspider

Bare Tank Canvasclass Tank < Graphics::Body attr_accessor :turret

self.x = w.w/2 self.y = w.h/2 self.turret = 0 end end

�170

@the_zenspider

Sprite# class TankGame def initialize # … a, b = 40, 30 self.body_img = sprite a, b do rect 0, 0, a-1, 29, :black rect 0, 4, a-1, 21, :black

line 0, 2, a-2, 2, :black line 0, b-4, a-2, b-4, :black end

a, b = 41, 16 self.turret_img = sprite a, b do rect a/2-8, b/2-8, 15, 15, :black angle a/2-1, b/2-1, 0, 28, :black line a/2+20, b/2-3, a/2+20, b/2+1, :black end end

�171

@the_zenspider

Blit# class Tank class View def self.draw w, b x, y, a, t = b.x, b.y, b.a, b.turret

w.blit w.body_img, x, y, a w.blit w.turret_img, x, y, t end end

�172

@the_zenspider

Behavior# class Tank def update self.m = m.clamp 0, MAX_SPEED move clip end

def turn_right; self.a -= ROTATION; aim_right; end def turn_left; self.a += ROTATION; aim_left; end def aim_right; self.turret -= ROTATION; end def aim_left; self.turret += ROTATION; end def accelerate; self.m += ACCELERATE; end def decelerate; self.m -= DECELERATE; end

�173

@the_zenspider

Event Handling# class TankGame def initialize_keys super

add_key_handler(:RIGHT) { tank.turn_right } add_key_handler(:LEFT) { tank.turn_left } add_key_handler(:UP) { tank.accelerate } add_key_handler(:DOWN) { tank.decelerate } add_key_handler(:A) { tank.aim_left } add_key_handler(:S) { tank.aim_right } end

�174

@the_zenspider

Final Result

�175

@the_zenspider

Conventions

�176

@the_zenspider

Sketch & Rules�177

@the_zenspider

Blank Canvas�178

@the_zenspider

Build Up�179

@the_zenspider

Drawing ➡ Simulation

�180

@the_zenspider

�181

MyApp (Controller)

Simulation Body (Model)

@the_zenspider

DecoratorsDisplayFPSWhiteBackgroundDrawGridetc

�182

@the_zenspider

🔬🛠

�183

@the_zenspider

Thank You!If you want to sponsor my work on Open

Source: https://www.patreon.com/zenspider

If you want to hire me: http://www.seattlerb.com/

graphics & simulations (& games), oh my! ryan davis, seattle.rb … · 2020. 5. 16. ·...

Documents

classical electrostatics for biomolecular simulations ·...

let’s wr e an...

doc 02 - washington headquarters services room... ·...

ryan smith - ryan and smith

size doesn’t matter ryan davis, seattle.rb size doesn’t...

ruby on rails on minitest - zenspider.comruby on rails on...

web enabling hla compliant simulations to support ...web...

crowd simulations

atomistic simulations

hurting code for fun proﬁt hurting code · 2020. 5....

nr- ryan zinke sat jul 1, 2017€¦ · who: gareth rees,...

nvidia geforce ryan hendrixson ryan schubert allison...

business simulations

sts simulations

ryan carter ryan goodwin joel marchildon landon zimmer

simulations compendium...compendium of simulations indian...

minitest & rails, no pony ryan davis, seattle.rb min est...

booklet simulations

trolls of 2013 -...

magorban graveyard reduced - tipperary studies...ryan, annie...