# Made by Jared "BlueThen" C.
# November 5, 2009.
# www.bluethen.com
# translated to ruby processing by monkstone April 14 2010
# variable a is used for determining the shape's y position, coupled with the distance they are from the center.
# setup(), the first function called when the applet is started
attr_reader :a, :y
def setup()
@a = 0
@y = 0
# the applet is set to 500 pixels by 500 pixels
size(500, 500)
# RGB mode set to maximum of 6, since we'll be using 6 colors. 0 for black, 6 for white, and everything in between.
color_mode(RGB, 6)
# The stroke color is used to determine the border color of each quadrilateral.
stroke(0)
# frame rate is set to 30.
frame_rate(30)
end
def draw()
# a is decreased by 0.08. it represents the amount of radians the height of our boxes changes, and their speed.
# if we did nothing to a, then none of our shapes will move, so a is a key component in our formulas.
@a -= 0.08
# screen is cleared and background is set to 6 (white).
background(6)
# (x, z) is the ground, while y is vertical)
(-7..7).each do |x| # loop over range for the x axis
(-7..7).each do |z| # loop over range for the z axis
# The y variable is set to determine the height of the box.
# We use formula radius * cos(angle) to determine this.
# Since cosine, when graphed, creates a wave, we can use this to have the boxes transition from small to big smoothly.
# The radius pretty much stands for our range. cosine alone will return values between -1 and 1, so we multiply this
# by 24 to increase this value. the formula will return something in between -24 and 24.
# The angle is in radians. an entire loop (circle) is 2PI radians, or roughly 6.283185.
# distance is used to create the circular effect. it makes the boxes of the same radius around the center similar.
# The distance ranges from 0 to 7, so 0.55 * distance will be between 0 and 3.85. this will make the highest and lowest
# box a little more than half a loop's difference. a is added on, (subtracted if you want to be technical, since a is
# negative), to provide some sort of change for each frame. if we don't include '+ a' in the algorithm, the boxes would
# be still.
@y = (24 * cos(0.55 * distance(x,z,0,0) + a)).round()
# These are 2 coordinate variations for each quadrilateral.
# since they can be found in 4 different quadrants (+ and - for x, and + and - for z),
# we'll only need 2 coordinates for each quadrilateral (but we'll need to pair them up differently
# for this to work fully).
#
# Multiplying the x and z variables by 17 will space them 17 pixels apart.
# The 8.5 will determine half the width of the box ()
# 8.5 is used because it is half of 17. since 8.5 is added one way, and 8.5 is subtracted the other way, the total
# width of each box is 17. this will eliminate any sort of spacing in between each box.
#
# If you enable no_stroke(), then the whole thing will appear as one 3d shape. try it.
xm = x * 17 - 8.5
xt = x * 17 + 8.5
zm = z * 17 - 8.5
zt = z * 17 + 8.5
# We use an integer to define the width and height of the window. this is used to save resources on further calculating
halfw = width/2
halfh = height/2
# Here is where all the isometric calculating is done.
# We take our 4 coordinates for each quadrilateral, and find their (x,y) coordinates using an isometric formula.
# You'll probably find a similar formula used in some of my other isometric animations. however, I normally use
# these in a function. to avoid using repetitive calculation (for each coordinate of each quadrilateral, which
# would be 3 quads * 4 coords * 3 dimensions = 36 calculations).
#
# Formerly, the isometric formula was ((x - z) * cos(radians(30)) + width/2, (x + z) * sin(radians(30)) - y + height/2).
# However, the cosine and sine are constant, so they could be precalculated. cosine of 30 degrees returns roughly 0.866,
# which can round to 1, leaving it out would have little artifacts (unless placed side_by_side to accurate versions, where
# everything would appear wider in this version) sine of 30 returns 0.5.
#
# We left out subtracting the y value, since this changes for each quadrilateral coordinate. (-40 for the base, and our y
# variable) these are later subtracted in the actual quad().
isox1 = (xm - zm + halfw).round
isoy1 = ((xm + zm) * 0.5 + halfh).round
isox2 = (xm - zt + halfw).round
isoy2 = ((xm + zt) * 0.5 + halfh).round
isox3 = (xt - zt + halfw).round
isoy3 = ((xt + zt) * 0.5 + halfh).round
isox4 = (xt - zm + halfw).round
isoy4 = ((xt + zm) * 0.5 + halfh).round
#the side quads. 2 and 4 is used for the coloring of each of these quads
fill(2)
quad(isox2, isoy2 - y, isox3, isoy3 - y, isox3, isoy3 + 40, isox2, isoy2 + 40)
fill(4)
quad(isox3, isoy3 - y, isox4, isoy4 - y, isox4, isoy4 + 40, isox3, isoy3 + 40)
# the top quadrilateral.
# y, which ranges between -24 and 24, multiplied by 0.05 ranges between -1.2 and 1.2
# we add 4 to get the values up to between 2.8 and 5.2.
# this is a very fair shade of grays, since it doesn't become one extreme or the other.
fill(4 + y * 0.05)
quad(isox1, isoy1 - y, isox2, isoy2 - y, isox3, isoy3 - y, isox4, isoy4 - y)
end
end
end
# the distance formula
def distance(x, y, cx, cy)
sqrt(sq(cx - x) + sq(cy - y))
end
One of the problems with my script is that it turns all '-' to '_' also it can't cope with C++ style multi-line comments they should probably be banned anyway!!!
