👾👨👩👦👦👨🏻🌾🌱🏹🀄️🍷☕️
Published
Edited
Jun 17, 2018
28 stars
canvas(([ x, y ]) => [x, y, 0.5, 1])
circle1 = p =>
distance(p, [0.5, 0.5]) < radius
? [ p[0], p[1], 0.5, 1 ] // inside the circle! we will continue using the 2D gradient.
: [ 0.9, 0.9, 0.9, 1 ] // outside the circle!
canvas(circle1)
canvas(p => {
p = p.map(x => repeat * x % 1);
return circle1(p);
})
squircle = ([x, y], [a, b], n, r) =>
Math.pow(Math.abs(x - a), n)
+ Math.pow(Math.abs(y - b), n)
> Math.pow(Math.abs(r), n) ? 1 : 0
// To change a bit, let's actually color the outside, not the inside!
canvas(p =>
squircle(p, [0.5, 0.5], n, 0.4) ? [ p[0], p[1], 0.5, 1 ] : [ 0, 0, 0, 0 ]
)
// This make code more concise and readable as soon as you are familiar with them.
canvas(p =>
mix(
mix(
[ 0, 0, 0, 1 ],
[ 1, 1, 1, 1 ],
squircle(p, [0.5, 0.5], n, 0.3)
),
[ p[0], p[1], 0.6, 1 ],
squircle(p, [0.5, 0.5], n, 0.4)
)
)
canvas(p =>
texture2D(catTexture, p)
)
canvas(p => // Feel free to edit this code to experiment stuff!
texture2D(catTexture, [
p[0] + Math.pow(1 - p[1], 4) * 0.05 * Math.sin(100 * p[1]),
p[1] * p[1]
])
)
canvas(p => {
let color = texture2D(catTexture, [
p[0] + Math.pow(1 - p[1], 4) * 0.05 * Math.sin(100 * p[1]),
p[1] * p[1]
]);
color = mix(
mix(color, [0,0,0,1], 0.3 * smoothstep(0.6, 0.2, p[1])),
[ 1, 0.8 + 0.2 * Math.cos(200*p[0]), 1 - smoothstep(0.1, 0.5, p[1]), 1 ],
smoothstep(0.58, 0.52, p[1]) * // higher part of the image
smoothstep(0.2, 0.5, color[0] - color[1] - color[2])) // smoothly select the red
return color;
})
catTexture = imageAsTexture("https://i.imgur.com/5EOyTDQ.jpg")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
