# Small Demo Routines

Hi All,

Started a new thread for the posting of small demo routines, which I find interesting and help me to improve my understanding and familiarity of languages.

I start with a small routing converted from a javascript file, written by Keith Peters ( http://www.bit-101.com/blog/?p=3214 ) which shows a build up local network nodules. Simple but took me a while to recode, largely because I misinterpreted what the routine did and also because of my lack of knowledge on Lua tables and some areas of javascript.

The code is :

``````-- A converted javascript (by Keith Peters) adapted for Codea by Bri_G
-- ref. http://www.bit-101.com/blog/?p=3214
-- excellent description given note - retained background used

function setup()
-- system and variable initialisations
displayMode(FULLSCREEN)
backingMode(RETAINED)
wide = WIDTH
high = HEIGHT
pts = {}
points = 100
nopts = 1
max = 150
bckgnd = "FALSE"
end

function draw()
-- background not used so network built up from start
-- normal or inverse colouring can be used
-- rem out the next 4 lines for black background
if bckgnd == "FALSE" then
background(255,255,255,255)
bckgnd = "TRUE"
end
-- generate a random point on the screen
temp = vec2(math.random(wide), math.random(high))
-- loop to check if new point networkable with dist < 150
-- checks for each point in the array
for i = 1, points do
pts[i] = vec2(math.random(wide), math.random(high))
dx = pts[i].x - temp.x
dy = pts[i].y - temp.y
dist = math.sqrt(dx*dx + dy*dy)
if (dist < max) then
-- change the number in lineWidth to modify display
lineWidth = 5 - dist/max
strokeWidth(lineWidth)
stroke(218, 43, 53, 20)
line(pts[i].x, pts[i].y, temp.x, temp.y)
end
end
nopts = nopts + 1
pts[nopts] = temp
end
``````

It can also be found at https://gist.github.com/2823293

I hope you enjoy it. Note to run it required the backgroundMode set to RETAINED to see the build up of the network, rem out the line and see what you get without it !!! also try with a background(255,255,255,255) in the draw() function.

I’ll post a few other routines as I build them up.

Mods - on the forum, is there any chance you could add a copy of the links to the next page of posts, seen at the bottom, to the top then we don’t have to scroll down each page to move on? Or even a link to ‘latest post’?

Bri_G

#:-s

Hi All,

Just tried to record a small video of the app and was surprised to see that the graphics changed when recording. Mods - is this a bug???

Bri_G

I wouldn’t be surprised if recording didn’t work properly with backingMode(RETAINED).

Hi Bortels,

The effect is a bit weird. The app works by overwriting the screen - a new node is generated and an array checked for local nodes. If close enough a line is drawn between the two nodes - the lines are fine and use significant transparency, the width is calculate within a certain range. The effect is a slow build up of the network.

When the video is engaged it’s almost like automatic background is entered for each frame and the nodules/lines are drawn with thicker more intense lines - not really what was trying to be achieved in the app. This might not show up in an app using background() in the drawing cycle and so may not affect most of the apps that have been recorded. Could it have something to do with the inclusion of ‘made with Codea’?

Thanks - I think this is destined for the deep archives, just thought I’d mention it.

Bri_G

Interesting effect, @Bri_G. Very fine detail and creates an organic effect. I found for some reason the background starts white but turns black once you change orientations.

Hi Fred,

Thanks for the feedback, yes it would change background as I set up to run, usually in portrait mode, once and to draw a white background then stopping further background drawing so that the pattern builds up. When you turn the pad the system clears the screen and is prevented in drawing the background again by my code - hence now black. I think it also draws to the portrait width so it misses off part of the landscape screen on the right. If you want to see it in the portrait mode start the app from that orientation. I could edit this but I doubt there will be any interest.

The original runs in black on white so I chose red which would appear against both backgrounds. I know what you mean about the organic nature of it - it reminds me of the Life algorithm.

Bri_G

On my new iPad, this app doesn’t work correctly unless I am recording video.

Seems like the same incompatibility with RETAINED vs. New iPad that I’m seeing in my app (detailed in another thread), where things fly off toward the left.

For whatever reason, switching to displayMode(STANDARD) instead of FULLSCREEN makes it work.

Try this.

``````function setup()
displayMode(FULLSCREEN)
backingMode(RETAINED)
points = {}
max = 150
end

function draw()
stroke(225, 224, 202, 40)
local p0 = vec2(math.random(WIDTH), math.random(HEIGHT))
for i = 1, #points do
local p1 = points[i]
local dist = (p1 - p0):len()
if (dist < max) then
strokeWidth(6 - dist/max)
line(p1.x, p1.y, p0.x, p0.y)
end
end
table.insert(points, p0)
end
``````

A variation with increasing opacity and decreasing strokeWidth.

``````
function setup()
displayMode(FULLSCREEN)
backingMode(RETAINED)
points = {}
MAX = 150
strkWidth = 20
opacity = 10
end

function draw()
stroke(225, 224, 202, opacity)
strkWidth = strkWidth / (1 + ElapsedTime / 700)
opacity = opacity + ElapsedTime / 10
local p0 = vec2(math.random(WIDTH), math.random(HEIGHT))
if (#points > 350) then return end
for i = 1, #points do
local p1 = points[i]
local dist = (p1 - p0):len()
if (dist < MAX) then
strokeWidth(strkWidth - dist / MAX)
line(p1.x, p1.y, p0.x, p0.y)
end
end
table.insert(points, p0)
end
``````

Hi @pepinganos and @Goatherd,

Nice touches @pepinganos a few learning points for me there - I keep forgetting half of the commands for Lua and am just getting used to vector functions. I like your variants.

@Goatherd, have you tried out the @pepinganos routines - do they still show the same error?
Could it be a feature of the sensor flipping between portrait and landscape modes as WIDTH and HEIGHT are used?

Bri_G

B-)

Hi All,

I know this is very basic, but I’m starting small and hoping to build up to something better. The next demo is a simple particles demo. code below:

``````-- A converted javascript (by Keith Peters) adapted for Codea by Bri_G
-- ref. http://www.bit-101.com/blog/?p=3148
-- excellent description given

-- Use this function to perform your initial setup
function setup()
-- initialisations of system and variables used
displayMode(FULLSCREEN)
points = {x={}, y={}, z={}, vx={}, vy={}, size={}, colr={}}
numPoints = 50
bounce = -1

wide = WIDTH
height = HEIGHT

for i = 1, numPoints do
points.x[i] = math.random(wide)
points.y[i] = math.random(height)
points.vx[i] = math.random(6,10) - 5
points.vy[i] = math.random(6,10) - 5
points.size[i] = math.random(10,30)
points.colr[i] = color(math.random(50,255),math.random(50,255), math.random(50,255),255)
end
end

-- This function gets called once every frame
function draw()
-- This sets a dark background color
background(0, 0, 0, 255)
-- This sets the line thickness
strokeWidth(1)
for i = 1,numPoints do
pts = points.size[i]
fill(points.colr[i])
ellipse(points.x[i], points.y[i], pts, pts)
end
update()
end

function update()
for i = 1, numPoints do
points.x[i] = points.x[i] + points.vx[i]
points.y[i] = points.y[i] + points.vy[i]
if points.x[i] > wide then
points.x[i] = wide
points.vx[i] = points.vx[i]*bounce
elseif points.x[i] < 0 then
points.x[i] = 0
points.vx[i] = points.vx[i]*bounce
end
if points.y[i] > height then
points.y[i] = height
points.vy[i] = points.vy[i]*bounce
elseif points.y[i] < 0 then
points.y[i] = 0
points.vy[i] = points.vy[i]*bounce
end
end
end

``````

From the same source, just crudely converted to Codea Lua.

find it on https://gist.github.com/2851553

Bri_G

Hi Again,

Following up with another demo, gleaned from the good Mr Keith Peters again. In this case it’s particles with a difference - generated at an ‘emitter’.

``````-- A converted javascript (by Keith Peters) adapted for Codea by Bri_G
-- ref. http://www.bit-101.com/blog/?p=3150
-- excellent description given

-- Use this function to perform your initial setup
function setup()
-- initialisations of system and variables used
displayMode(FULLSCREEN)
numPoints = 300
gravity = 0.1

points = {x={}, y={}, vx={}, vy={}, radius={}, length={}, colr={}}
wide = WIDTH
height = HEIGHT
emitterX = wide/2
emitterY = 0.8*height

initPoint(#points.x + 1)
end

-- This function gets called once every frame
function draw()
-- This sets a dark background color
background(0, 0, 0, 255)
-- This sets the line thickness
strokeWidth()
fill(29, 181, 212, 255)
len = #points.x
for i = 1, len do
fill(points.colr[i])
end
update()
end

function update()
len = #points.x
for i = 1, len do
points.vy[i] = points.vy[i] - gravity
points.x[i] = points.x[i] + points.vx[i]
points.y[i] = points.y[i] + points.vy[i]
if (points.x[i] > wide or points.x[i] < 0 or points.y[i] > height or points.y[i] < 0) then
initPoint(i)
end
end
end

if #points.x < numPoints then
initPoint(#points.x + 1)
end
end

function initPoint(i)
points.x[i] = emitterX
points.y[i] = emitterY
points.vx[i] = math.random(4) - 2
points.vy[i] = math.random(5) - 2
points.colr[i] = color(math.random(50,200),math.random(50,200),math.random(50,200),255)
end

``````

Again you can find it at:

https://gist.github.com/2851560

Any feedback or improvements?

Bri_G

Hi All,

Four small routines, based on Seb Lee-Delisle’s js code with HTML5 for producing starfields.

First one is a basic backdrop, second is the traditional scroll into the screen, third is a scrolling around a 3D starfield matrix and the last is the Elite/Frontier style scroll guided by touch on the screen.

These were developed on Love2D and actually seem to look a little better on that, but will probably be tunable to the small screen.

One point of note - when I recorded the video (below) on the pad there was some graphics present that I hadn’t included - sort of a cross field icon - where has this come from ? Is it a residue in Codea?

OK

code can be found at

https://gist.github.com/2953321 basic field

https://gist.github.com/2953333 scrolling into screen

https://gist.github.com/2953341 scrolling around matrix

https://gist.github.com/2953348 To boldly go where … well beginnings of it

video (not the best subject matter:

Enjoy,

Please let me know of any improvements you make.

Bri_G

Hi All,

Here is another little addition - a small fractal tree that I saw in a Processing example. It’s a bit slow but there are a lot of recursive calls to achieve the effect. Video and Processing link provided below, with the code and a link to the gist.

I found this really useful as it made me realise the translation() function is not what I thought. Not just a move but basically a re-location of the relative zero point for future drawing. Finally sunk in, but I think it will take a little more use to get used to it properly.

I think Inviso or Andrew_Stacey may have mentioned this already.

``````-- Dragon curve 3
-- derived form a processing example at
-- http://processing.org/learning/topics/tree.html

function setup()
--
displayMode(FULLSCREEN)
Sx = WIDTH/2
Sy = 0
-- initialise the drawing angle
theta = 0
-- initial drawing length
length = (HEIGHT)/3
end

function draw()
--
background(0, 0, 0, 255)
-- move to horisontal middle of screen at zero height
translate(Sx,Sy)
-- inialise end of line point
S2x = 0
S2y =  length
-- set up line drawing parameters
stroke(255, 255, 255, 255)
lineCapMode(ROUND)
strokeWidth(3)
-- draw first line and move to top of it
line(0, 0,S2x,S2y)
translate(0, length)
-- call the iterative pattern routine
dragon(length)
end

function dragon(length)
-- reduce the line length each iteration
local size = length*0.66
if size > 2 then
-- draw lines in one direction
pushMatrix()
rotate(theta)
line(0,0,0,size)
translate(0,size)
-- recursive self call
dragon(size)
popMatrix()
-- now draw them in the opposite direction
pushMatrix()
rotate(-theta)
line(0,0,0,size)
translate(0,size)
-- recursive self call
dragon(size)
popMatrix()
end
end

function touched(touch)
-- adjust the line drawing angle based on x value from CurrentTouch
theta = 90*((CurrentTouch.x)/(WIDTH))
-- adjust theta as you approach extremes due to my fat fingers
if theta < 2 then theta = 0 end
if theta > 88 then theta = 90 end
end
``````

and small video:

by the way you adjust the angle by way of touching the screen, near left - a line, near right final pattern

Hope you like it.

Bri_G

Hi, @Bri_G, excellent work!
I have trouble only with the “particle emitter”: it seems, the program is running, but nothing appears on the screen, just the black background. What I’m doing wrong?
Saludos,
Victor
~O)

Update: well, it’s sometimes very nice to ask stupid questions, because you encourage yourself, especially when you are a newbie, to try to find your way alone

In this particular case, the problem was the position of the emitter: the code says 800, which is outside the screen. It should be <= HEIGHT. By the way: nice nice nice simulation! Congratulations!

Saludos,

Victor ~O)

P.S. Sorry for my english. Worst than being a newbie, it’s being at the wrong side of the language barrier (especially when dealing with very sensitive people ).

Your English is fine. I find it rather amusing that generally, the non-native English speakers (writers, actually) often apologize for their skills when they don’t need to, and the native English writers with the worst possible grammar and spelling never do.

Jim

Thank you for your kind words.
Saludos,
Victor ~O)

Hi @quezdav,

Thanks for the feedback and notification of the bug. It arose as I tend to use portrait mode most of the time, so I’ve adjusted the original code and will edit the GitHub file later.

I hope you are enjoying Codea, I learn something new about it virtually every day. By the way your English is excellent.

Thanks an saludos.

Bri_G

Thanks @Bri_G. Regarding Codea: I’m an addict to it now @-) And I’m learning a lot following all the amazing work you are doing guys.
Saludos,
Victor ~O)