Side Scroller

My Request
Now this is probably my most extreme request yet but
####i would like someone to…

  • Create a basic sidecroller
    • basic as in hold the left side of the screen and scroll the example circle for 3 pages
  • if that makes no sense then just explain how a basic side scroller works or if creating one is even possible in codea (easily)

youre probbably sick of me by now but thanks in advance

@Dalorbi

I haven’t the slightest idea what you’re asking. To me it sounds like you want to move something (a circle) beyond the edge of the screen (3 pages) by sliding your finger. If that’s what you want then here is a program that will scroll a circle and grid by dragging your finger on the screen. If this isn’t what you’re after, can you be more specific.


function setup()
    displayMode(FULLSCREEN)
    dx=WIDTH/2
    dy=HEIGHT/2
end

function draw()
    background(40, 40, 50)
    translate(dx,dy) 
    fill(255) 
    ellipse(0,0,100,100)
    stroke(255)
    strokeWidth(4) 
    fontSize(30)

    for x=-3000,3000,100 do
        line(x,-3000,x,3000)
        fill(255)
        text(x,x,0)
    end
    for y=-3000,3000,100 do
        line(-3000,y,3000,y)
        text(y,0,y)
    end      
end

function touched(t)
    if t.state==BEGAN then
        x1=t.x
        y1=t.y
    elseif t.state==MOVING then
        dx=dx+t.x-x1
        dy=dy+t.y-y1
        x1=t.x
        y1=t.y
    end
end

wow thats almost exactly it, infact if the circle moved to the left along the x axis whilst the user touched the left side of the screen and the background was a bit more stable it’d be perfect
are you bothered enough to explain your code a bit more if not ill mess around with it regardless thanks

is there anyway to stop the screen from moving so much?

While I do not support the request to ask for code without explaining why, @dalorbi, I do have to comment to folks in general that code comments do help people learn better than code without.

It’s pretty simple code…if you know what translate() does or why we have magic words like MOVING and BEGAN.

@Dalorbi

Can you explain more of what you want. Do you want the circle to move left or right along the x axis and will there be something coming from the top of the screen that you have to avoid.

@aciolino

What I always told my boss was, " The code IS the comments/documentation, it’s always current and correct ". I don’t think there’s anything in the above code that needs comments. Everything is simple commands that can be read about in the reference manual. I usually add comments when I do something that isn’t straight forward and I won’t remember why I wrote it that way if I look at it a week later. Besides, you don’t learn how to program by reading comments, you learn by breaking down the code line by line to figure out what’s going on for yourself. I always prefer to have example code, even without comments, than someone else trying to explain how to do something. And yes, writing an example is a lot easier when there is enough information given so that you don’t have to guess at what the person wants. But then, why should this be any different than when I was writing code at work. It was always, that’s what I asked for, but that’s not what I want. Even if I don’t know exactly what they want, I still enjoy writing the examples.

sorry i’m not very descriptive i shall try to be as descriptive as possible:
i would like a circle to move on the x to the right, and when it goes past the width limit , the scrren scrolls to the right to show where the circle (which has gone past the 1024 limit for width) is visible

another possibility however is for me just to look at the code you’ve given me already so that i could learn things by practice, which is what i’ll be doing now anyway.

and @aciolino i wanted to create a sidescroller but i’m not sure how to create that moving background effect.

@ Dalorbi

Try this one. Use your left finger or thumb along the left side of the screen to move the circle left or right on the grid. Use your right finger or thumb along the right side of the screen to move the grid and circle left or right on the screen. Or do both left and right at the same time to move both the circle and grid at the same time.


function setup()
    displayMode(FULLSCREEN)
    gdx=WIDTH/2    -- grid position
    gdy=HEIGHT/2
    dx=0           -- circle position
    dy=HEIGHT/2
end

function draw()
    background(40, 40, 50)
    translate(gdx,400)    -- move grid and circle
    fill(255) 
    ellipse(dx,100,100,100)    -- move just the circle
    stroke(255)
    strokeWidth(4) 
    fontSize(30)
    for x=-3000,3000,100 do
        line(x,-3000,x,3000)
        text(x,x,0)
    end
    for y=-3000,3000,100 do
        line(-3000,y,3000,y)
        text(y,0,y)
    end      
end

function touched(t)
    -- left scrolling area
    if t.x<WIDTH/2-100 then
        if t.state==BEGAN then
            y1=t.y
        elseif t.state==MOVING then
            dx=dx+t.y-y1
            y1=t.y
        end
    end
    -- right scrolling area
    if t.x>WIDTH/2+100 then
        if t.state==BEGAN then
            gy1=t.y
        elseif t.state==MOVING then
            gdx=gdx+t.y-gy1
            gy1=t.y
        end
    end
end

thanks

@Dalorbi

Here is a version that does the grid scrolling automatically. The screen swipe on the right side was removed, so a swipe up or down anywhere on the screen moves the circle right or left.

edit-changed the code to work smoother


function setup()
    displayMode(FULLSCREEN)
    gdx=WIDTH/2    -- grid position
    dx=0           -- circle position
end

function draw()
    background(40, 40, 50)
    -- scroll the grid when the circle reaches the edge
    if dx>WIDTH-50-gdx then
        gdx=WIDTH-50-dx
    elseif dx<gdx*-1+50 then
        gdx=50-dx
    end              
    translate(gdx,400)    -- move grid and circle
    fill(255) 
    ellipse(dx,100,100,100)    -- move just the circle
    stroke(255)
    strokeWidth(4) 
    fontSize(30)
    for x=-3000,3000,100 do
        line(x,-3000,x,3000)
        text(x,x,0)
    end
    for y=-3000,3000,100 do
        line(-3000,y,3000,y)
        text(y,0,y)
    end      
end

function touched(t)
    if t.state==BEGAN then
        y1=t.y
    elseif t.state==MOVING then
        dx=dx+t.y-y1
        y1=t.y
    end
end

Using a large image instead of the colours for the background results in a black background for me, or is there no way to use an image as the background?
Would i just load an image and set it as the background or, load an image setContext and have all subsequent drawing on top of that (if that makes sense)

As a side note-- @Dalorbi, don’t stop asking questions!! I find that you and I have a lot of the same questions! It’s nice to see that I’m not alone in learning.