Please continue kids tutorial

Questions
1

I want you to keep up the kids tutorials, I’ve been waiting on a class tutorial for a while now, so could you continue, or does anybody have a link to an easy to understand class tutorial? (I’m 17 and am really interested in coding) :slight_smile:

2

hey @pewbert i’ve found its easier to learn by experience, heres some code you can learn from, its littered with comments. Let me know if anything is unclear, i typed this during school

###main

-- Class Tut

function setup()
    newcircle = Circle(10,50,100)
    creates a new Circle called newcircle
end

function draw()
    background(40, 40, 50)
    strokeWidth(5)
    newcircle:draw()
    -- draws the Circle called newcircle
end

###Circle class

Circle = class() -- Creates the class circle

-- function tells the computer that you're about to
-- define a function, in this case the function which
-- is called init, is a function defined for a Circle
-- You know that its defined for a circle because Circle
-- is written before the colon
-- You know that the function is called init because
-- init is typed after the colon

function Circle:init(x, y, r) 
    
    -- init gets called when you make a circle
    -- e.g. newcircle = Circle(10, 50, 100)
    -- This creates a new circle with the x, y and r parameters specified
    
    self.x = x
    self.y = y
    self.r = r
    
    -- One reason you have to give the x value to the variable self.x
    -- is so that you can reach it in other functions

end

function Circle:draw()
    
    -- draw must be called manually
    -- e.g. newcircle:draw()
    
    ellipse(self.x, self.y, self.r)
    
    -- As you can see we are calling the x variable that was given in init
    -- because the magic variable self.x teleported it over here
    
end
3

.@pewbert - There is a tutorial on classes here: http://codeatuts.blogspot.com.au/2012/08/interlude-11-classes-in-lua-and-codea.html

4

Here’s a simple button class.


supportedOrientations(PORTRAIT_ANY)
    
function setup()
    buttonState=""
    btab={}    -- button table
    -- insert buttons in table
    table.insert(btab,button(200,400,100,50,color(0,255,0),"button 1",color(255,0,0),b1func))
    table.insert(btab,button(200,600,100,50,color(0,255,255),"button 2",color(255,0,0),b2func))
    table.insert(btab,button(200,800,100,50,color(0,0,255),"button 3",color(255,0,0),b3func))
end

function draw()    -- draw button in the table
    background(40,40,50)
    for b in pairs(btab) do
        btab[b]:draw()
    end
    fill(255)
    text(buttonState,200,900)
end

function touched(t)    -- check buttons in the table for being touched
    for b in pairs(btab) do
        btab[b]:touched(t)
    end
end

function b1func()    -- call this function if button 1 is touched
    buttonState="button 1 touched"
    btab[1]:change()
end

function b2func()    -- call this function if button 2 is touched
    buttonState="button 2 touched"
    btab[2]:change()
end

function b3func()    -- call this function if button 3 is touched
    buttonState="button 3 touched"
    btab[3]:change()
end


button=class()    

function button:init(x,y,w,h,bColor,bText,tColor,func)
    self.x=x     -- x position
    self.y=y     -- y position
    self.w=w     -- width
    self.h=h     -- height
    self.buttonText=bText
    self.textColor=tColor
    self.l=self.x-self.w/2    -- left side of button
    self.r=self.x+self.w+self.w/2    -- right side of button
    self.t=self.y+self.h/2    -- top of button
    self.b=self.y-self.h/2    -- bottom of button
    self.func=func     -- function to call
    self.changed=true
    self.originalColor=bColor
    self.changedColor=color(255,255,255)
    self.buttonColor=bColor
end

function button:change()    -- change button color when touched
    if self.changed then
        self.buttonColor=self.changedColor
    else
        self.buttonColor=self.originalColor
    end
    self.changed=not self.changed     -- toggle changed true/false
end

function button:draw()    -- draw the button with color and text
    rectMode(CENTER)
    fill(self.buttonColor)
    rect(self.x,self.y,self.w,self.h)
    fill(self.textColor)
    text(self.buttonText,self.x,self.y)
end

function button:touched(t)    -- check which button is touched
    if t.state==BEGAN then
        if t.x>self.l and t.x<self.r and t.y>self.b and t.y<self.t then
            self.func()
        end
    end
end
5

Wow thank you all so much very easy to understand now thanks!

6

And dalorbi that’s perfectly clear :slight_smile: