#### Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

# Just Fiddling

edited February 1 in General Posts: 1,607

Hi All - just posting a little routine I built whilst exploring a way of building up an image like painting. This is a simple project to test an approach. The idea is you sprite an image to the centre of the screen, cover it with a full screen white image (paper) and then use finger/touch pen to gradually reveal the image. The image effect is better in black and white. Thought this may amuse the grand kids as you gradually reveal the image below. Not using masks just making pixels transparent with image:set(). Plenty of scope to improve - library of images, brush size response on touch etc.

``````-- Scribble3 by Bri_G

function setup()
--
cx,cy = WIDTH/2, HEIGHT/2
parameter.integer("size",2,6,4)
parameter.boolean("reveal",false)
paper = image(WIDTH,HEIGHT)
parameter.integer("model",1,#piccies,1,
function()
prepare(pic)
end)
end

function draw()
-- show the image as it emerges
background(255, 255, 255, 255)
spriteMode(CENTER)
sprite(pic,cx,cy)
if not reveal then
sprite(paper,cx,cy)
end
end

function touched(t)
-- use the brush
if t.state == BEGAN or t.state == MOVING then
setContext(paper)
tx,ty = math.floor(t.x),math.floor(t.y)
for x = -size-1,size+1,1 do
for y = -size-1,size+1,1 do
paper:set(tx+x,ty+y,0,0,0,0)
end
end
setContext()
end
end

function prepare(p)
--
bw, bh = spriteSize(p)
setContext(paper)
fill(255, 255, 255, 255)
rectMode(CENTER)
rect(cx,cy,WIDTH,HEIGHT)
setContext()
end

piccies = {
"Documents:pic01",
"Documents:pic02",
"Documents:pic03",
"Documents:pic04"
}

``````

Let me know if you think of any improvements, will be adding my own and will post.

Image produced from B&W old man image - partially revealed attached.

p.s. the image in the attached picture is not fully developed as the idea is to give an impression of a painted image being built up. Just slowly revealing the complete image would be a little boring. You could use a large image with overlaid grid and small images underneath as a find the treasure game.

Tagged:

• Mod
Posts: 8,199

@Bri_G Interesting program. That would keep the grandkids busy. I increased the size from -2,2 to -4,4. You could add a slider to adjust the size.

• edited January 28 Posts: 1,607

@dave1707 - take your point, first trial with grand daughter - very interested but a little slow so could lose interest. So added the size parameter on the brush and much faster - although I think it loses a little on artistic content as you can quickly end up with a photo. Pursuing other refinements at moment.

Added example at brush size 4.

• Posts: 1,607

Hi All - just added the ability to load images (as pic1, pi2 etc) blanking with each new image use your own images. Coloured images will also work but maybe not as dramatic as B&W. Updated code at beginning of post.

• Posts: 497

nice!

• Posts: 752
Very nice! Line bw, bh = spriteSize(p) throws an error but works if you delete it
• Posts: 1,607

@West - thanks for the feedback, will check out and correct.
@dave1707 - just looking into blendMode() as another way of doing this and found a number of yours, and other members posts relating to this - wow, this forum is great - all you need to do is search!!!!

Working on a better version.

@Simeon - on the above point I loaded some old code from Jmv38 which when run bombs straight out of Codea. It is in a gist, in link below if you get time to check it. Probably due to significant changes in Codea (it’s quite old code).

Jmv38 code

• Mod
edited February 1 Posts: 8,199

@Bri_G @Simeon I tried the JMV38 code and it does crash immediately. I found that if you make the below changes, it works. I don’t know why it crashes, like Bri-G said, probably Codea changes.

In setup() add the 2 lines I show below, `colorGrid` and `back` before the `buttons` comment. Then find them around lines 312 and 246 and comment them out. They run before the setup() function does and that causes Codea to crash. Apparently they used to work in the older version.

Simeon, Can you comment on this. I’m curious what changed. Is this a problem for any code that runs before setup().

PS. It’s the `line` call in smallColorPattern that’s causing the crash. Apparently you can’t do a line command anymore before setup() runs.

``````    SRC_background = color(0,0)
SRC_foreground = color(35, 0, 255, 255)

colorGrid = smallColorPattern()
back = grid()

-- buttons
controlPanel()
``````
• Posts: 1,607

@dave1707 - thanks, that was a quick find. I tried putting those lines before setup() and they incurred an error. Looks like it is not parsed if added between functions - or maybe it needs to be separated by blank lines if embedded in the code.

• Posts: 1,607

@West - replaced my code with a working copy but I can’t find an error. Can you check this update is OK. Thanks.

• Mod
Posts: 8,199

@Bri_G @West The line bw , bh = spriteSize(p) is an error if you don’t create valid pictures in the piccies table at the end of the code.

• Posts: 752
@Bri_G @dave1707 Right enough! Works fine now
• edited February 2 Posts: 1,607

Hi All, the example above and the following one were inspired by a sketch in Processing by Sen (not sure of his/her full name) called ‘Messy Curve Draw’. The precedent is much better as it used curve lines which I am struggling to construct in Codea(don’t hold your breath).

Here is my second derivative from the idea - sub-titled ‘what can you get from a straight line’ - hope you like it.

p.s. - need to supply your own pics.

``````-- OneLiner by Bri_G

