Shape Drawing

28 Mar 2019

Reading time ~2 minutes

Shape drawing

Instruction

For this task you will create a program that draws a scene using primitive shapes (triangles, rectangles, and circles).
The goal of this exercise is to learn a little about how to create a program using either
the Gosu or Texplay libraries (but note – texplay is not installed in the labs).
Gosu is a development environment that makes it easy to create programs that
use graphics, sounds, animations, networking, and other aspects relevant
to creating small interactive games.

■ Use the following site to select colours for the circle (which uses RGB values):
https://www.rapidtables.com/web/color/RGB_Color.html
Or
Use the Gosu colour constants:
https://www.rubydoc.info/github/gosu/gosu/master/Gosu/Color
eg: a Red circle with a radius of 50 pixels would be produced by the two statements:
img = Gosu::Image.new(Circle.new(50)) img.draw(200, 200, ZOrder::TOP, 0.5, 1.0, Gosu::Color::RED)
Or
you could use the HEX values: img.draw(300, 50, ZOrder::TOP, 1.0, 1.0, 0xff_ff0000)

See here to work out HEX values:
https://www.binaryhexconverter.com/decimal-to-hex-converter
The co-ordinate system works as follows:

Reference

require 'rubygems'
require 'gosu'
require './circle'

#The screen has layers: Background, middle, top
module ZOrder
  BACKGROUND, MIDDLE, TOP = *0..2
end

class DemoWindow < Gosu::Window
  def initialize
    super(640, 400, false)
  end

  def draw
    #see www.rubydoc.info/github/gosu/gosu/Gosu/Color for colours
    draw_quad(0, 0, 0xff_ffffff, 800, 0, 0xff_ffffff, 0, 600, 0xff_ffffff, 800, 600, 0xff_ffffff, ZOrder::BACKGROUND)
    draw_quad(250, 180, Gosu::Color.argb(0xff_808080), 400, 180, Gosu::Color.argb(0xff_808080), 250, 350, Gosu::Color.argb(0xff_808080), 400, 350, Gosu::Color.argb(0xff_808080), ZOrder::TOP)
    draw_triangle(200, 200, Gosu::Color::RED, 450, 200, Gosu::Color::RED, 325, 90, Gosu::Color::RED, ZOrder::TOP, mode=:default)
    #draw_rect works a bit differently:
    #Gosu.draw_rect(300, 200, 100, 50, Gosu::Color::BLACK, ZOrder::TOP, mode=:default)
   
    #Circle parameter - Radius
    img2 = Gosu::Image.new(Circle.new(50))
    #Image draw parameters - x, y, z, horizontal scale (use for ovals), vertical scale (use for ovals), colour
    #Colour - use Gosu::Image::{Colour name} or .rgb({red},{green},{blue}) or .rgba({alpha}{red},{green},{blue},)
    #Note - alpha is used for transparency.
    #drawn as an elipse (0.5 width:)
    img2.draw(0, 270, ZOrder::MIDDLE, 6.4, 2.5, Gosu::Color::GREEN)
    #drawn as a red circle:
    ##img2.draw(300, 50, ZOrder::TOP, 1.0, 1.0, 0xff_ff0000)
    #drawn as a red circle with transparency:
    ##img2.draw(300, 250, ZOrder::TOP, 1.0, 1.0, 0x64_ff0000)
    
  end
end

DemoWindow.new.show

This code required the “circle” code.
It is :

require "rubygems"
require "gosu"

class Circle
  attr_reader :columns, :rows

  def initialize(radius)
    @columns = @rows = radius * 2

    clear, solid = 0x00.chr, 0xff.chr

    lower_half = (0...radius).map do |y|
      x = Math.sqrt(radius ** 2 - y ** 2).round
      right_half = "#{solid * x}#{clear * (radius - x)}"
      right_half.reverse + right_half
    end.join
    alpha_channel = lower_half.reverse + lower_half
    #Expand alpha bytes into RGBA color values.
    @blob = alpha_channel.gsub(/./) { |alpha| solid * 3 + alpha }
  end

  def to_blob
    @blob
  end
end

Result :