Very happy with it overall, but there are some artifacts in one of my projects where I draw a scaled and/or rotated img of the screen back onto itself.
I added a couple of pics, the 1st 2 pics are from the phone version, where you can see these purple artifacts, even if I draw nothing, the last pic is from the ipad, how it is supposed to look.
I only get the artifacts when the screen is being rotated and/or scaled, the strength of which is determined by how you hold the device. I included the relevant bit of code below, there is another setcontext() before I draw the final img to the screen.
You can scale up or down by ‘tilting’ and rotate by ‘rolling’ the device.
You can draw something on the screen by touching, but the artifacts show up regardless.
-- Artifact Xmple
function setup()
rnd = math.random
img = image(WIDTH, HEIGHT)
noStroke()
setContext(img)
fill(55+rnd(200), 55+rnd(200), 55+rnd(200))
rect(WIDTH/2-150,HEIGHT/2-150, 300, 300)
setContext()
end
function draw()
background(0, 0, 0, 255)
-- draw scaled & rotated img onto itself
zoom = 1-(Gravity.y+.8) / 20
setContext(img)
pushMatrix()
translate(WIDTH/2, HEIGHT/2)
rotate(-Gravity.x*6)
sprite(img, 0,0, img.width*zoom, img.height*zoom)
popMatrix()
-- fade to black
fill(0,2)
rect(0,0,WIDTH, HEIGHT)
setContext()
-- draw img to screen
sprite(img, img.width/2, img.height/2)
fill(255)
text(1//DeltaTime, WIDTH/2,HEIGHT-20)
end
function touched(t)
setContext(img)
ellipse(t.x,t.y, 50)
setContext()
end
Hi all, this is still a problem I can’t seem to work around. Anybody got any suggestions? Theres a bit of example code above.
The problem occurs while drawing a scaled and rotated copy of the screen onto itself. It looks like the new pix out of screen are colored in bright purple, ruining the effect.
I tried a whole bunch ideas of getting rid of the unwanted color or altering it somehow but no succes. I seem to remember a deform function which offered option to set the conditions for pixels from outside the screen boundary, ie black ot wrap around etc.
@kirl - Couldn’t get your project to run as posted until I changed the fill() command in your code. I’ve posted my amended code - is this effect what you was trying to achieve ?
-- Artifacts
function setup()
--
img = image(WIDTH, HEIGHT)
setContext(img)
noStroke()
fill(55+math.random(200), 55+math.random(200), 55+math.random(200))
rect(WIDTH/2-150,HEIGHT/2-150, 300, 300)
setContext()
end
function draw()
--
background(0, 0, 0, 255)
-- draw scaled & rotated img onto itself
zoom = 1-(Gravity.y+.8) / 20
setContext(img)
pushMatrix()
translate(WIDTH/2, HEIGHT/2)
rotate(-Gravity.x*6)
sprite(img, 0,0, img.width*zoom, img.height*zoom)
popMatrix()
-- fade to black
fill(0,2)
rect(0,0,WIDTH, HEIGHT)
setContext()
-- draw img to screen
sprite(img, img.width/2, img.height/2)
fill(255)
text(1//DeltaTime, WIDTH/2,HEIGHT-20)
end
function touched(t)
--
setContext(img)
ellipse(t.x,t.y, 50)
setContext()
end
I suspect that there is an issue with the way that the touched function asynchronously interrupts the draw function. A work around is to explicitly create two images (reminds me of double buffering in my Amiga days)
I spoke to @John about this and we determined it’s not actually a bug, the artefacts are caused by reading-from, and writing-to the same texture. This is just not a supported behaviour in the engine. Below is a modified version of your code that buffers between two different images rather than reading and writing the same one each frame, this resolves the issue with visual glitches: