Processing Gem for CRuby の、 本家 Processing との互換性向上に向けた取り組み

2023 年度 Ruby アソシエーション開発助成金の成果報告会で発表したプレゼンです。

Transcript

1. Processing Gem for CRuby ͷɺ ຊՈ Processing ͱͷޓ׵ੑ޲্ʹ޲͚ͨऔΓ૊Έ Ruby Association Activity Report 2024/07/19 @tokujiros (github.com/xord) 
2. ͸͡Ίʹ Processing Gem for CRuby ͱ͸ ࠓճͷऔΓ૊Έͱͦͷ੒Ռͷใࠂ ࠓޙͷ։ൃϓϥϯʹ͍ͭͯ 
3. Processing Gem for CRuby ͱ͸ 
4. Processing Gem for CRuby ͱ͸ Processing ޓ׵ͷ API Λ࣮૷ͨ͠ CRuby ༻ͷ֦ுϥΠϒϥϦʔ → https://rubygems.org/gems/processing ݱࡏ͸ MacɺWindowsɺiOS ʹରԠ 3݄຤ʹ࠷ऴใࠂΛग़ͨ࣌͠఺Ͱ͸ Windows ະରԠ 4ʙ7݄Ͱ Windows ରԠΛ࣮૷ iOS ΞϓϦ͸ୈ14ճϑΫΦΧ Ruby େ৆Ͱ༏ल৆Λड৆ C++/ObjC Ͱ OpenGL / Cocoa / UIKit / Win32 Λ࢖͍ɺθϩ͔Β࣮૷ → https://rubygems.org/gems/rays → https://rubygems.org/gems/re fl exion 
5. Processing ͱ͸ άϥϑΟΧϧͳදݱΛۦ࢖ͨ͠Ξʔτ΍ΠϯλϥΫςΟϒͳΞϓϦέʔ γϣϯΛ؆୯ʹ࡞੒͢Δ͜ͱ͕Ͱ͖ΔϑϨʔϜϫʔΫ ຊՈ Processing ͸ Java Ͱ࣮૷͞Ε͍ͯΔ JavaScript Ͱ࠶࣮૷͞Εͨ p5.js ΋͋Γɺϒϥ΢βʔ্Ͱ࣮ߦՄೳ 
6. Ruby Ͱ Processing ͢Δʹ͸ʁ JRuby ͰຊՈ Processing Λͦͷ··࢖͏ p5.js Λ Opal ΍ ruby.wasm Ͱ࢖͏ CRuby ͸ʁ 
7. Ruby Ͱ Processing ͢Δʹ͸ʁ JRuby ͰຊՈ Processing Λͦͷ··࢖͏ p5.js Λ Opal ΍ ruby.wasm Ͱ࢖͏ CRuby ͸ʁ → Processing Gem for CRuby 
8. Ruby Ͱ Processing ͢Δʹ͸ʁ JRuby ͰຊՈ Processing Λͦͷ··࢖͏ p5.js Λ Opal ΍ ruby.wasm Ͱ࢖͏ CRuby ͸ʁ → Processing Gem for CRuby ωΠςΟϒͰಈ࡞ JRuby ΋ඞཁͳ͍ͷͰ؀ڥߏங΋؆୯ 
9. Processing Gem for CRuby ͷ࢖͍ํ MacɺWindows Ͱ͸ “gem install processing” ͰΠϯετʔϧՄೳʢ˞ʣ iOS ༻ʹ͸ Processing Gem Λ૊ΈࠐΜͩΞϓϦΛެ։த $ gem install processing Fetching reflexion-0.3.gem Fetching beeps-0.3.gem Fetching rays-0.3.gem Fetching rucy-0.3.gem Fetching xot-0.3.gem Fetching processing-1.1.gem Building native extensions. This could take a while... Successfully installed xot-0.3 Building native extensions. This could take a while... Successfully installed rucy-0.3 Building native extensions. This could take a while... Successfully installed rays-0.3 Building native extensions. This could take a while... Successfully installed beeps-0.3 Building native extensions. This could take a while... Successfully installed reflexion-0.3 Successfully installed processing-1.1 Parsing documentation for xot-0.3 Installing ri documentation for xot-0.3 Parsing documentation for rucy-0.3 Installing ri documentation for rucy-0.3 Parsing documentation for rays-0.3 Installing ri documentation for rays-0.3 Parsing documentation for beeps-0.3 Installing ri documentation for beeps-0.3 Parsing documentation for reflexion-0.3 Installing ri documentation for reflexion-0.3 Parsing documentation for processing-1.1 Installing ri documentation for processing-1.1 Done installing documentation for xot, rucy, rays, beeps, reflexion, processing after 0 seconds 6 gems installed • Mac • Xcode ͷΠϯετʔϧ͕ඞཁ • Windows • ݱ࣌఺Ͱ͸ RubyInstaller+DevKit ͷΈαϙʔτ • ͞Βʹ pacman Ͱ glewɺopenal ͷΠϯετʔϧ͕ඞཁ ˞ 
10. require 'processing' using Processing # ຖඵ60ճݺ͹ΕΔ draw do end Processing Gem for CRuby ͷ࢖͍ํ ΢Οϯυ΢ͷදࣔ 㱺 
11. require 'processing' using Processing draw do # എܠΛΫϦΞ background 100, 200, 255 # ԁΛඳը ellipse 200, 200, 300, 300 end Processing Gem for CRuby ͷ࢖͍ํ ΢Οϯυ΢ͷඳըॲཧ 㱺 
12. require 'processing' using Processing draw do background 100, 200, 255 # ԁͷx࠲ඪΛܦա࣌ؒͱ࿈ಈͤ͞Δ x = frameCount % width ellipse x, 200, 300, 300 end Processing Gem for CRuby ͷ࢖͍ํ Ξχϝʔγϣϯ 㱺 
13. require 'processing' using Processing draw do background 100, 200, 255 x = frameCount % width # y࠲ඪ͸ίαΠϯؔ਺Ͱ༳Β͢ y = 200 + cos(frameCount / 10.0) * 50 ellipse x, y, 300, 300 end Processing Gem for CRuby ͷ࢖͍ํ 㱺 Ξχϝʔγϣϯ̎ 
14. ࠓճͷऔΓ૊Έͱͦͷ੒Ռͷใࠂ 
15. ࠓճऔΓ૊Μͩ಺༰ Processing Gem Ͱ͸ҎԼͷػೳΛະ࣮૷ͱ͍ͯͨ͠ ར༻ස౓͕௿͍ػೳ ࣮૷͢Δͷ͕೉͍͠ػೳ Processing ͱͷޓ׵ੑΛᨳ͏ͳΒɺ͜ΕΒͷػೳ΋࣮૷͍ͨ͠ ࠓճ͸͜ΕΒͷػೳΛ̐ϲ݄ఔ౓Ͱ࣮૷ͨ͠ 
16. ࣮૷ࡁΈϝιουʢ197ʣ abs, acos, alpha, angleMode, applyMatrix, arc, asin, atan, atan2, background, beginContour, beginShape, bezier, bezierDetail, bezierPoint, bezierTangent, bezierVertex, blend, blendMode, blue, brightness, ceil, circle, clear, clip, color, colorMode, constrain, copy, cos, createCanvas, createCapture, createFont, createGraphics, createImage, createShader, createShape, createVector, curve, curveDetail, curvePoint, curveTangent, curveTightness, curveVertex, degrees, deltaTime, displayDensity, displayHeight, displayWidth, dist, doubleClicked, draw, ellipse, ellipseMode, endContour, endShape, exp, fi ll, fi lter, fl oor, focused, frameCount, frameRate, fullScreen, green, height, hue, image, imageMode, key, keyCode, keyIsDown, keyIsPressed, keyPressed, keyReleased, keyTyped, lerp, lerpColor, line, loadFont, loadImage, loadPixels, loadShader, loadShape, log, loop, mag, map, max, min, motion, motionGravity, mouseButton, mouseClicked, mouseDragged, mouseMoved, mousePressed, mouseReleased, mouseWheel, mouseX, mouseY, noClip, noFill, noLoop, noSmooth, noStroke, noTint, noise, noiseDetail, noiseSeed, norm, pixelDensity, pixelHeight, pixelWidth, pixels, pmouseX, pmouseY, point, pop, popMatrix, popStyle, pow, printMatrix, push, pushMatrix, pushStyle, quad, quadraticVertex, radians, random, randomGaussian, randomSeed, rect, rectMode, red, redraw, renderMode, requestImage, resetMatrix, resetShader, rotate, rotateX, rotateY, rotateZ, round, saturation, save, scale, setTitle, setup, shader, shape, shapeMode, shearX, shearY, sin, size, smooth, sq, sqrt, square, stroke, strokeCap, strokeJoin, strokeWeight, tan, text, textAlign, textAscent, textDescent, textFont, textLeading, textSize, textWidth, texture, textureMode, textureWrap, tint, touchEnded, touchMoved, touchStarted, touches, translate, triangle, updatePixels, vertex, width, windowHeight, windowMove, windowMoved, windowOrientation, windowResizable, windowResize, windowResized, windowWidth, windowX, windowY 
17. ࠓճ࣮૷ͨ͠ϝιουʢ52ʣ abs, acos, alpha, angleMode, applyMatrix, arc, asin, atan, atan2, background, beginContour, beginShape, bezier, bezierDetail, bezierPoint, bezierTangent, bezierVertex, blend, blendMode, blue, brightness, ceil, circle, clear, clip, color, colorMode, constrain, copy, cos, createCanvas, createCapture, createFont, createGraphics, createImage, createShader, createShape, createVector, curve, curveDetail, curvePoint, curveTangent, curveTightness, curveVertex, degrees, deltaTime, displayDensity, displayHeight, displayWidth, dist, doubleClicked, draw, ellipse, ellipseMode, endContour, endShape, exp, fi ll, fi lter, fl oor, focused, frameCount, frameRate, fullScreen, green, height, hue, image, imageMode, key, keyCode, keyIsDown, keyIsPressed, keyPressed, keyReleased, keyTyped, lerp, lerpColor, line, loadFont, loadImage, loadPixels, loadShader, loadShape, log, loop, mag, map, max, min, motion, motionGravity, mouseButton, mouseClicked, mouseDragged, mouseMoved, mousePressed, mouseReleased, mouseWheel, mouseX, mouseY, noClip, noFill, noLoop, noSmooth, noStroke, noTint, noise, noiseDetail, noiseSeed, norm, pixelDensity, pixelHeight, pixelWidth, pixels, pmouseX, pmouseY, point, pop, popMatrix, popStyle, pow, printMatrix, push, pushMatrix, pushStyle, quad, quadraticVertex, radians, random, randomGaussian, randomSeed, rect, rectMode, red, redraw, renderMode, requestImage, resetMatrix, resetShader, rotate, rotateX, rotateY, rotateZ, round, saturation, save, scale, setTitle, setup, shader, shape, shapeMode, shearX, shearY, sin, size, smooth, sq, sqrt, square, stroke, strokeCap, strokeJoin, strokeWeight, tan, text, textAlign, textAscent, textDescent, textFont, textLeading, textSize, textWidth, texture, textureMode, textureWrap, tint, touchEnded, touchMoved, touchStarted, touches, translate, triangle, updatePixels, vertex, width, windowHeight, windowMove, windowMoved, windowOrientation, windowResizable, windowResize, windowResized, windowWidth, windowX, windowY 
18. draw do background(100) # ܗঢ়ͷඳըΛ։࢝ beginShape(TRIANGLE_STRIP) # 7௖఺ͷࢦఆ vertex(30, 75) vertex(40, 20) vertex(50, 75) vertex(60, 20) vertex(70, 75) vertex(80, 20) vertex(90, 75) # ඳըॲཧ͜͜·Ͱ endShape() end beginShape(), endShape(), vertex() ೚ҙͷ਺ͷ௖఺Λࢦఆͯ͠ܗঢ়Λඳը͢Δ͜ͱ͕Ͱ͖ΔΑ͏ʹ 㱺 
19. tex = nil setup do createCanvas(256, 256) # ը૾ΛಡΈࠐΉ tex = loadImage("texture.png") end draw do background(100) # ܗঢ়ͷඳըΛ։࢝ beginShape(QUADS) # ςΫενϟʹը૾Λࢦఆ texture(tex) # ௖఺ͷ࠲ඪͱςΫενϟ࠲ඪΛࢦఆ vertex(50, 50, 261, 87) vertex(150, 50, 547, 87) vertex(200, 200, 547, 325) vertex(100, 200, 261, 325) # ඳըॲཧ͜͜·Ͱ endShape() end texture(), vertex(x, y, u, v) vertex() ʹςΫενϟ࠲ඪΛɺtexture() ʹςΫενϟը૾Λࢦఆͯ͠ςΫενϟΛඳը͢Δ͜ͱ͕Ͱ͖ΔΑ͏ʹ 㱺 
20. draw do background(100) # ܗঢ়ͷඳըΛ։࢝ beginShape(QUADS) # ௖఺ͷ৭ͱ࠲ඪΛݸผʹࢦఆ fill(255, 0, 0) vertex(50, 50, 261, 87) fill(0, 255, 0) vertex(150, 50, 547, 87) fill(0, 0, 255) vertex(200, 200, 547, 325) fill(255, 255, 0) vertex(100, 200, 261, 325) # ඳըॲཧ͜͜·Ͱ endShape() end Shape ͷ֤௖఺ͷ৭Λࢦఆ͢Δ ௖఺Λొ࿥͢Δ࣌ʹɺ͋Β͔͡Ί fi ll() ΛݺΜͰ͓͘͜ͱͰ֤௖఺ʹݸผʹ৭ΛࢦఆͰ͖ΔΑ͏ʹ 㱺 
21. draw do background(100) # ܗঢ়ͷඳըΛ։࢝ beginShape() # ֎࿮ͷ௖఺Λࢦఆ vertex(50, 50) vertex(150, 50) vertex(200, 200) vertex(100, 200) # ݀ܗঢ়ͷࢦఆΛ։࢝ beginContour() # ݀ܗঢ়ͷ௖఺Λࢦఆ vertex(100, 70) vertex(100, 150) vertex(150, 180) vertex(150, 100) # ݀ܗঢ়ͷࢦఆ͜͜·Ͱ endContour() # ඳըॲཧ͜͜·Ͱ endShape(CLOSE) end beginContour()ɺendContour() ܗঢ়ʹ݀Λ։͚ͯඳը͢Δ͜ͱ͕Ͱ͖ΔΑ͏ʹ 㱺 
22. draw do background(100) noFill() stroke(255) strokeWeight(10) # Catmull-Rom εϓϥΠϯۂઢΛඳը beginShape() curveVertex(10, 50) curveVertex(10, 50) curveVertex(50, 50) curveVertex(50, 200) curveVertex(10, 200) curveVertex(10, 200) endShape() # 3࣍ϕδΣۂઢΛඳը beginShape() vertex(110, 50) bezierVertex(150, 50, 150, 200, 110, 200) endShape() # 2࣍ϕδΣۂઢΛඳը beginShape() vertex(180, 50) quadraticVertex(240, 50, 240, 200) endShape() end bezierVertex()ɺcurveVertex()ɺquadraticVertex() Catmull-Rom εϓϥΠϯۂઢɺ3࣍ϕδΣۂઢɺ2࣍ϕδΣۂઢΛඳը͢Δ͜ͱ͕Ͱ͖ΔΑ͏ʹ 㱺 
23. draw do background(100) # ܗঢ়ΦϒδΣΫτΛ࡞੒ s = createShape() # ܗঢ়σʔλͷࢦఆΛ։࢝ s.beginShape(TRIANGLE_STRIP) # 7௖఺ͷࢦఆ s.vertex(30, 75) s.vertex(40, 20) s.vertex(50, 75) s.vertex(60, 20) s.vertex(70, 75) s.vertex(80, 20) s.vertex(90, 75) # ܗঢ়σʔλͷࢦఆ͜͜·Ͱ s.endShape() # ࠲ඪΛม͑ͯ2ճඳը shape(s, 0, 0) shape(s, 100, 100) end Shape Ϋϥε Shape Ϋϥεͷ beginShape()ɺendShape()ɺvertex() Λ࢖͏͜ͱͰɺ೚ҙͷܗঢ়Λ Shape ΫϥεͷΠϯελϯε ͱͯ͠࢖͍ճ͢ࣄ͕Ͱ͖ΔΑ͏ʹ 㱺 
24. draw do background(100) # ਌άϧʔϓΛ࡞੒ group = createShape(GROUP) # ࢠܗঢ়Λ࡞੒ shape1 = createShape(RECT, 10, 10, 50, 50) shape2 = createShape(ELLIPSE, 20, 20, 50, 50) # ਌άϧʔϓʹ௥Ճ group.addChild(shape1) group.addChild(shape2) # άϧʔϓΛࢦఆͯ͠ඳը shape(group, 100, 100) end Shape ͷάϧʔϐϯά ܗঢ়Λάϧʔϐϯάͯ͠Ұͭͷܗঢ়ͱͯ͠ѻ͑ΔΑ͏ʹ 㱺 
25. # .svg ϑΝΠϧΛ Shape ͱͯ͠ಡΈࠐΉ s = loadShape("Ghostscript_Tiger.svg") draw do background(255) translate(200, 200) # ಡΈࠐΜͩ .svg Λඳը shape(s) end SVG ϑΝΠϧΛ Shape ͱͯ͠ಡΈࠐΉ͜ͱ͕Ͱ͖ΔΑ͏ʹ loadShape() 㱺 ࠨ͕࣮ߦ݁Ռɻӈ͕ਖ਼͍͠ϨϯμϦϯά݁Ռ 
26. img = nil setup do createCanvas(256, 256) # ผεϨουͰը૾Λμ΢ϯϩʔυˍಡΈࠐΈ img = requestImage( ‘https://xord.org/rubysketch/images/rubysketch128.png') end draw do background(100) if img.width > 0 # ը૾͕ಡΈࠐΈ׬͍ྃͯͨ͠Βͦͷ··ඳը͢Δ image(img, 10, 10, 200, 200) elsif img.width < 0 # ը૾ͷಡΈࠐΈͰΤϥʔ͕ൃੜͨ͠৔߹͸ΤϥʔςΩετΛදࣔ͢Δ text('Error!', 10, 100) else # ը૾ͷಡΈࠐΈ͕׬͍ྃͯ͠ͳ͍৔߹͸ಡΈࠐΈதςΩετΛදࣔ͢Δ text('Loading...', 10, 100) end end requestImage() ಉظॲཧͷ loadImage() ͱ͸ҧ͍ɺrequestImage() Λ࢖͏͜ͱͰผεϨουͰಡΈࠐΈ ॲཧΛ࣮ߦͯ͘͠ΕΔͷͰɺඳըॲཧΛࢭΊͣʹը૾ΛಡΈࠐΉ͜ͱ͕Ͱ͖ΔΑ͏ʹ 㱺 ಡΈࠐΈத Τϥʔ͕ൃੜ ը૾͕ಡΈࠐΊͨΒͦͷ··ඳը 
27. fonts = Font.list draw do background(100) fonts.each.with_index do |name, i| text(name, 10, 20 + i * 20) end end ར༻ՄೳͳϑΥϯτ໊ͷҰཡΛऔಘ͢Δ͜ͱ͕Ͱ͖ΔΑ͏ʹ Font.list() 㱺 
28. font = loadFont('KouzanBrushFontSousyo.ttf') draw do background(100) textFont(font, 32) text("͸ΖʔΔͼʔ", 10, 100) end γεςϜʹແ͍ϑΥϯτͰ΋ TrueType ΍ OpenType ͷϑΥϯτϑΝΠϧ͔ΒϑΥϯτΛಡΈࠐΜͰςΩετΛඳը Ͱ͖ΔΑ͏ʹ loadFont() 㱺 
29. # ը૾ΦϒδΣΫτΛ࡞੒ img = createImage(100, 100) draw do background(255) # ը૾Λදࣔ image(img, 0, 0) end mouseDragged do # ը૾ͷϐΫηϧߋ৽։࢝ img.loadPixels() # ը૾ͷϚ΢ε࠲ඪͷϐΫηϧΛ੺ʹߋ৽ img.pixels[mouseY.to_i * img.width + mouseX.to_i] = color(255, 0, 0) # ߋ৽ͨ͠ϐΫηϧ৘ใΛը૾ʹ൓ө img.updatePixels() end ը૾σʔλͷϐΫηϧΛ௚઀ಡΈॻ͖͢Δ͜ͱ͕Ͱ͖ΔΑ͏ʹ Image ͷϐΫηϧૢ࡞ؔ਺ 㱺 
30. setup do createCanvas(200, 200, pixelDensity: 1) # ΞϯνΤΠϦΞγϯάͷ༗ޮԽͱແޮԽ smooth() # or noSmooth() end draw do background(100) noStroke ellipseMode(CORNER) # ΞϯνΤΠϦΞγϯά͕༗ޮͩͱԁͷΤοδ͕׈Β͔ʹͳΔ ellipse(0, 0, 200, 200) end ΞϯνΤΠϦΞγϯάͷ༗ޮɾແޮΛઃఆͰ͖ΔΑ͏ʹ smooth()ɺnoSmooth() 㱺 OP4NPPUI TNPPUI 
31. mouseClicked do if fullScreen # ϑϧεΫϦʔϯදࣔதʁ fullScreen(false) # ΢Οϯυ΢දࣔʹ໭Δ else fullScreen(true) # ϑϧεΫϦʔϯදࣔʹ͢Δ end end ϑϧεΫϦʔϯͱ΢Οϯυ΢දࣔΛ੾Γସ͑Δ͜ͱ͕Ͱ͖ΔΑ͏ʹ fullScreen() 
32. draw do background(200) w, h = width, height # 0.0ʙ1.0 ͷൣғΛ 0.05 ࠁΈͰϧʔϓ (0.0..1.0).step(0.05) do |t| # x ͱ y ࠲ඪΛ bezierPoint() ͰٻΊΔ x = bezierPoint(50, w - 50, 50, w - 50, t) y = bezierPoint(50, 50, h - 50, h - 50, t) # ٻΊͨ࠲ඪʹԁΛඳը͢Δ circle(x, y, 10) end end ۂઢͷิ׬ curve()ɺbezier() 㱺 
33. draw do background(200) noFill() beginShape() width.times do |x| # noise() ؔ਺Ͱ Perlin ϊΠζΛੜ੒͢Δ y = noise(x / 50.0) * height # ੜ੒ͨ͠ϊΠζΛ y ࠲ඪͱͯ͠ઢΛඳը͢Δ vertex(x, height - y) end endShape() end ཚ਺ͱϊΠζؔ਺ random()ɺnoise() 㱺 
34. draw do background(200) fill(0) textSize(36) # ߦؒͷࢦఆͳ͠ text("A1\nA2\nA3", 50, 100) # ߦؒͷ෯Λ 50 ʹมߋ textLeading(50) text("B1\nB2\nB3", 150, 100) # ߦؒͷ෯Λ 100 ʹมߋ textLeading(100) text("C1\nC2\nC3", 250, 100) end ςΩετඳը࣌ͷߦؒͷ෯ΛࢦఆͰ͖ΔΑ͏ʹ textLeading() 㱺 
35. ͦͷଞͷࡉ͔͍ػೳ deltaTime() લճͷඳըॲཧ͔Βͷܦա࣌ؒ brightness()ɺhue()ɺsaturation() HSB ৭σʔλ͔Β࠼౓ɺ৭૬ɺ໌౓Λऔಘ applyMatrix() ࠲ඪม׵ߦྻʹ೚ҙͷߦྻΛઃఆ͢Δ printMatrix() ඪ४ग़ྗʹݱࡏͷ࠲ඪม׵ߦྻΛग़ྗ͢Δ keyIsDown() ಛఆͷΩʔ͕ԡ͞Ε͍ͯΔ͔Λฦ͢ keyIsPressed Կ͔͠ΒͷΩʔ͕ԡ͞Ε͍ͯΔ͔Ͳ͏͔ mouseWheel() Ϛ΢εϗΠʔϧͷΠϕϯτΛड͚Δ doubleClicked() Ϛ΢ε͕μϒϧΫϦοΫ͞ΕͨΠϕϯτΛड͚Δ rotateX()ɺrotateY()ɺrotateZ() XɺYɺZ ࣠ͰͦΕͧΕճస͢Δ shearX()ɺshaerY() XɺY ࣠ͰͦΕͧΕႩஅ͢Δ 
36. ࣮૷͠ͳ͔ͬͨػೳ Shape ΁ͷ stroke ৭ͷอ࣋ fi ll() ͱಉ༷ stroke() ͷ௖఺৭ࢦఆʹ΋ରԠ͢Δ༧ఆ͕ͩͬͨɺC++ ϨΠ Ϡʔͷ಺෦ߏ଄తʹݱ࣌఺Ͱ࣮૷͕೉͍͠ʢϙϦϥΠϯ͔ΒϙϦΰϯΛ ੜ੒͢ΔϥΠϒϥϦ͕௖఺୯Ґͷ৭ࢦఆʹະରԠʣ͜ͱ͕൑໌ͨͨ͠Ί preload() p5.js (JavaScript) ಛ༗ͷࣄ৘Ͱ࣮૷͞ΕͨػೳͰ͋ΓɺRuby ൛ Processing Gem ʹ͸ෆཁͱ൑அ 
37. ࣮૷͠ͳ͔ͬͨػೳ modelX()ɺmodelY()ɺmodexZ()ɺscreenX()ɺscreenY()ɺscreenZ() ࣮૷ํ๏Λݕ౼ͨ݁͠ՌɺϥΠϒϥϦશମͷඳըύϑΥʔϚϯεΛඍົʹ٘ਜ਼ʹ͢ ΔՄೳੑ͕ߴͦ͏ͩͬͨͨΊ deviceOrientation()ɺaccelerationX, Y, Z()ɺpAccelerationX, Y, Z()ɺrotationX, Y, Z()ɺ pRotationX, Y, Z()ɺturnAxis()ɺdeviceTurned()ɺdeviceMoved()ɺdeviceShaked() Java ൛ Processing ʹ͸ͦ΋ͦ΋͜ΕΒͷؔ਺͕ແ͍ p5.js ͸ɺMac ͱ iPhone ྆؀ڥͰ accelerationXYZɺrotateionXYZ ڞʹ 0 ͔͠ฦ͞ Εͣ͏·͘ಈ͔ͤͳ͔ͬͨ 
38. p5.rb Λ࢖ͬͨޓ׵ੑݕূ C++ Ͱ࣮૷ͨ͠ OpenGL ϥούʔϥΠϒϥϦͰ͸ɺ͜Ε·Ͱඳը݁Ռͷݕূ͕ ग़དྷͣʹ͍ͨ Processing Gem ͱ p5.rb Ͱಉ͡ίʔυ͕࣮ߦͰ͖ΔΑ͏ʹͳͬͨ ϢχοτςετͰޓ׵ੑݕূ Headless Chrome Λ࢖ͬͯ p5.rb Ͱ࣮ߦͨ݁͠ՌΛը૾ϑΝΠϧʹอଘ Processing Gem Ͱ࣮ߦͨ݁͠Ռ΋ը૾σʔλͱͯ͠ग़ྗ ྆ը૾ΛϐΫηϧ୯ҐͰൺֱ͠ɺඳը݁Ռ͕ಉ͔͡Ͳ͏͔Λݕࠪ 
39. p5.rb Λ࢖ͬͨޓ׵ੑݕূ ͜Ε·Ͱݕূ͕೉͔ͬͨ͠ඳըܥ API ͕ɺProcessing ޓ׵૚Λઃ͚ͨ͜ ͱͰൺֱݕূ͕Ͱ͖ΔΑ͏ʹͳͬͨ ςετίʔυʹΑͬͯɺಈ࡞ͷਖ਼͕͠͞खܰʹݕূͰ͖ΔΑ͏ʹͳΓ։ൃ ޮ཰͕޲্ 
40. ࠓޙͷ։ൃϓϥϯʹ͍ͭͯ 
41. 2DήʔϜΤϯδϯԽ Processing Gem Λϕʔεͱͨ͠ήʔϜΤϯδϯΛ։ൃத → https://github.com/xord/rubysketch Processing ʹແ͍ػೳ͸ήʔϜΤϯδϯ૚ʹ࣮૷ εϓϥΠτɺ෺ཧԋࢉɺΞχϝʔγϣϯɺα΢ϯυͳͲ Processing ϕʔεͳͷͰ΢Σϒ্ʹ΋ൺֱత৘ใ͕ଟ͍ Ruby Ͱָ͘͠ήʔϜ։ൃ αϯϓϧήʔϜΛ AppStore Ͱެ։த ϧϏʔιϦςΟΞ - ΫϩϯμΠΫΧʔυήʔϜ → https://apps.apple.com/jp/app/id6450155271 ιʔείʔυ΋ެ։ → https://github.com/xord/solitaire 
42. ͞ΒʹϨτϩήʔϜ౷߹։ൃ؀ڥԽ ϨτϩήʔϜΤϯδϯͱ͸ PICO-8 ΍ TIC-80 ͕༗໊ Python ͷϨτϩήʔϜΤϯδϯ Pyxel ͕ 14,000ελʔ֫ಘͳͲ ࠨ͔Β
    1*$0ɺ5*$ɺ1ZYFM
    ͷεϓϥΠτɾΤσΟλʔը໘ 
