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

:slight_smile:

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

:slight_smile:

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.

Thanks for your feedback, more little routines will follow shortly.

Bri_G

:slight_smile:

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)
    -- Do your drawing here
    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

:slight_smile:

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()
    -- Do your drawing here
        fill(29, 181, 212, 255)
    len = #points.x
    for i = 1, len do
        fill(points.colr[i])  
        ellipse(points.x[i], points.y[i], points.radius[i], points.radius[i])
    end
    addPoint()
    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

function addPoint() 
    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.radius[i] = math.random(10) + 1
    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

:slight_smile: :slight_smile:

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:

http://www.youtube.com/watch?v=Hgy2uXCYtg0

Enjoy,

Please let me know of any improvements you make.

Bri_G

:slight_smile:

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
-- adapted for the pad by Bri_G
  
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

processing link: http://processing.org/learning/topics/tree.html

gist link: https://gist.github.com/3004619

and small video:

http://www.youtube.com/watch?v=78acpQd1SvQ

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

:slight_smile:

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 :smiley:

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 :wink: ).

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

:slight_smile:

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)