Skip to content

Commit 8310207

Browse files
monkstonemonkstone
committed
add gicentre examples
1 parent 012b48d commit 8310207

File tree

4 files changed

+360
-0
lines changed

4 files changed

+360
-0
lines changed

‎data_path/barchart_example.rb

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
require 'propane'
2+
3+
class BarChartSketch < Propane::App
4+
# Sketch to demonstrate the use of the BarChart class to draw simple bar charts.
5+
# Version 1.3, 6th February, 2016.
6+
# Author Jo Wood, giCentre.
7+
8+
load_library :gicenter_utils
9+
include_package 'org.gicentre.utils.stat' # British spelling
10+
11+
def settings
12+
size(800, 300)
13+
smooth
14+
end
15+
16+
def setup # a static sketch no need for draw loop
17+
sketch_title 'Bar Chart Sketch'
18+
title_font = load_font(data_path('Helvetica-22.vlw'))
19+
small_font = load_font(data_path('Helvetica-12.vlw'))
20+
text_font(small_font)
21+
bar_chart = BarChart.new(self)
22+
data_float = [
23+
2_462, 2_801, 3_280, 3_983, 4_490, 4_894, 5_642, 6_322, 6_489, 6_401,
24+
7_657, 9_649, 9_767, 12_167, 15_154, 18_200, 23_124, 28_645, 39_471
25+
]
26+
bar_chart.setData(data_float.to_java(:float))
27+
data_label = %w(1830 1840 1850 1860 1870 1880 1890 1900 1910 1920 1930 1940 1950 1960 1970 1980 1990 2000 2010)
28+
bar_chart.setBarLabels(data_label)
29+
bar_chart.setBarColour(color(200, 80, 80, 100))
30+
bar_chart.setBarGap(2)
31+
bar_chart.setValueFormat('$###,###')
32+
bar_chart.showValueAxis(true)
33+
bar_chart.showCategoryAxis(true)
34+
background(255)
35+
bar_chart.draw(10, 10, width - 20, height - 20)
36+
fill(120)
37+
text_font(title_font)
38+
text('Income per person, United Kingdom', 70, 30)
39+
text_height = text_ascent # of title font
40+
text_font(small_font)
41+
text('Gross domestic product measured in inflation-corrected $US', 70, 30 + text_height)
42+
end
43+
end
44+
45+
BarChartSketch.new

‎data_path/data/Helvetica-12.vlw

8.97 KB
Binary file not shown.

‎data_path/data/Helvetica-22.vlw

19.8 KB
Binary file not shown.

‎regular/easing.rb