43. ͞ΒʹϨτϩήʔϜ౷߹։ൃ؀ڥԽ ήʔϜ։ൃʹඞཁͳ֤छΤσΟλʔΛؚΜͩ౷߹ήʔϜ։ൃ؀ڥԽ υοτֆΤσΟλʔ ޮՌԻΤσΟλʔ ԻָΤσΟλʔ ࡞ͬͨήʔϜΛ Web ΍ AppStore Ͱެ։Ͱ͖ΔΑ͏ʹ͍ͨ͠ iOS ΞϓϦͱͯ͠΋ϦϦʔε͠ɺMac/PC Λ࣋ͨͳ͍தߴੜͰ΋૑࡞ҙཉ͕͋ Ε͹ iPhone/iPad ͚ͩͰήʔϜΛ࡞ͬͯखܰʹެ։Ͱ͖Δ؀ڥΛ࡞Γ͍ͨ 1*$0
    ͷεϓϥΠτΤσΟλʔ α΢ϯυΤσΟλʔ ϛϡʔδοΫΤσΟλʔ 
44. ࢒Δ՝୊ ඳըੑೳ ͜Ε·Ͱ͸ύϑΥʔϚϯεվળͷ༏ઌ౓͸௿Ί CRuby ͕஗͍ͱޡղ͞Εͳ͍Α͏ɺࠓޙ͸վળ͍͖͍ͯͨ͠ Web ରԠ ࡞ͬͨ΋ͷͷ഑෍Λߟ͑Δͱੋඇͱ΋ରԠ͍ͨ͠ ࡞ͬͨ΋ͷ͕ Processing API ͚ͩΛར༻͢ΔͳΒ ruby.wasm ͱ p5.js Ͱ࣮ߦՄೳ ήʔϜΤϯδϯͷػೳશମΛ࢖͑ΔΑ͏ʹ WebAssembly ʹ΋ରԠ͍ͤͨ͞ 
45. ͍͞͝ʹ 
46. ͍͞͝ʹ ౰ॳܭը͍ͯͨ͠։ൃ಺༰͸΄΅༧ఆ௨Γ࣮૷͢Δ͜ͱ͕Ͱ͖·ͨ͠ɻ ͜ΕʹΑΓɺ໨తͱ͍ͯͨ͠ͱ͓ΓຊՈ Processing ͱͷߴ͍ޓ׵ੑΛ΋ͭϥΠϒϥ Ϧͱ͢Δ͜ͱ͕Ͱ͖·ͨ͠ɻ ͜ͷ੒ՌΛୡ੒͢ΔͨΊʹαϙʔτͯͩͬͨ͘͠͞ Ruby ΞιγΤʔγϣϯ༷ͱɺ ϝϯλʔͱͯ͠ࢧ͑ͯͩͬͨ͘͞ਢ౻ޭฏ༷ʹਂ͘ײँ͍ͨ͠·͢ɻ 
47. ͍͞͝ʹ Ruby ͸ͱͯ΋ྑ͍ݴޠͰ͢ɻ Ruby ͕ར༻͞Ε͍ͯΔ෼໺͸΍͸Γ Web ։ൃํ໘͕ଟ͍Ͱ͕͢ɺར༻༻్ͷଟ༷ ੑ޲্ͷҰ؀ͱͯ͠ɺάϥϑΟοΫεϓϩάϥϛϯά෼໺Ͱ Ruby ͷར༻͕૿͑ΔΑ ͏ࠓޙ΋׆ಈ͍͖ͯ͠·͢ɻ 
48. ؔ࿈ϦϯΫ 2023 ೥౓ Ruby ΞιγΤʔγϣϯ։ൃॿ੒ۚ ࠷ऴใࠂʢ2024ʣ https://gist.github.com/xord/c464669d41f37f4858a193c658e9a705 Processing ϕʔεͷ2DήʔϜΤϯδϯ for CRuby ͷ঺հʢ2023ʣ https://zenn.dev/tokujiros/articles/7f0b44a6b7e2a6 ࣗલ Processing ࣮૷ͷޓ׵ੑݕূʹ p5.rb Λ࢖ͬͯΈͨ࿩ʢ2023ʣ https://zenn.dev/tokujiros/articles/973815bce7afdc 3ϲ݄ؒͷϑϧλΠϜݸਓ։ൃΛऴ͑ͯɻʢͦͯࣾ͠ձ෮ؼ΁ɾɾɾʢ2023ʣ https://note.com/tokujiros/n/ndb4bc589ef8f RubySketch ήʔϜΤϯδϯԽܭը ʙ ෺ཧԋࢉ෇͖εϓϥΠτΫϥεͷ௥ ՃͳͲʢ2022ʣ https://zenn.dev/tokujiros/articles/647d1f6df2b342 Ruby Ͱ Processing ͢Δ gemʢͱΞϓϦʣͷ঺հʢ2020ʣ https://zenn.dev/tokujiros/articles/96f63899760cb0 iPhone ͷʮΧϝϥೖྗʯͰ͓΋͠ΖϏσΦΧϝϥΛ࡞Ζ͏ʢ2020ʣ https://zenn.dev/tokujiros/articles/09988fc99b636c CRuby ͰήʔϜΛ࡞ͬͯ iPhone Ͱಈ͔ͦ͏ʢ2015ʣ https://qiita.com/tokujiros/items/0c4bd2dd995f0e6740b5 Ruby ༻ࣗ࡞ GUI πʔϧΩοτʹ Box2D Λ૊ΈࠐΜͩΒϒϩοΫ่͠ήʔ Ϝ͕؆୯ʹ࡞Εͨ࿩ʢ2014ʣ https://qiita.com/tokujiros/items/a9e8d16c2a4c1ccf2238 CRuby ΠϯλϓϦλͷ CocoaPod Λ࡞ͬͨͷͰ঺հ͠·͢ʢ2014ʣ https://qiita.com/tokujiros/items/30e9d0cf6236cd8e303d 
49. ͓ΘΓ EOP