Proposed projects for inclusion with Codea 2.0 as learning projects

I made a proposal earlier to include a number of tutorial type projects with Codea, to make it easier for new coders to learn the basics, because the current Demo projects show off features and are (mostly) not intended as tutorials.

These projects might be listed where the user’s projects normally go, ie in the bottom row, on the right of the Add New Project button. This means new users will start up Codea and find demo projects in the top row, and tutorial type projects in the bottom row (which they can keep or delete as they wish, as they begin adding their own projects).

This thread is to discuss projects which may be suitable for tutorials. If you add code or a project link, please give it a unique name or number or something, so we don’t get confused when commenting on it.

As a first proposal, @dave1707 has collected a bunch of over 20 solutions to common problems, and I’ve collated them into a single project where you can run them one by one, and copy individual code tabs to your own projects if you want to adapt them.

I have got them all running, and I have commented only the first three, but I thought it was worth sharing at this point, for comment. I’m aware there are some near duplicates, and will look at those when I get to them.

Code is here (long press, of course):
Dave: https://gist.github.com/dermotbalson/9542640

Video: https://www.youtube.com/watch?v=BxqFJcII8po
(Yes, I see the small physics glitch at the end, I will fix it)

Tutorials don’t just have to be basic, because we also get experienced programmers joining, and we want to encourage them too.

Here is a set of tutorials covering 3D lighting, again in a single project.

Lighting: https://gist.github.com/dermotbalson/9560594

https://www.youtube.com/watch?v=pHOEx7tTmMg

@Ignatz Looks good so far. One thing, some of the examples run in full screen portrait mode, but there’s nothing to indicate that, so they don’t look the way they should. Not sure what can be done.

@dave1707 - I can fix that easily enough.

@Ignatz Thanks.

Here is another set of tutorials covering something I think is really important. How to get stuff moving around the screen and bouncing off the sides, with and without physics (which makes a handy introduction to physics).

Bouncing: https://gist.github.com/dermotbalson/9561135

https://www.youtube.com/watch?v=GZAfhZTK4rU

One more, that I wrote for a school class, to build a simple puzzle where you tilt balls into holes on a surface.

Puzzle: https://gist.github.com/dermotbalson/9561390

Video: https://www.youtube.com/watch?v=LHltjvkVtKM

These projects look amazing, and I’d really like to include them in 2.0.

I was planning to submit Codea 2.0 today or tomorrow, so including these would delay it somewhat (their descriptions would need to be written and localised into a few different languages, which could take some time).

What do you think about including them in a 2.0.x update? Maybe adding a special folder to the examples section for tutorials and splitting these tutorials out into individual projects?

@Simeon - sure, I wouldn’t want to hold up 2.0 for everyone else.

They will take some time anyway.

@Ignatz & @Dave1707 these examples are very good, great job!
For copying a sub project, maybe there could be a button ‘copy project’ in the left pane? Using the new pasteboard.copy() function?

@Jmv38 - perhaps, but I don’t want to clutter the left pane when it may be needed for the tutorial apps. Also, I would expect anyone hoping to program would know how to copy everything in a tab.

@Ignatz Here’s a mortgage calculator that uses a class with input/output text boxes and keyboard input. I’m not sure if you would want to use this or not. I even added comments so you don’t have to.


-- mortgage calculator

displayMode(FULLSCREEN)
supportedOrientations(LANDSCAPE_ANY)

function setup()
    boxTab={} -- table of input/output boxes
    -- x,y,w,h,type,text
    table.insert(boxTab,input(100,500,120,30,1,"Loan $ amount"))  
    table.insert(boxTab,input(400,500,120,30,1,"Yearly %  ( 5%=5 )"))  
    table.insert(boxTab,input(700,500,120,30,1,"Number of years")) 
    table.insert(boxTab,input(400,400,120,30,2,"Monthly payment"))  
    table.insert(boxTab,input(700,400,120,30,2,"Total payments"))  
end

function draw()
    background(34, 74, 82, 255) -- screen color
    fill(255,0,0)   -- set color to red
    pushStyle()
    fontSize(40)
    text("MORTGAGE CALCULATOR",WIDTH/2,HEIGHT-50)   -- draw text
    popStyle()
    fill(224, 149, 127, 255)    -- set color
    text("( Tap each box to input values )",WIDTH/2,HEIGHT-100)    -- draw text
    for a,b in pairs(boxTab) do -- loop thru table  
        b:draw()    -- draw each box
    end
    amt=tonumber(boxTab[1].val)     -- starting amount
    int=tonumber(boxTab[2].val/100) -- yearly interest
    year=tonumber(boxTab[3].val)    -- number of years
    -- perform interest calculation
    i=int/12    -- interest per month
    n=year*12   -- total months
    w=(1+i)^n
    m=amt*i*w/(w-1) -- calculate monthly amount
    boxTab[4].val=string.format("%.2f",m)   -- save monthly payment
    boxTab[5].val=string.format("%.2f",m*n) -- save total payments
end