+315
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,315 @@
1+
require 'propane'
2+
3+
Vect = Struct.new(:x, :y)
4+
5+
class EasingSketch < Propane::App
6+
7+
load_library :gicenter_utils
8+
java_import 'org.gicentre.utils.move.Ease'
9+
10+
# Sketch to demonstrate the use of easing methods to control non-linear
11+
# animation sequences. Animates a sequence of discs between the bottom and top
12+
# of the window each using a different easing function. Shows a graph of time
13+
# against distance from the bottom of the window. Use the left/right arrow keys
14+
# to select a different easing function and up/down arrow keys to control
15+
# animation speed. Space bar pauses or unpauses the action.
16+
# Each static method in the Ease class takes a value between 0-1 and returns a
17+
# new value also between 0-1 that can be provided to the lerp method for
18+
# non-linear interpolation.
19+
# Version 1.5, 6th February, 2016.
20+
# Author Jo Wood, giCentre. Translated to propane by Martin Prout
21+
22+
# ------------------ Sketch-wide constants / variables ------------------
23+
24+
RADIUS = 15 # Size of animated discs in pixels.
25+
GRAPH_SIZE = 200 # Width and height of graph in pixels.
26+
LINEAR = 1
27+
SIN_IN = 2
28+
CUBIC_IN = 3
29+
QUARTIC_IN = 4
30+
QUINTIC_IN = 5
31+
SIN_OUT = 6
32+
CUBIC_OUT = 7
33+
QUARTIC_OUT = 8
34+
QUINTIC_OUT = 9
35+
SIN_BOTH = 10
36+
CUBIC_BOTH = 11
37+
QUARTIC_BOTH = 12
38+
QUINTIC_BOTH = 13
39+
BOUNCE_OUT = 14
40+
ELASTIC_IN = 15
41+
42+
attr_reader :t # represents time scaled between 0-1.
43+
attr_reader :t_inc # is the change in time in each animation frame.
44+
attr_reader :ease_style # Stores which form of easing is currently highlighted.
45+
attr_reader :is_paused # Pauses or unpauses the animation.
46+
attr_reader :origin
47+
48+
def settings
49+
size(900, 300)
50+
end
51+
52+
def setup
53+
sketch_title 'Easing'
54+
no_stroke
55+
text_font(create_font('Monospace.italic', 24))
56+
text_align(RIGHT, TOP)
57+
@t = 0
58+
@t_inc = 0.008
59+
@ease_style = LINEAR
60+
@is_paused = false
61+
end
62+
63+
# ------------------ Processing draw --------------------
64+
65+
# Animates the discs and shows the graph of the selected easing function.
66+
def draw
67+
background 255
68+
# Increment t (time) to oscillate between 0 and 1.
69+
@t_inc = t_inc.abs if t <= 0
70+
@t_inc = t_inc.abs * -1 if t >=1
71+
@t += t_inc
72+
# The lerp method is used to animate between the top and bottom of the window.
73+
# The Ease methods are used to modify t to give a non-linear value between 0 and 1.
74+
# Animation oscillates between the top and bottom of the window, so the t_inc value
75+
# which will be positive when moving up and negative when moving down, is used to
76+
# control the direction of the asymmetric easing functions.
77+
ease_style == LINEAR ? fill(220, 160, 160) : fill(240)
78+
ellipse(RADIUS, lerp(height - RADIUS, RADIUS, t), RADIUS * 2, RADIUS * 2)
79+
ease_style == SIN_IN ? fill(220, 160, 160) : fill(240)
80+
ellipse(4 * RADIUS, lerp(height - RADIUS, RADIUS, Ease.sinIn(t, t_inc)), RADIUS * 2, RADIUS * 2)
81+
ease_style == CUBIC_IN ? fill(220, 160, 160) : fill(240)
82+
ellipse(7 * RADIUS, lerp(height - RADIUS, RADIUS, Ease.cubicIn(t, t_inc)), RADIUS * 2, RADIUS * 2)
83+
ease_style == QUARTIC_IN ? fill(220, 160, 160) : fill(240)
84+
ellipse(10 * RADIUS, lerp(height - RADIUS, RADIUS, Ease.quarticIn(t, t_inc)), RADIUS * 2, RADIUS * 2)
85+
ease_style == QUINTIC_IN ? fill(220, 160, 160) : fill(240)
86+
ellipse(13 * RADIUS, lerp(height - RADIUS, RADIUS, Ease.quinticIn(t, t_inc)), RADIUS * 2, RADIUS * 2)
87+
ease_style == SIN_OUT ? fill(220, 160, 160) : fill(240)
88+
ellipse(16 * RADIUS, lerp(height - RADIUS, RADIUS, Ease.sinOut(t, t_inc)), RADIUS * 2, RADIUS * 2)
89+
ease_style == CUBIC_OUT ? fill(220, 160, 160) : fill(240)
90+
ellipse(19 * RADIUS, lerp(height - RADIUS, RADIUS, Ease.cubicOut(t, t_inc)), RADIUS * 2, RADIUS * 2)
91+
ease_style == QUARTIC_OUT ? fill(220, 160, 160) : fill(240)
92+
ellipse(22 * RADIUS, lerp(height - RADIUS, RADIUS, Ease.quarticOut(t, t_inc)), RADIUS * 2, RADIUS * 2)
93+
ease_style == QUINTIC_OUT ? fill(220, 160, 160) : fill(240)
94+
ellipse(25 * RADIUS, lerp(height - RADIUS, RADIUS, Ease.quinticOut(t, t_inc)), RADIUS * 2, RADIUS * 2)
95+
ease_style == SIN_BOTH ? fill(220, 160, 160) : fill(240)
96+
ellipse(28 * RADIUS, lerp(height - RADIUS, RADIUS, Ease.sinBoth(t)), RADIUS * 2, RADIUS * 2)
97+
ease_style == CUBIC_BOTH ? fill(220, 160, 160) : fill(240)
98+
ellipse(31 * RADIUS, lerp(height - RADIUS, RADIUS, Ease.cubicBoth(t)), RADIUS * 2, RADIUS * 2)
99+
ease_style == QUARTIC_BOTH ? fill(220, 160, 160) : fill(240)
100+
ellipse(34 * RADIUS, lerp(height - RADIUS, RADIUS, Ease.quarticBoth(t)), RADIUS * 2, RADIUS * 2)
101+
ease_style == QUINTIC_BOTH ? fill(220, 160, 160) : fill(240)
102+
ellipse(37 * RADIUS, lerp(height - RADIUS, RADIUS, Ease.quinticBoth(t)), RADIUS * 2, RADIUS * 2)
103+
ease_style == BOUNCE_OUT ? fill(220, 160, 160) : fill(240)
104+
ellipse(40 * RADIUS, lerp(height - RADIUS, RADIUS, Ease.bounceOut(t, t_inc)), RADIUS * 2, RADIUS * 2)
105+
ease_style == ELASTIC_IN ? fill(220, 160, 160) : fill(240)
106+
ellipse(43 * RADIUS, lerp(height - RADIUS, RADIUS, Ease.elasticIn(t)), RADIUS * 2, RADIUS * 2)
107+
# Draws a graph of the currently selected easing function.
108+
draw_graph
109+
end
110+
111+
# ------------------ Processing key handling --------------------
112+
113+
# Responds to key presses. Left and right arrows control which easing function is to
114+
# be highlighted and graphed. The up and down arrows control the speed of animation.
115+
# The space bar pauses or unpauses the animation.
116+
def key_pressed
117+
if key == ' '
118+
@is_paused = !is_paused
119+
is_paused ? no_loop : loop
120+
end
121+
return unless key == CODED
122+
# Up and down arrows control the speed of animation.
123+
case key_code
124+
when UP
125+
@t_inc *= 1.1
126+
when DOWN
127+
@t_inc *= 0.9
128+
# Left and right arrows highlight a particular easing style
129+
when RIGHT
130+
@ease_style += 1
131+
@ease_style = LINEAR if ease_style > ELASTIC_IN
132+
when LEFT
133+
@ease_style -= 1
134+
@ease_style = ELASTIC_IN if ease_style < LINEAR
135+
else
136+
return
137+
end
138+
end
139+
140+
# ------------------ Private methods--------------------
141+
142+
# Draws a graph of the currently selected easing function.
143+
def draw_graph
144+
push_style # Store previously used drawing styles.
145+
stroke(150)
146+
fill(150)
147+
stroke_weight(3)
148+
@origin = Vect.new(width - GRAPH_SIZE - RADIUS, height - 30)
149+
# Draw labelled axes.
150+
line(origin.x, origin.y, origin.x + GRAPH_SIZE, origin.y)
151+
line(origin.x, origin.y, origin.x, origin.y - GRAPH_SIZE)
152+
text('time', origin.x + GRAPH_SIZE, origin.y + 5)
153+
push_matrix
154+
translate(origin.x - 24, origin.y - GRAPH_SIZE)
155+
rotate(-HALF_PI)
156+
text('distance', 0, 0)
157+
pop_matrix
158+
# Draw transformation function.
159+
old_x = 0
160+
old_y = 0
161+
stroke(150)
162+
stroke_weight(0.5)
163+
y = 0
164+
px = t
165+
py = 0
166+
case ease_style
167+
when LINEAR
168+
text('Linear (no easing)', width - RADIUS, RADIUS)
169+
(0.01...1).step(0.01) do |x|
170+
y = x
171+
line(origin.x + old_x * GRAPH_SIZE, origin.y - old_y * GRAPH_SIZE, origin.x + x * GRAPH_SIZE, origin.y - y * GRAPH_SIZE)
172+
old_x = x
173+
old_y = y
174+
end
175+
py = px
176+
when SIN_IN
177+
text('sinIn', width - RADIUS, RADIUS)
178+
(0.01...1).step(0.01) do |x|
179+
y = Ease.sinIn(x, t_inc)
180+
line(origin.x + old_x * GRAPH_SIZE, origin.y - old_y * GRAPH_SIZE, origin.x + x * GRAPH_SIZE, origin.y - y * GRAPH_SIZE)
181+
old_x = x
182+
old_y = y
183+
end
184+
py = Ease.sinIn(px, t_inc)
185+
when CUBIC_IN
186+
text('cubicIn', width - RADIUS, RADIUS)
187+
(0.01...1).step(0.01) do |x|
188+
y = Ease.cubicIn(x, t_inc)
189+
line(origin.x + old_x * GRAPH_SIZE, origin.y - old_y * GRAPH_SIZE, origin.x + x * GRAPH_SIZE, origin.y - y * GRAPH_SIZE)
190+
old_x = x
191+
old_y = y
192+
end
193+
py = Ease.cubicIn(px, t_inc)
194+
when QUARTIC_IN
195+
text('quarticIn', width - RADIUS, RADIUS)
196+
(0.01...1).step(0.01) do |x|
197+
y = Ease.quarticIn(x, t_inc)
198+
line(origin.x + old_x * GRAPH_SIZE, origin.y - old_y * GRAPH_SIZE, origin.x + x * GRAPH_SIZE, origin.y - y * GRAPH_SIZE)
199+
old_x = x
200+
old_y = y
201+
end
202+
py = Ease.quarticIn(px, t_inc)
203+
when QUINTIC_IN
204+
text('quinticIn', width - RADIUS, RADIUS)
205+
(0.01...1).step(0.01) do |x|
206+
y = Ease.quinticIn(x, t_inc)
207+
line(origin.x + old_x * GRAPH_SIZE, origin.y - old_y * GRAPH_SIZE, origin.x + x * GRAPH_SIZE, origin.y - y * GRAPH_SIZE)
208+
old_x = x
209+
old_y = y
210+
end
211+
py = Ease.quinticIn(px, t_inc)
212+
when SIN_OUT
213+
text('sinOut', width - RADIUS, RADIUS)
214+
(0.01...1).step(0.01) do |x|
215+
y = Ease.sinOut(x, t_inc)
216+
line(origin.x + old_x * GRAPH_SIZE, origin.y - old_y * GRAPH_SIZE, origin.x + x * GRAPH_SIZE, origin.y - y * GRAPH_SIZE)
217+
old_x = x
218+
old_y = y
219+
end
220+
py = Ease.sinOut(px, t_inc)
221+
when CUBIC_OUT
222+
text('cubicOut', width, RADIUS, RADIUS)
223+
(0.01..1).step(0.01) do |x|
224+
y = Ease.cubicOut(x, t_inc)
225+
line(origin.x + old_x * GRAPH_SIZE, origin.y - old_y * GRAPH_SIZE, origin.x + x * GRAPH_SIZE, origin.y - y * GRAPH_SIZE)
226+
old_x = x
227+
old_y = y
228+
end
229+
py = Ease.cubicOut(px, t_inc)
230+
when QUARTIC_OUT
231+
text('quarticOut', width - RADIUS, RADIUS)
232+
(0.01...1).step(0.01) do |x|
233+
234+
y = Ease.quarticOut(x, t_inc)
235+
line(origin.x + old_x * GRAPH_SIZE, origin.y - old_y * GRAPH_SIZE, origin.x + x * GRAPH_SIZE, origin.y - y * GRAPH_SIZE)
236+
old_x = x
237+
old_y = y
238+
end
239+
py = Ease.quarticOut(px, t_inc)
240+
when QUINTIC_OUT
241+
text('quinticOut', width, RADIUS, RADIUS)
242+
(0.01..1).step(0.01) do |x|
243+
y = Ease.quinticOut(x, t_inc)
244+
line(origin.x + old_x * GRAPH_SIZE, origin.y - old_y * GRAPH_SIZE, origin.x + x * GRAPH_SIZE, origin.y - y * GRAPH_SIZE)
245+
old_x = x
246+
old_y = y
247+
end
248+
py = Ease.quinticOut(px, t_inc)
249+
when SIN_BOTH
250+
text('sinBoth', width, RADIUS, RADIUS)
251+
(0.01...1).step(0.01) do |x|
252+
y = Ease.sinBoth(x)
253+
line(origin.x + old_x * GRAPH_SIZE, origin.y - old_y * GRAPH_SIZE, origin.x + x * GRAPH_SIZE, origin.y - y * GRAPH_SIZE)
254+
old_x = x
255+
old_y = y
256+
end
257+
py = Ease.sinBoth(px)
258+
when CUBIC_BOTH
259+
text('cubicBoth', width, RADIUS, RADIUS)
260+
(0.01...1).step(0.01) do |x|
261+
y = Ease.cubicBoth(x)
262+
line(origin.x + old_x * GRAPH_SIZE, origin.y - old_y * GRAPH_SIZE, origin.x + x * GRAPH_SIZE, origin.y - y * GRAPH_SIZE)
263+
old_x = x
264+
old_y = y
265+
end
266+
py = Ease.cubicBoth(px)
267+
when QUARTIC_BOTH
268+
text('quarticBoth', width, RADIUS, RADIUS)
269+
(0.01...1).step(0.01) do |x|
270+
y = Ease.quarticBoth(x)
271+
line(origin.x + old_x * GRAPH_SIZE, origin.y - old_y * GRAPH_SIZE, origin.x + x * GRAPH_SIZE, origin.y - y * GRAPH_SIZE)
272+
old_x = x
273+
old_y = y
274+
end
275+
py = Ease.quarticBoth(px)
276+
when QUINTIC_BOTH
277+
text('quinticBoth', width, RADIUS, RADIUS)
278+
(0.01...1).step(0.01) do |x|
279+
y = Ease.quinticBoth(x)
280+
line(origin.x + old_x * GRAPH_SIZE, origin.y - old_y * GRAPH_SIZE, origin.x + x * GRAPH_SIZE, origin.y - y * GRAPH_SIZE)
281+
old_x = x
282+
old_y = y
283+
end
284+
py = Ease.quinticBoth(px)
285+
when BOUNCE_OUT
286+
text('bounceOut', width - RADIUS, RADIUS)
287+
(0.01...1).step(0.01) do |x|
288+
y = Ease.bounceOut(x, t_inc)
289+
line(origin.x + old_x * GRAPH_SIZE, origin.y - old_y * GRAPH_SIZE, origin.x + x * GRAPH_SIZE, origin.y - y * GRAPH_SIZE)
290+
old_x = x
291+
old_y = y
292+
end
293+
py = Ease.bounceOut(px, t_inc)
294+
when ELASTIC_IN
295+
text('elasticIn', width - RADIUS, RADIUS)
296+
(0.01...1).step(0.01) do |x|
297+
y = Ease.elasticIn(x)
298+
line(origin.x + old_x * GRAPH_SIZE, origin.y - old_y * GRAPH_SIZE, origin.x + x * GRAPH_SIZE, origin.y - y * GRAPH_SIZE)
299+
old_x = x
300+
old_y = y
301+
end
302+
py = Ease.elasticIn(px)
303+
end
304+
# Draw the disc's current position on the graph.
305+
no_stroke
306+
fill(220, 160, 160)
307+
ellipse(origin.x + px * GRAPH_SIZE, origin.y - py * GRAPH_SIZE, 10, 10)
308+
stroke(220, 160, 160)
309+
line(origin.x + px * GRAPH_SIZE, origin.y - py * GRAPH_SIZE, origin.x + px * GRAPH_SIZE, origin.y)
310+
line(origin.x + px * GRAPH_SIZE, origin.y - py * GRAPH_SIZE, origin.x, origin.y - py * GRAPH_SIZE)
311+
pop_style # Restores previously used drawing styles.
312+
end
313+
end
314+
315+
EasingSketch.new

0 commit comments

Comments
 (0)