racket / racket/draw

Rotation and draw-text.

Open
#38 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Racket
Stars
19
Forks
24
PR merge metrics
No merged PRs in 30d

Description

This example shows a rotating text.

Zooming in on the text (on macOS use ctrl and swipe up with two fingers to zoom in)
shows that the letters are "dancing". It looks as if each letter is rotated individually
instead of the text being drawn as a whole.

The expected result can be seen here (using p5.js):
https://processing.org/examples/textrotation.html

The example also shows that the thickness of the line varies.
Zoom in on the line and it becomes apparent that the line at some angles shrink in width.
In an animation this looks odd.

Turning on smoothing fixes the line thickness problem - but the reason for turning
it off was for speed.

Screen recording:

https://user-images.githubusercontent.com/461765/124123958-28c71b00-da78-11eb-8ab9-f7c3563dcb23.mov

#lang racket/base
(require racket/gui)

(define width  640)
(define height 360)

(define angle 0.0) ; the rotation angle
(define (radians a) (* pi (/ a 180.)))

; A frame containing a single canvas with a timer that continously calls draw.
(define top-frame  #f)
(define top-canvas #f)
(define top-timer  #f)

(define dc #f) ; drawing context of the canvas

(define red-pen
  (new pen%	 	 	 	 
       [color  "red"]	 	 	 	 
       [width  4]
       [style  'solid]
       [cap    'round]
       [join   'round]
       [stipple #f]))

(define white-pen
  (new pen%	 	 	 	 
       [color  "white"]	 	 	 	 
       [width  1]
       [style  'solid]
       [cap    'round]
       [join   'round]
       [stipple #f]))

(define large-font
  (make-object font% 24 'modern))
       

(define (draw)
  (define old-transformation #f)
  (when dc
    (send dc set-background "black")
    (send dc clear)
    (send dc set-font large-font)
    ; (send dc set-smoothing 'smoothed)
    ; (send dc set-smoothing 'unsmoothed)    
    (send dc set-pen white-pen)
    (send dc set-text-foreground "white")
        
    (set! old-transformation (send dc get-transformation))
    (define angle1 (radians 45))
    (send dc translate 100.5 180.5)
    (send dc rotate angle1)
    (send dc draw-text "45 DEGREES" 0 0)
    (send dc draw-line 0 0 150 0)
    (send dc set-transformation old-transformation)

    (set! old-transformation (send dc get-transformation))
    (define angle2 (radians 270))
    (send dc translate 200.5 180.5)
    (send dc rotate angle2)
    (send dc draw-text "180 DEGREES" 0 0)
    (send dc draw-line 0 0 150 0)
    (send dc set-transformation old-transformation)

    (set! old-transformation (send dc get-transformation))
    (define angle3 (radians angle))
    (send dc translate 440.5 180.5)
    (send dc rotate angle3)
    (send dc draw-text (~a (modulo (inexact->exact (round angle)) 360) " DEGREES") 0 0)
    (send dc draw-line 0 0 150 0)
    (send dc set-transformation old-transformation)
    (set! angle (+ angle 0.25))

    (send dc set-pen red-pen)
    (send dc draw-point 100.5 180.5)
    (send dc draw-point 200.5 180.5)
    (send dc draw-point 440.5 180.5)))


(define my-frame%
  (class frame%
    (define/augment (on-close)
      (when top-timer
        (send top-timer stop)))
    (super-new)))


(define my-canvas%
  (class canvas%
    (define/override (on-paint)   ; repaint (exposed or resized)
      (define dc (send this get-dc))
      (send this suspend-flush)
      (handle-on-paint dc)
      (send this resume-flush))
    (super-new)))


(define (start-gui)
  (define frame  (new my-frame%
                      [label "sketch"]))
  (set! top-frame frame)  
  (define canvas (new my-canvas%
                      [parent     frame]
                      [min-width  width]
                      [min-height height]))
  (set! top-canvas canvas)
  (set! dc (send top-canvas get-dc))

  (define timer (new timer%
                     [notify-callback handle-on-timer]
                     [interval (inexact->exact (floor (/ 1000 30)))])) ; milliseconds
  (set! top-timer timer)
  
  (send frame show #t))

(define (handle-on-paint dc)  
  (when dc 
    (draw)))

(define (handle-on-timer)
  (send top-canvas on-paint))

(start-gui)

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Run the supplied example and start in the draw procedure, focusing on the transformed draw-text and draw-line calls with smoothing disabled. Compare the rotating text with the linked p5.js example and verify that letters rotate as a whole and line thickness remains consistent during animation.

Written by the indexing model from the issue text.

Assessment

Domain
computer-graphics, desktop
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.