function touched(t)    -- check which box is selected
    for nbr,box in pairs(boxTab) do -- loop thru table
        if box:touched(t) then  -- box touched
            return  -- dont check other boxes, exit function
        end
    end  
end

function keyboard(k)
    for nbr,box in pairs(boxTab) do -- loop thru table
        box:keyboard(k) -- get input from box
    end  
end

input=class()

function input:init(x,y,w,h,type,txt)
    self.x=x    -- x position
    self.y=y    -- y position
    self.w=w    -- width
    self.h=h    -- height
    self.type=type  -- 1=input box  2=output box
    self.txt=txt    -- text to show above box
    self.val="0"    -- data keyed in box
    self.sel=false  -- box selected true/false
end

function input:draw()
    pushStyle()
    rectMode(CORNER)
    textMode(CORNER)
    fill(0)    -- set background for box
    if self.sel then    -- set selected color for box
        fill(105, 101, 31, 255)
    end
    stroke(255, 66, 0, 255)       -- box outline color
    strokeWidth(2)    -- outline size
    rect(self.x,self.y,self.w,self.h)      -- draw box
    fill(255)         -- set text color
    text(self.txt,self.x,self.y+self.h)    -- box name
    text(self.val,self.x+4,self.y+4)       -- box text
    popStyle()
end

function input:keyboard(k)
    if self.sel then
        if k==BACKSPACE then    -- backspace key pressed
            str=str:sub(1,str:len()-1)  -- remove last digit
            if str=="" then -- blank
                str="0" -- make 0
            end
        elseif k>="0" and k<="9" or k=="." then   -- only digits 1 thru 9
            if str:sub(1,1)=="0" then   -- check if leading 0
                str=""  -- clear leading 0
            end
            str=str..k  -- update keyed value
        end
        self.val=str    -- save keyed value
    end
end

function input:touched(t)
    if t.state==BEGAN then
        if not isKeyboardShowing() then
           showKeyboard()   -- show keyboard if its not displayed
        end 
        str="0" -- clear value
        for z=1,#boxTab do    -- clear selected flag for all boxes
            boxTab[z].sel=false
        end
        -- check which box was selected
        if t.x>self.x and t.x<self.x+self.w and
                 t.y>self.y and t.y<self.y+self.h and self.type==1 then
            self.val="0"      -- reset val
            self.sel=true     -- set selected flag
            return true       -- a box was selected
        end
    end 
    return false    -- no box was selected
end

@dave1707 - I’ve commented all your mini projects and included your mortgage example as well.

https://gist.github.com/dermotbalson/9542640

I added a couple of extra items, eg state2 (to put program states in a table with names, instead of just numbers), drag2 (to draw the grid just once to an image in memory with setcontext).

I also modified the cube example (now called block because the sides are different lengths) because the rotation wasn’t correct. I can explain if you want, having suffered through months of trying to understand all that stuff.

All together, I think it’s a pretty cool project with lots of good tips, and I would have liked to have this when I first started out. >:D<

@Ignatz Thanks for all of your work. I just hope the new coders will actually use this. There are many ebooks and tutorials now, but it still seems like they ask questions without looking at anything. But then I’m sure there are some who look at everything and don’t need to ask questions, so we don’t hear from them.

Nice work guys!

A few notes:

  • Project # 5 (Faster grid) displays only a black screen (in setup you call DrawGrid(6000,6000,100) instead of DrawGrid(2000,2000,100) which not only contradicts the comment next to it, also makes the image seemingly invisible [its too large for Codea to handle I believe])

  • Project # 13 (Restart) crashes Codea if left running long enough, and it is very difficult to switch from that one because it keeps restarting the whole program

  • Project # 17 (Menu something) has an error in touched function (the w,h values are set as local in draw so they don’t exist in touched)

  • Project # 26 (Joint 3) looks weird, though that could just be me misinterpreting what it should do

  • With some many projects, the slider is difficult to control and easily select the desired one

Is there any reason these are all one project rather than seperate ones? I feel seperate ones would be easier to copy, user could delete ones they don’t want anymore while keeping the ones they like, and it would cancel out my points 2 and 5

@Ignatz Are you going to force this to run in portrait or landscape mode, full screen or partial. Some of my examples are written for full screen, portrait mode. Depending on how you want this to run, I can copy what you have and modify it to run in that mode and send it back to you. I’m not sure what the best mode is.

@Simeon - How about some projects that show off some new features, like @Mark’s location integrating with Google Maps or my music player?
Edit: Music player example is here, so you don’t have to go searching for it.

@JakAttak - thanks for the comments, I’ll fix the issues. They are all in one because the intention was to include them as tutorial projects within Codea, and to have them all separate might be overwhelming. But that depends on how Simeon lays them out.

@dave1707 - if they are full screen, how will they select a different project?

@Ignatz I’m not saying it has to be fullscreen, but some of them were written for fullscreen, portrait mode. I was asking what mode you want this to run in. I’ll take what you have and fix my bad examples to run in the mode you pick. I’ll send them back to you so you can replace the bad one.