Codea next version ideas

General
1

Hi All,

Sorry I missed out on the latest upgrade, the arrival of 3D seems to have sped up the process. However there are a few things I’d like to raise for the next:

  1. Could we modify the display systems to eliminate the side window - I have an idea how to improve it. The thing I find frustrating is that the window dimensions change when the side bar is in operation. Could we have an option to run as is or with a windowed system. The advantage of the windowed system is you have a tool window which you can configure and move over the main window so your window dimensions are full size. This enables you to see the complete window by moving the tool window, and minimising it, to areas which you don’t need to monitor. Thanks to one of your wiki examples (DragMe) I have created a mockup to demonstrate it’s use. Code in two parts.
    Part 1:
-- Main
function setup()
    displayMode(FULLSCREEN)
    box = DragMe()
end

function draw()
    background(76, 178, 198, 255)
    ellipse(200,200,300,300)      
    box:draw()
end

function touched(touch)
    box:touched(touch)
end

Part 2:

-- DragMe class from the Codea example
DragMe = class()

function DragMe:init()
    self.pos = vec2(200,300)
    self.wide = 200
    self.high = 424
end

function DragMe:draw()
    pushStyle()

-- ====================================================
-- draw the menu rectangle
    strokeWidth(5)
    stroke(190, 47, 47, 255)
    fill(226, 219, 219, 255)
    rectMode(CENTER)
    rect(self.pos.x, self.pos.y, self.wide, self.high)
-- ====================================================
-- draw the main menu bar and close button
    strokeWidth(40)
    linhi = self.pos.y + 260
    linstart = self.pos.x - self.wide/2
    linend = self.pos.x + self.wide/2
    lineCapMode(SQUARE)
    line(linstart, linhi, linend, linhi)
    fill(45, 41, 57, 255)
    text("Codea Menu",linstart + 100, linhi)
    stroke(110, 51, 109, 255)
    ellipse(linstart + 20, linhi, 30, 30)
-- ====================================================
-- draw the parameter menu bar and the open/collapse button
    strokeWidth(40)
    linhi = self.pos.y + 224
    linstart = self.pos.x - self.wide/2
    linend = self.pos.x + self.wide/2
    stroke(190, 47, 47, 255)
    lineCapMode(SQUARE)
    line(linstart, linhi, linend, linhi)
    fill(45, 41, 57, 255)
    text("Parameters",linstart + 60, linhi)
    stroke(195, 206, 30, 255)
    ellipse(linstart + 170, linhi, 30, 30)
    strokeWidth(3)
    stroke(0)
    text("linhi                     376", linstart + 100, linhi -40)
    line(linstart + 24, linhi - 60, linend - 40, linhi - 60) 
    ellipse(linstart + 84, linhi - 60, 12, 12)   
-- ====================================================
-- draw the watch variable menu bar and the open/collapse button
    strokeWidth(40)
    linhi = self.pos.y + 80
    linstart = self.pos.x - self.wide/2
    linend = self.pos.x + self.wide/2
    stroke(190, 47, 47, 255)
    lineCapMode(SQUARE)
    line(linstart, linhi, linend, linhi)
    fill(45, 41, 57, 255)
    text("Watch Variables",linstart + 80, linhi)
    stroke(195, 206, 30, 255)
    ellipse(linstart + 170, linhi, 30, 30)
    text("Menu X:  "..linstart, linstart + 80, linhi - 40)
    text("Menu Y:  "..linhi, linstart + 80, linhi - 80)    
-- ====================================================  
-- draw the code tracing menu bar and the open/collapse button            
    strokeWidth(40)
    linhi = self.pos.y - 80
    linstart = self.pos.x - self.wide/2
    linend = self.pos.x + self.wide/2
    stroke(190, 47, 47, 255)
    lineCapMode(SQUARE)
    line(linstart, linhi, linend, linhi)
    fill(45, 41, 57, 255)
    text("Code Tracing",linstart + 80, linhi)
    stroke(195, 206, 30, 255)
    ellipse(linstart + 170, linhi, 30, 30)
-- ====================================================   
-- draw the code tracing button bar
-- including forward/back/skip/stop/pause buttons    
    strokeWidth(40)
    linhi = self.pos.y - 116
    linstart = self.pos.x - self.wide/2 + 4
    linend = self.pos.x + self.wide/2 - 4
    stroke(208, 172, 94, 255)
    lineCapMode(SQUARE)
    line(linstart, linhi, linend, linhi)
    for loop = 1, 4 do
        stroke(46, 35, 153, 255)
        rect(linstart + loop*40, linhi, 30, 30)
    end
-- ====================================================
-- draw the Codea control menu bar and the open/collapse button         
    strokeWidth(40)
    linhi = self.pos.y - 152
    linstart = self.pos.x - self.wide/2
    linend = self.pos.x + self.wide/2
    stroke(190, 47, 47, 255)
    lineCapMode(SQUARE)
    line(linstart, linhi, linend, linhi)
    fill(45, 41, 57, 255)
    text("Codea Controls",linstart + 80, linhi)
    stroke(195, 206, 30, 255)
    ellipse(linstart + 170, linhi, 30, 30)
