xxxxxxxxxx
61
// Thanks to Toby Schachman @mandy3284
// http://tobyschachman.com/Shadershop/
function fract(x) { return x - floor(x) }
function rand(x) { return fract(sin(x) * 999) }
function randStep(x) { return rand(floor(x)) }
function smoothstep(x) { return x ** 2 *(1 - 2 * (x - 1)) }
function smoothsaw(x) { return smoothstep(fract(x)) }
function noize(x) { return randStep(x) * smoothsaw(x) + randStep(x - 1) * (1 - smoothsaw(x-1)) }
let mode = 0
const Ys = new Array(600).fill(0)
function setup() {
createCanvas(600, 400)
textAlign(CENTER, CENTER)
textSize(20)
}
function draw() {
background(255)
translate(width / 2, height / 2)
stroke(220)
line(-width, 0, width, 0)
line(0, height, 0, -height)
stroke(200, 200, 250)
noFill()
beginShape()
for(let i = 0; i < 600; i++) {
let x = map(i, 0, 600, -width/2,width/2)
let xx = map(x, -width/2, width/2, -3, 3)
Ys[i] = lerp(Ys[i], (
mode === 0 ? 0 :
mode === 1 ? fract(xx) :
mode === 2 ? rand(xx) :
mode === 3 ? randStep(xx) :
mode === 4 ? smoothstep(xx) :
mode === 5 ? smoothsaw(xx) :
noize(xx)),
0.1)
let y = map(Ys[i], -3, 3, width/2, -width/2)
vertex(x, y)
}
endShape()
fill(60)
noStroke()
text((
mode === 0 ? "" :
mode === 1 ? "fract(x) = x - floor(x)" :
mode === 2 ? "rand(x) = fract(sin(x) * 999)" :
mode === 3 ? "randStep(x) = rand(floor(x))" :
mode === 4 ? "smoothstep(x) = x ** 2 *(1 - 2 * (x - 1))" :
mode === 5 ? "smoothsaw(x) = \nsmoothstep(fract(x))" :
"noize(x) = \nrandStep(x) * smoothsaw(x) + \nrandStep(x - 1) * (1 - smoothsaw(x-1))"
), 0, 100)
if(frameCount % 200 === 0) mode = ++ mode % 7
}