**# 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!!!

## No comments:

## Post a Comment