-- ====================================================  
-- draw the standard Codea control buttons including
-- program end/pause/camera/video              
    strokeWidth(40)
    linhi = self.pos.y - 188
    linstart = self.pos.x - self.wide/2 + 4
    linend = self.pos.x + self.wide/2 - 4
    stroke(208, 172, 94, 255)
    lineCapMode(SQUARE)
    line(linstart, linhi, linend, linhi)  
    for loop = 1, 4 do
        stroke(46, 35, 153, 255)
        rect(linstart + loop*40, linhi, 30, 30)
    end
            
    popStyle()
end

function DragMe:hit(point)
    if point.x > (self.pos.x - self.wide/2) and
       point.x < (self.pos.x + self.wide/2) and
       point.y > (self.pos.y - self.high/2) and
       point.y < (self.pos.y + self.high/2) then
        return true
    end        
    return false
end

function DragMe:touched(touch)
    if self:hit( vec2(touch.x, touch.y) ) and
       touch.state == MOVING then
        self.pos = self.pos + vec2( touch.deltaX, touch.deltaY )
    end
end

You’ll have to imagine the function of the buttons, but I envisaged the window being configurable such that you can enable or disable the different sections (parameter window/watch window/tracing controls/general controls). That would allow you to minimise the size of the window. In addition each section could be opened/closed with the relevant yellow open/collapse buttons. Also the general configuration for old style side bar to new moveable window should be available for consistency and personal preferences.

The top bar blue button should collapse the window to a single button in one of the corners like the current button system.

The other key feature I have included, but could be added at a later date is the tracing facility so that you can run a program and stop at specific places a step on in a line/loop or function basis so that you can see iterations routines run and measure their effects.

I suggest the tool window should float on top, possibly in it’s own z layer.

This could be a major change and may need to be phased in.

Finally please excuse my poor coding, still learning good techniques, this exa,ple was quick and dirty to get it out there.

What are your thoughts?.

Bri_G

2

Hi All,

Oooops, code seems to have lost all the returns from cut and paste ex the editor. I’ll try again after passing thru Textastic.

Bri_G

3

Just read through your suggestions. They sound like good ideas — especially the ability to trace through your code.

The first one could be implemented through a different display mode, such as displayMode(FLOATING_SIDEBAR). If it’s good enough it could become the new default behaviour.

The second one will require us to hook into Lua, it’s something we will do at some point, but there are a few updates to come before we get to that point.

4

I’ve deleted the Textastic version. (NB “deleted” posts aren’t really deleted, just hidden from view, so no-one has to worry about some nasty moderator really deleting their stuff.)

5

Next idea,

Failing the involved option above, could we make the buttons shown in (FULLSCREEN) mode in a contrasting colour or in a contrasting outline to highlight them. They are sometimes difficult to see.

Bri_G

6

Another idea,

You may already have these facilities in Lua, as I haven’t looked into matrices/vectors and physics yet, but would it be possible to modify the rectangle command such that you can tilt it at an angle. I’d like to rotate a rectangle and the rotate() command doesn’t seem to localise its effect to a single object. It doesn’t appear to rotate a small drawn circle as expected. A simple angle option like rect(x, y, w, h, rad) would be easy to implement on the specified rectangle.

On the available shapes we only seem to have ellipse/circle and rectangle available. I always understood that triangles were the most effective drawing tool enabling far more complex shapes. Is there any option for this or plans?

Bri_G

7

Yet another idea,

I’ve managed to generate a colour graduated background by drawing lines off different colours to build up the effects. For a long time the vector drawing packages have graduated colour shading routines built in so the principle is well understood and optimised (very fast implementations).

Is there any plans to introduce this in an improved fill() command?

Bri_G

8

@Bri_G

rotating your stuff: that is very easy: you do sth like this:

pushMatrix()
translate(x,y)
rotate(angle)
rect(-50,-50,100,100)
popMatrix()

(untested, I don’t have my iPad with me). You may need to set the rectMode, here it is assumed to be CENTER, but basically this does what you want.

For graduated backgrounds you may want to look into meshes, you can use those for this, and it is very fast.

9

Hi Gunnar,

Thanks for the reply, I thought the facilities were built in but hadn’t delved into Matrices and missed the need to push an’ pop. I’ll have a play - hopefully post code in the future using it. Much more to learn from Lua than I initially thought. Still I like the challenge.

Just been reading the StarMesh thread so I can see possibilities there for the shading.

Thanks again.

Bri_G

10

I fixed your code formatting, remember you can fence your code in-between 3 tilde characters, i.e. ~~~ to format it as code. Or you can use the `

` html tags.

11

Hi Simeon,

Thanks for that - any chance you can remove my abortive attempt via Textastic?

Bri_G

12

Hi,
I think we should do some other things first though… For instance, custom sprite packs. I had actually suggested the floating window idea before, only to be rejected majorly, but I still like the idea.