function setup()
--
cp = math.random(5)
if cp == 0 then cp = 1 end
if cp > #piccies then cp = #piccies end
sw,sh = WIDTH,HEIGHT
cx,ch = WIDTH/2,HEIGHT/2
paper = image(WIDTH,HEIGHT)
setContext(paper)
fill(255, 255, 255, 255)
rectMode(CENTER)
rect(cx,ch,WIDTH,HEIGHT)
setContext()
s = 0
x,y = 0,200
m = 0
end

function draw()
-- This sets a dark background color
background(40, 40, 50)
sprite(pic,cx,ch)
sprite(paper,cx,ch)
setContext(paper)
stroke(0,0,0,0)
strokeWidth(1)
fill(0, 0, 0, 0)
blendMode(ONE_MINUS_DST_COLOR,ZERO)
line(math.random()*sw,math.random()*sh,math.random()*sw,math.random()*sh)
blendMode(NORMAL)
setContext()
s = s+1
if s >760 then s = 0
y = math.random(1000)
end
end

function touched(t)
--
if t.state == ENDED then
cp = math.random(5)
if cp == 0 then cp = 1 end
if cp > #piccies then cp = #piccies end
setContext(paper)
fill(255, 255, 255, 255)
rectMode(CENTER)
rect(cx,ch,WIDTH,HEIGHT)
setContext()
end
end

piccies = {
"Documents:pic01",
"Documents:pic02",
"Documents:pic03",
"Documents:pic04"
}

``````

Note - attached image from my pad.

Processing Inspiration

• Mod
Posts: 8,199

``````displayMode(FULLSCREEN)

function setup()
fill(255)
strokeWidth(2)
backingMode(RETAINED)
end

function draw()
bezier(.01)
for z=2,#tab do
line(tab[z-1].x,tab[z-1].y,tab[z].x,tab[z].y)
end
end

function bezier(val)
x,y={},{}
for z=1,4 do
table.insert(x,math.random(WIDTH))
table.insert(y,math.random(HEIGHT))
end
tab={}
for t=0,1,val do
px=(1-t)^3*x[1]+3*t*(1-t)^2*x[2]+3*t^2*(1-t)*x[3]+t^3*x[4]
py=(1-t)^3*y[1]+3*t*(1-t)^2*y[2]+3*t^2*(1-t)*y[3]+t^3*y[4]
table.insert(tab,vec2(px,py))
end
table.insert(tab,vec2(x[4],y[4]))
end
``````
• Posts: 1,607

@dave1707 - thanks for that input, you must have a massive library of routines or a photographic memory of billions of lines of code. Added the routine and posting below for anyone interested.

These curves are great - the precedent uses an earlier form of curve which appears a little more random and can produce blotchy images. When you run the project it just keeps drawing lines so eventually you just reveal the hidden image. I am thinking of putting a limiter on it so that the image is never completed and appears more artistic. In some ways I prefer the first project because you paint where you want to and can stop at any time.

• Posts: 1,607

All,

Updated with Bezier code, from @dave1707 above, gives a much better feel to the image buildup.

``````OneLiner2 by Bri_G
-- thanks to @dave1707 for the Bezier routine - neat

displayMode(FULLSCREEN)
function setup()
--
cp = math.random(5)
if cp == 0 then cp = 1 end
if cp > #piccies then cp = #piccies end
sw,sh = WIDTH,HEIGHT
cx,ch = WIDTH/2,HEIGHT/2
paper = image(WIDTH,HEIGHT)
setContext(paper)
fill(255, 255, 255, 255)
rectMode(CENTER)
rect(cx,ch,WIDTH,HEIGHT)
setContext()
s = 0
x,y = 0,200
m = 0
end

function draw()
-- This sets a dark background color
background(40, 40, 50)
bezier(.01)
sprite(pic,cx,ch)
sprite(paper,cx,ch)
setContext(paper)
stroke(0,0,0,0)
strokeWidth(1)
fill(0, 0, 0, 0)
blendMode(ONE_MINUS_DST_COLOR,ZERO)
for z=2,#tab do
line(tab[z-1].x,tab[z-1].y,tab[z].x,tab[z].y)
end
blendMode(NORMAL)
setContext()
s = s+1
if s >760 then s = 0
y = math.random(1000)
end
end

function touched(t)
--
if t.state == ENDED then
cp = math.random(5)
if cp == 0 then cp = 1 end
if cp > #piccies then cp = #piccies end
setContext(paper)
fill(255, 255, 255, 255)
rectMode(CENTER)
rect(cx,ch,WIDTH,HEIGHT)
setContext()
end
end

function bezier(val)
x,y={},{}
for z=1,4 do
table.insert(x,math.random(WIDTH))
table.insert(y,math.random(HEIGHT))
end
tab={}
for t=0,1,val do
px=(1-t)^3*x[1]+3*t*(1-t)^2*x[2]+3*t^2*(1-t)*x[3]+t^3*x[4]
py=(1-t)^3*y[1]+3*t*(1-t)^2*y[2]+3*t^2*(1-t)*y[3]+t^3*y[4]
table.insert(tab,vec2(px,py))
end
table.insert(tab,vec2(x[4],y[4]))
end

piccies = {
"Documents:pic01",
"Documents:pic02",
"Documents:pic03",
"Documents:pic04"
}

``````
• Mod
Posts: 8,199

@Bri_G I have about 600 projects, so if anyone has a question, I usually have a project I can strip down for an example. I usually write more projects when I think of something different to try.