#lang sketching

; Original example by Rusty Robinson

; Hue is the color reflected from or transmitted through an object

; and is typically referred to as the name of the color (red, blue, yellow, etc.)

; Move the cursor vertically over each bar to alter its hue.

(define bar-width 20)

(define last-bar  -1)

(define (setup)

(size 640 360)

(color-mode 'hsb height height height)

(background 0)

(no-stroke))

(define (draw)

(define which-bar (quotient mouse-x bar-width))

(unless (= which-bar last-bar)

(define bar-x (* which-bar bar-width))

(fill mouse-y height height)

(rect bar-x 0 bar-width height)

(set! last-bar which-bar)))

#lang sketching

; Saturation is the strength or purity of the color and represents the

; amount of gray in proportion to the hue. A "saturated" color is pure

; and an "unsaturated" color has a large percentage of gray.

; Move the cursor vertically over each bar to alter its saturation.

(define bar-width 20)

(define last-bar  -1)

(define (setup)

(size 640 360)

(no-stroke)

(background 0)

(color-mode 'hsb width height 100))

(define (draw)

(define which-bar (quotient mouse-x bar-width))

(unless (= which-bar last-bar)

(define bar-x (* which-bar bar-width))

(fill bar-x mouse-y 66)

(rect bar-x 0 bar-width height)

(set! last-bar which-bar)))

#lang sketching

; Original example by Rusty Robinson

(define bar-width 20)

(define last-bar  -1)

(define (setup)

(size 640 360)

(color-mode 'hsb width 100 height)

(background 0)

(no-stroke))

(define (draw)

(define which-bar (quotient mouse-x bar-width))

(unless (= which-bar last-bar)

(define bar-x (* which-bar bar-width))

(fill bar-x 100 mouse-y)

(rect bar-x 0 bar-width height)

(set! last-bar which-bar)))

#lang sketching

;; Color Variables (Homage to Albers).

;;

;; This example creates variables for colors that may be referred to

;; in the program by a name, rather than a number.

(define (setup)

(size 640 360))

(define inside  (color 204 102 0))

(define middle  (color 204 153 0))

(define outside (color 153  51 0))

(define (draw)

; setup

(no-stroke)

(background 51 0 0)

; draw

(push-matrix)

(translate 80 80)

(fill outside)

(rect 0 0 200 200)

(fill middle)

(rect 40 60 120 120)

(fill inside)

(rect 60  90 80 80)

(pop-matrix)

(push-matrix)

(translate 360 80)

(fill inside)

(rect 0 0 200 200)

(fill outside)

(rect 40 60 120 120)

(fill middle)

(rect 60 90 80 80)

(pop-matrix))

#lang sketching

; Relativity.

; Each color is perceived in relation to other colors. The top and bottom

; bars each contain the same component colors, but a different display order

; causes individual colors to appear differently.

(define a (color 165 167  20))

(define b (color  77  86  59))

(define c (color  42 106 105))

(define d (color 165  89  20))

(define e (color 146 150 127))

(define (setup)

(size 640 360)

(no-loop) ; only call draw once

(color-mode 'hsb height height height))

(define (draw)

(draw-band a b c d e 0 (/ width 128))

(draw-band c a d b e (/ height 2) (/ width 128)))

(define (draw-band v w x y z y-pos bar-width)

(define colors (list v w x y z))

(define num 5) ; number of colors

(for ([i (in-range 0 width (* bar-width num))])

(for ([j (length colors)] [c colors])

(fill c)

(rect (+ i (* j bar-width)) y-pos bar-width (/ height 2)))))

#lang sketching

; Simple Linear Gradient

;

; The lerp-color() function is useful for interpolating between two colors.

; The default color mode is rgb:

(define b1 (color 255))           ; white

(define b2 (color   0))           ; black

(define c1 (color 204 102   0))   ; orange

(define c2 (color   0 102 153))   ; blueish

(define (setup)

(size 640 360)

; hsb = hue, saturation, brightness

(color-mode 'hsb width height 100)

(no-loop))

(define (draw)

; background

(set-gradient 0 0            (/ width 2) height  b1 b2 'x-axis) ; white->black

(set-gradient (/ width 2) 0  (/ width 2) height  b2 b1 'x-axis) ; black->white

; foreground

(set-gradient 50  90  540 80  c1 c2 'y-axis)  ; orange -> blue

(set-gradient 50 190  540 80  c2 c1 'x-axis)) ; blue   -> orange

(define (set-gradient x y  w h  c1 c2  axis)

(no-fill)

(case axis

[(y-axis) ; top to bottom gradient

(for ([i (in-range y (+ y h 1))])

(define inter (remap i y (+ y h) 0 1))

(define c (lerp-color c1 c2 inter))

(stroke c)

(line x i (+ x w) i))]

[(x-axis) ; left to right gradient

(for ([i (in-range x (+ x w 1))])

(define inter (remap i x (+ x w) 0 1))

(define c (lerp-color c1 c2 inter))

(stroke c)

(line i y i (+ y h)))]))

#lang sketching

(require racket/math)

; Radial Gradient.

; Draws a series of concentric circles to create a gradient from one color to another.

(define dim 1)

(define (setup)

(size 640 360)

(:= dim (/ width 2))

(background 0)

(color-mode 'hsb 360 100 100)

(no-stroke)

(ellipse-mode 'radius)

(background 0)

(frame-rate 1))

(define (draw)

(for ([x (in-range 0 (+ width 1) dim)])

(draw-gradient x (/ height 2))))

(define (draw-gradient x y)

(define radius (quotient dim 2))

(define h (exact-floor (random 0 360)))

(for ([r (in-range radius 0 -1)])

(fill h 90 90)

(ellipse x y r r)

(:= h (modulo (+ h 1) 360))))

#lang sketching

;; Wave Gradient

;

;; orignal Processing example by Ira Greenberg.

;; Generate a gradient along a sin() wave.

(define amplitude 30)

(define fill-gap 2.5)

(define (setup)

(size 640 360)

(background 200)

(no-loop))

(define (draw)

(define w/2 width)

(define h/2 height)

;; To efficiently set all the pixels on screen, make the set()

;; calls on a PImage, then write the result to the screen.

(define gradient (create-image width height 'rgb))

(define frequency 0)

(for ([i (in-range -75 (+ height 75))])

;; Reset angle to 0, so waves stack properly

(define angle 0)

;; Increasing frequency causes more gaps

(+= frequency 0.002)

(for ([j (+ width 75)])

(define py (+ i (* (sin (radians angle)) amplitude)))

(+= angle frequency)

(define c (color (abs   (/ (* (- py i) 255) amplitude))

(- 255 (/ (* (abs (- py i)) 255) amplitude))

(min 255 (* j (/ 255 (+ width 50))))))

;; Hack to fill gaps. Raise value of fillGap if you increase frequency

(for ([filler (in-range fill-gap)])

(image-set gradient (+ w/2 (int (- j filler))) (+ h/2 (- (int py) filler)) c)

(image-set gradient (+ w/2 (int    j))         (+ h/2    (int py))         c)

(image-set gradient (+ w/2 (int (+ j filler))) (+ h/2 (+ (int py) filler)) c))))

;; Draw the image to the screen

(image gradient 0 0))

#lang sketching

; Original Processing example by hbarragan.

;;;

;;; Objects

;;;

;; Move the cursor across the image to change the speed and positions

;; of the geometry. The class MRect defines a group of lines.

(class MRect Object

(init-field w xpos h ypos d t)

; w     single bar width

; xpos  rect xposition

; h     rect height

; ypos  rect yposition

; d     single bar distance

; t      number of bars

;; Constructor

; Nothing to do - values are used as is

(super-new)

;; Methods

(define/public (move pos-x pos-y damping)

(define dif (- ypos pos-y))

(when (> (abs dif) 1)

(-= ypos (/ dif damping)))

(:= dif (- xpos pos-x))

(when (> (abs dif) 1)

(-= xpos (/ dif damping))))

(define/public (display)

(for ([i t])

(rect (+ xpos (* i (+ d w))) ypos w (* height w)))))

;;;

;;; Example

;;;

(define r1 (make-object MRect 1 134.0 0.532  (* 0.1 height) 10.0 60))

(define r2 (make-object MRect 2  44.0 0.166  (* 0.3 height)  5.0 50))

(define r3 (make-object MRect 2  58.0 0.332  (* 0.4 height) 10.0 35))

(define r4 (make-object MRect 1 120.0 0.0498 (* 0.9 height) 15.0 60))

(define (setup)

(size 640 360)

(fill 255 204)

(frame-rate 60)

(no-stroke))

(define (draw)

(background 0)

(r1.display)

(r2.display)

(r3.display)

(r4.display)

(r1.move (- mouse-x (/ width 2))                           (+ mouse-y (* height 0.1))   30)

(r2.move (modulo (int (+ mouse-x (* width 0.05))) width)   (+ mouse-y (* height 0.025)) 20)

(r3.move (/ mouse-x 4)                                     (- mouse-y (* height 0.025)) 40)

(r4.move (- mouse-x (/ width 2))                           (- height mouse-y)           50))

#lang sketching

;; Multiple constructors

;; Original text:

;;   A class can have multiple constructors that assign the fields in different ways.

;;   Sometimes it's beneficial to specify every aspect of an object's data by

;;   assigning values to the fields, but other times it might be appropriate to define only one or a few.

;; Sketching:

;;    We use init fields with default values instead of explicit constructors.

;;;

;;; Spot

;;;

(class Spot Object

(init-field

[x      (* width 0.25)]

[y      (* height 0.5)]

[radius 40])

; "Constructor"

(super-new)

; Methods

(define/public (display)

(ellipse x y (* radius 2) (* radius 2))))

;;;

;;; Application

;;;

(define sp1 #f)

(define sp2 #f)

(define (setup)

(size 640 360)

(background 204)

(no-loop)

;; Run the constructor without parameters

(:= sp1 (make-object Spot))

;; Run the constructor with three parameters

(:= sp2 (make-object Spot (* width 0.5) (* height 0.5) 120)))

(define (draw)

(sp1.display)

(sp2.display))

#lang sketching

; Original Processing example by hbarragan.

;; /**

;;  * Composite Objects

;;  *

;;  * An object can include several other objects. Creating such composite objects

;;  * is a good way to use the principles of modularity and build higher levels of

;;  * abstraction within a program.

;;  */

(class Ring Object

(field [x #f] [y #f] [diameter #f] [on #f])

; x,y       x- and y-coordinate

; diameter  diameter of the ring

; on        turns the display on and off

;; Constructor

; values are used as is

(super-new)

;; Methods

(define/public (start xpos ypos)

(:= x xpos)

(:= y ypos)

(:= on #t)

(:= diameter (or diameter 1)))

(define/public (grow)

(when on

(+= diameter 0.5)

(when (> diameter (* 2 width))

(:= diameter 0.0))))

(define/public (display)

(when on

(no-fill)

(stroke-weight 4)

(stroke 155 153)

(ellipse x y diameter diameter))))

(class Egg Object

; x, y     X-coordinate, y-coordinate

; tilt     Left and right angle offset

; angle    Used to define the tilt

; scalar   Height of the egg

(init-field x y tilt scalar) ; passed to "constructor"

;; Constructor

(super-new)

(define angle 0.)    ; default value for floats in P are 0.0

(/= scalar 100.)

(define/public (wobble)

(:= tilt (/ (cos angle) 8.))

(+= angle 0.1))

(define/public (display)

(stroke "red")

(fill 255)

(push-matrix)

(translate x y)

(rotate tilt)

(scale scalar)

;; beginShape();

;;   vertex(0, -100);

;;   bezierVertex(25, -100, 40, -65, 40, -40);

;;   bezierVertex(40, -15, 25, 0, 0, 0);

;;   bezierVertex(-25, 0, -40, -15, -40, -40);

;;   bezierVertex(-40, -65, -25, -100, 0, -100);

;; endShape();

;; TODO: Shapes aren't implemented yet, so let's

;;       approximate with an ellipse instead

(ellipse-mode 'center)

(ellipse 0 0 80 120)

(pop-matrix)))

(class EggRing Object

(init-field x y t sp)            ; arguments for the constructor

(field [ovoid #f] [circle #f])   ; fields

;; Constructor

(super-new)

(:= circle (new Ring))

(:= ovoid  (new Egg [x x] [y y] [tilt t] [scalar sp]))

(circle.start x (- y (/ sp 2)))

(define/public (transmit)

(ovoid.wobble)

(ovoid.display)

(circle.grow)

(circle.display)

(unless circle.on

(:= circle.on #t))))

;;;

;;;

;;;

(define er1 #f)

(define er2 #f)

(define (setup)

; (no-loop)

(size 640 360)

(frame-rate 60)

(:= er1 (make-object EggRing (* width 0.45) (* height 0.5) 0.1  120))

(:= er2 (make-object EggRing (* width 0.65) (* height 0.8) 0.05 180)))

(define (draw)

(background 0)

(er1.transmit)

(er2.transmit))