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

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.

�3




@the_zenspider

What is Graphics?

�4




@the_zenspider

gem install graphics --pre

�5




@the_zenspider

Simple Framework

�6




@the_zenspider

Simulations�7




@the_zenspider

Art�8




@the_zenspider

Visualizations�9




@the_zenspider

Games�10




@the_zenspider

Grade-School Maths

�11




@the_zenspider

NOT Game Programming

Conventions�12




@the_zenspider

Demystify�13




@the_zenspider

New Tool in Your Toolbox

�14




@the_zenspider

WARNING:

�15




@the_zenspider

I Suck at Art�16




@the_zenspider

Aesthetically Challenged

�17




@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

�22




@the_zenspider

graphics =

simple�23




@the_zenspider

Jumping Straight In

�24




@the_zenspider

Totally Blank Canvas

�25

require "graphics"

class SimpleSimulation < G::S include WhiteBackground end

SimpleSimulation.new.run




@the_zenspider

Drawing a Circle

�26

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




@the_zenspider

Drawing a Circle, via Body

�27

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

�28

# class SimpleSimulation def initialize super

register_bodies populate Ball end




@the_zenspider

Adding Behavior

�29

# class Ball def initialize w super

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




@the_zenspider

Moving the body—asteroids

�30

# class Ball def update move wrap end




@the_zenspider

Moving the body—pong

�31

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




@the_zenspider

Moving the body—bouncing

�32

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

def update self.velocity += G move bounce end




@the_zenspider

Many bodies

�33

# 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

�34




@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

�35




@the_zenspider

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

�36




@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

�37




@the_zenspider

Art Gallery

�38




@the_zenspider

Generative Art

�39




@the_zenspider�40




@the_zenspider�41




@the_zenspider�42




@the_zenspider�43




@the_zenspider�44




@the_zenspider�45




@the_zenspider

Mathy / Nerdy Things

�46




@the_zenspider�47




@the_zenspider�48




@the_zenspider�49




@the_zenspider�50




@the_zenspider

Simulations

�51




@the_zenspider�52




@the_zenspider�53




@the_zenspider�54




@the_zenspider

fluid.rb—fluid dynamics aka Smoothed particle dynamics

�55




@the_zenspider�56




@the_zenspider�57




@the_zenspider�58




@the_zenspider

Games

�59




@the_zenspider�60




@the_zenspider�61




@the_zenspider�62




@the_zenspider�63




@the_zenspider�64




@the_zenspider

Graphics

�65




@the_zenspider

How is it Different?

�66




@the_zenspider

Approachable�67




@the_zenspider

Undemanding�68




@the_zenspider

Understandable

�69




@the_zenspider

Empowering�70




@the_zenspider

Experimentable

�71




@the_zenspider

Real Maths!

�72




@the_zenspider

Uses degrees.�73




@the_zenspider

Draws in quadrant 1

(0-90 degrees).

�74




@the_zenspider

Game Math Coordinates

�75




@the_zenspider�76




@the_zenspider

Comprehensible

�77




@the_zenspider

Opinionatedly Pretty

�78




@the_zenspider

20+ Drawing Primitives

�79




@the_zenspider

Pretty drawing!

�80




@the_zenspider

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

�81




@the_zenspider

Architecture

�82




@the_zenspider

Update & Draw Loop

�83




@the_zenspider

30,000 Foot View

�84

CanvasModel screen




@the_zenspider

Translates to:

�85

drawupdate present




@the_zenspider

Abstraction of Drawing

�86

CanvasModel screen




@the_zenspider

“Reality”

�87

Previous Canvas

Current Canvas

Model




@the_zenspider

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

�88




@the_zenspider

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

�89




@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

�90




@the_zenspider

renderrenderer.present

�91




@the_zenspider

Class Heirarchy

�92

AbstractSimulation

Drawing Simulation




@the_zenspider

Simulation

�93




@the_zenspider

“Normal” Functionality

�94




@the_zenspider

Animation�95




@the_zenspider

Clears the window

�96




@the_zenspider

Smooth Drawing

�97




@the_zenspider

Drawing

�98




@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

clear

�105

clear # defaults to CLEAR_COLOR clear :red




@the_zenspider

point

�106

1000.times do point rx, ry, rc end




@the_zenspider

line

�107

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




@the_zenspider

angle

�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

rect

�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

text

�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

save

�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

Blank

�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

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




@the_zenspider

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

�151

Draw BlackTurn Left

Forward 1

Draw WhiteTurn RightForward 1

Black

White

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

Boids

�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

Game

�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

MVC

�181

MyApp (Controller)

Simulation Body (Model)

View




@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/

https://www.patreon.com/zenspider

Documents

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