Difference between revisions of "Render Part A Assignment"

From CSE425S Wiki
Jump to navigation Jump to search
Line 37: Line 37:
  
 
==Equilateral Triangle==
 
==Equilateral Triangle==
−
{{RubyToImplement|equilateral_triangle|render/assignment|EquilateralTriangle|Object|initialize(half_side_length)<br/>half_side_length()<br>half_side_length&#61;()<br/>render()}}
+
{{RubyToImplement|equilateral_triangle|drawings|EquilateralTriangle|Object|initialize(half_side_length)<br/>half_side_length()<br>half_side_length&#61;()<br/>render()}}
  
 
[[File:Equilateral Triangle Render Studio.svg]]
 
[[File:Equilateral Triangle Render Studio.svg]]
Line 57: Line 57:
 
So, the bottom left point A's x coordinate should be <code>-half_side_length</code> and its y coordinate should be <code>-1/3 height</code>.
 
So, the bottom left point A's x coordinate should be <code>-half_side_length</code> and its y coordinate should be <code>-1/3 height</code>.
  
−
{{RubyToRun|equilateral_triangle|render/assignment|main}}
+
{{RubyToRun|equilateral_triangle|drawings|main}}
  
 
[[File:Render_equilateral_triangle.png]]
 
[[File:Render_equilateral_triangle.png]]
  
 
==Rectangle==
 
==Rectangle==
−
{{RubyToImplement|rectangle|render/assignment|Rectangle|Object|initialize(half_width, half_height)<br/>half_width()<br>half_width&#61;()<br/>half_height()<br>half_height&#61;()<br/>render()}}
+
{{RubyToImplement|rectangle|drawings|Rectangle|Object|initialize(half_width, half_height)<br/>half_width()<br>half_width&#61;()<br/>half_height()<br>half_height&#61;()<br/>render()}}
  
 
Add an [https://www.rubyguides.com/2018/11/attr_accessor/ accessors] for half_width and half_height.
 
Add an [https://www.rubyguides.com/2018/11/attr_accessor/ accessors] for half_width and half_height.
  
−
{{RubyToRun|rectangle|render/assignment|main}}
+
{{RubyToRun|rectangle|drawings|main}}
  
 
[[File:Render_rectangle.png]]
 
[[File:Render_rectangle.png]]
  
 
==Ellipse==
 
==Ellipse==
−
{{RubyToImplement|ellipse|render/assignment|Ellipse|Object|initialize(x_radius, y_radius)<br/>x_radius()<br>x_radius&#61;()<br/>y_radius()<br>y_radius&#61;()<br/>render()}}
+
{{RubyToImplement|ellipse|drawings|Ellipse|Object|initialize(x_radius, y_radius)<br/>x_radius()<br>x_radius&#61;()<br/>y_radius()<br>y_radius&#61;()<br/>render()}}
  
 
Add an [https://www.rubyguides.com/2018/11/attr_accessor/ accessors] for x_radius and y_radius.
 
Add an [https://www.rubyguides.com/2018/11/attr_accessor/ accessors] for x_radius and y_radius.
Line 80: Line 80:
 
     delta_theta = (2*Math::PI) /slice_count</nowiki>
 
     delta_theta = (2*Math::PI) /slice_count</nowiki>
  
−
{{RubyToRun|ellipse|render/assignment|main}}
+
{{RubyToRun|ellipse|drawings|main}}
  
 
[[File:Render_ellipse.png]]
 
[[File:Render_ellipse.png]]
  
 
==CircularSegment==
 
==CircularSegment==
−
{{RubyToImplement|circular_segment|render/assignment|CircularSegment|Object|initialize(x_radius, y_radius, theta_a, theta_z)<br/>render()}}
+
{{RubyToImplement|circular_segment|drawings|CircularSegment|Object|initialize(x_radius, y_radius, theta_a, theta_z)<br/>render()}}
  
 
In geometry a [https://en.wikipedia.org/wiki/Chord_(geometry) chord] is a line segment which joins two points on a curve.  We will define a <code>class CircularSegment</code> which renders a filled shape of an ellipse cut at the chord between theta_a and theta_z.
 
In geometry a [https://en.wikipedia.org/wiki/Chord_(geometry) chord] is a line segment which joins two points on a curve.  We will define a <code>class CircularSegment</code> which renders a filled shape of an ellipse cut at the chord between theta_a and theta_z.
Line 98: Line 98:
 
Note: a Chord with 32 slices will have 33 points.
 
Note: a Chord with 32 slices will have 33 points.
  
−
{{RubyToRun|circular_segment|render/assignment|main}}
+
{{RubyToRun|circular_segment|drawings|main}}
  
 
[[File:Render_chord.png]]
 
[[File:Render_chord.png]]
  
 
==Image==
 
==Image==
−
{{RubyToImplement|image|render/assignment|Image|Object|initialize(path)<br/>render()}}
+
{{RubyToImplement|image|drawings|Image|Object|initialize(path)<br/>render()}}
  
 
should draw the pixels from (0,0)
 
should draw the pixels from (0,0)
  
−
{{RubyToRun|image|render/assignment|main}}
+
{{RubyToRun|image|drawings|main}}
  
 
[[File:Render_image.png]]
 
[[File:Render_image.png]]
  
 
==Text==
 
==Text==
−
{{RubyToImplement|image|render/assignment|Text|Object|initialize(text, font)<br/>render()}}
+
{{RubyToImplement|image|drawings|Text|Object|initialize(text, font)<br/>render()}}
  
−
{{RubyToRun|text|render/assignment|main}}
+
{{RubyToRun|text|drawings|main}}
  
 
[[File:Render_text.png]]
 
[[File:Render_text.png]]
Line 124: Line 124:
  
 
==Bézier Curve==
 
==Bézier Curve==
−
{{RubyToImplement|bezier_curve|render/assignment|BezierCurve|Object|initialize(control_points)<br/>render()}}
+
{{RubyToImplement|bezier_curve|drawings|BezierCurve|Object|initialize(control_points)<br/>render()}}
  
 
NOTE: you need not implement the interpolation yourself.  Check cavalcade_of_graphics for an example of how to draw a curve.
 
NOTE: you need not implement the interpolation yourself.  Check cavalcade_of_graphics for an example of how to draw a curve.
Line 142: Line 142:
 
|}
 
|}
  
−
{{RubyToRun|bezier_curve|render/assignment|main}}
+
{{RubyToRun|bezier_curve|drawings|main}}
  
 
[[File:Render_bezier_curve.png]]
 
[[File:Render_bezier_curve.png]]

Revision as of 01:22, 14 November 2022

OpenGL

glBegin
glVertex2f
glEnd
glColor3f
glEnable
glPushMatrix
glTranslatef
glRotatef
glPopMatrix
glMap1f
glRasterPos2f
glPixelZoom
glDrawPixels
glClearColor

GLUT

glutBitmapCharacter

Code to Investigate

Cavalcade of Graphics

file to run: src/main/ruby/render/examples/cavalcade_of_graphics.rb Ruby logo.svg

Cavalcade of graphics.png

Code to Implement

Each of the renderable components has its own file in the src/main/ruby/render/assignment directory.

Be sure to add accessors for all constructor parameters.

How to use attr_accessor

Equilateral Triangle

file: src/main/ruby/drawings/equilateral_triangle.rb Ruby logo.svg
class: EquilateralTriangle
superclass: Object
methods: initialize(half_side_length)
half_side_length()
half_side_length=()
render()

Equilateral Triangle Render Studio.svg

wikipedia

WARNING: Ruby division of two integers results in an integer. For example: 1/3 == 0

The triangle should be equilateral, rendered with its the origin at the center of mass.

Your constructor should accept a half_side_length parameter.

Add an accessor for half_side_length.

The height of the triangle should be side_length * sqrt(3)/2

The center of mass is one third from the bottom.

So, the bottom left point A's x coordinate should be -half_side_length and its y coordinate should be -1/3 height.

file to run: src/main/ruby/drawings/equilateral_triangle.rb Ruby logo.svg

Render equilateral triangle.png

Rectangle

file: src/main/ruby/drawings/rectangle.rb Ruby logo.svg
class: Rectangle
superclass: Object
methods: initialize(half_width, half_height)
half_width()
half_width=()
half_height()
half_height=()
render()

Add an accessors for half_width and half_height.

file to run: src/main/ruby/drawings/rectangle.rb Ruby logo.svg

Render rectangle.png

Ellipse

file: src/main/ruby/drawings/ellipse.rb Ruby logo.svg
class: Ellipse
superclass: Object
methods: initialize(x_radius, y_radius)
x_radius()
x_radius=()
y_radius()
y_radius=()
render()

Add an accessors for x_radius and y_radius.

Note: to produce the reference image the code below was used: 

    slice_count = 32
    delta_theta = (2*Math::PI) /slice_count
file to run: src/main/ruby/drawings/ellipse.rb Ruby logo.svg

Render ellipse.png

CircularSegment

file: src/main/ruby/drawings/circular_segment.rb Ruby logo.svg
class: CircularSegment
superclass: Object
methods: initialize(x_radius, y_radius, theta_a, theta_z)
render()

In geometry a chord is a line segment which joins two points on a curve. We will define a class CircularSegment which renders a filled shape of an ellipse cut at the chord between theta_a and theta_z.

Chord theta a z.png

Note: to produce the reference image the code below was used: 

    slice_count = 32
    delta_theta = (@theta_z-@theta_a) / slice_count

Note: a Chord with 32 slices will have 33 points.

file to run: src/main/ruby/drawings/circular_segment.rb Ruby logo.svg

Render chord.png

Image

file: src/main/ruby/drawings/image.rb Ruby logo.svg
class: Image
superclass: Object
methods: initialize(path)
render()

should draw the pixels from (0,0)

file to run: src/main/ruby/drawings/image.rb Ruby logo.svg

Render image.png

Text

file: src/main/ruby/drawings/image.rb Ruby logo.svg
class: Text
superclass: Object
methods: initialize(text, font)
render()
file to run: src/main/ruby/drawings/text.rb Ruby logo.svg

Render text.png

Point2

To support Bézier curves you will want to implement Point2 in point2.rb. You may wish to use Ruby's convenient Struct construct.

You should be able to construct a Point2 with an x and a y and be able to access those values.

Bézier Curve

file: src/main/ruby/drawings/bezier_curve.rb Ruby logo.svg
class: BezierCurve
superclass: Object
methods: initialize(control_points)
render()

NOTE: you need not implement the interpolation yourself. Check cavalcade_of_graphics for an example of how to draw a curve.

Quadratic (Second Order) Curve: Bézier 2 big.svg Bézier 2 big.gif
Quadratic (Third Order) Curve: Bézier 3 big.svg Bézier 3 big.gif
Fourth Order Curve: Bézier 4 big.svg Bézier 4 big.gif
file to run: src/main/ruby/drawings/bezier_curve.rb Ruby logo.svg

Render bezier curve.png

Testing Your Solution

Visual Comparison

file to run: src/test/ruby/render/part_a/part_a_test_snapshots_web_page_generator.rb Ruby logo.svg

Unit Test

file: src/test/ruby/render/part_a/part_a_unit_test.rb Ruby logo.svg UnitTest

note: ensure that you have removed all printing to receive credit for any assignment.

Retrieved from "http://classes.engineering.wustl.edu/cse425s/index.php?title=Render_Part_A_Assignment&oldid=1928"