more examples
This commit is contained in:
352
examples/test_shape2d.ce
Normal file
352
examples/test_shape2d.ce
Normal file
@@ -0,0 +1,352 @@
|
||||
log.console("test_shape2d starting")
|
||||
|
||||
var time = use('time')
|
||||
|
||||
var core = use('core')
|
||||
var shape2d = use('shape2d')
|
||||
var compositor = use('compositor')
|
||||
var film2d = use('film2d')
|
||||
var math = use('math/radians')
|
||||
|
||||
var shapes = []
|
||||
var t = 0
|
||||
|
||||
var camera = {
|
||||
pos: {x: 400, y: 300},
|
||||
width: 800,
|
||||
height: 600,
|
||||
anchor: {x: 0.5, y: 0.5}
|
||||
}
|
||||
|
||||
var compositor_config = {
|
||||
clear: {r: 0.1, g: 0.1, b: 0.15, a: 1},
|
||||
planes: [
|
||||
{
|
||||
name: 'main',
|
||||
plane: 'main',
|
||||
camera: camera,
|
||||
resolution: {width: 800, height: 600},
|
||||
presentation: 'stretch',
|
||||
clear: {r: 0.1, g: 0.1, b: 0.15, a: 1}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function init() {
|
||||
// Row 1: Basic shapes - rect, circle, ellipse, pill
|
||||
|
||||
// Rectangle with rounded corners
|
||||
shapes[] = shape2d.rect({
|
||||
plane: 'main',
|
||||
layer: 0,
|
||||
pos: {x: 100, y: 500},
|
||||
width: 120,
|
||||
height: 80,
|
||||
radius: 10,
|
||||
fill: {r: 0.2, g: 0.6, b: 0.9, a: 1}
|
||||
})
|
||||
|
||||
// Circle
|
||||
shapes[] = shape2d.circle({
|
||||
plane: 'main',
|
||||
layer: 0,
|
||||
pos: {x: 250, y: 500},
|
||||
radius: 50,
|
||||
fill: {r: 0.9, g: 0.3, b: 0.3, a: 1}
|
||||
})
|
||||
|
||||
// Ellipse
|
||||
shapes[] = shape2d.ellipse({
|
||||
plane: 'main',
|
||||
layer: 0,
|
||||
pos: {x: 400, y: 500},
|
||||
width: 140,
|
||||
height: 80,
|
||||
fill: {r: 0.3, g: 0.9, b: 0.4, a: 1}
|
||||
})
|
||||
|
||||
// Pill (stadium)
|
||||
shapes[] = shape2d.pill({
|
||||
plane: 'main',
|
||||
layer: 0,
|
||||
pos: {x: 550, y: 500},
|
||||
width: 140,
|
||||
height: 60,
|
||||
fill: {r: 0.9, g: 0.7, b: 0.2, a: 1}
|
||||
})
|
||||
|
||||
// Row 2: Stroke variations
|
||||
|
||||
// Rect with stroke only
|
||||
shapes[] = shape2d.rect({
|
||||
plane: 'main',
|
||||
layer: 0,
|
||||
pos: {x: 100, y: 380},
|
||||
width: 100,
|
||||
height: 80,
|
||||
radius: 5,
|
||||
fill: {r: 0, g: 0, b: 0, a: 0},
|
||||
stroke: {r: 1, g: 1, b: 1, a: 1},
|
||||
stroke_thickness: 3,
|
||||
stroke_align: 'center',
|
||||
dash_len: 14,
|
||||
gap_len: 6
|
||||
})
|
||||
|
||||
// Circle with thick stroke
|
||||
shapes[] = shape2d.circle({
|
||||
plane: 'main',
|
||||
layer: 0,
|
||||
pos: {x: 250, y: 380},
|
||||
radius: 45,
|
||||
fill: {r: 0.2, g: 0.2, b: 0.3, a: 1},
|
||||
stroke: {r: 0.5, g: 0.8, b: 1, a: 1},
|
||||
stroke_thickness: 6,
|
||||
stroke_align: 'outside',
|
||||
dash_len: 14,
|
||||
gap_len: 6
|
||||
})
|
||||
|
||||
// Ellipse with inside stroke
|
||||
shapes[] = shape2d.ellipse({
|
||||
plane: 'main',
|
||||
layer: 0,
|
||||
pos: {x: 400, y: 380},
|
||||
width: 120,
|
||||
height: 70,
|
||||
fill: {r: 0.4, g: 0.2, b: 0.5, a: 1},
|
||||
stroke: {r: 1, g: 0.5, b: 0.8, a: 1},
|
||||
stroke_thickness: 4,
|
||||
stroke_align: 'inside',
|
||||
dash_len: 14,
|
||||
gap_len: 6
|
||||
})
|
||||
|
||||
// Pill with dashed stroke
|
||||
shapes[] = shape2d.pill({
|
||||
plane: 'main',
|
||||
layer: 0,
|
||||
pos: {x: 550, y: 380},
|
||||
width: 130,
|
||||
height: 50,
|
||||
fill: {r: 0.1, g: 0.3, b: 0.2, a: 1},
|
||||
stroke: {r: 0.3, g: 1, b: 0.5, a: 1},
|
||||
stroke_thickness: 3,
|
||||
dash_len: 15,
|
||||
gap_len: 8
|
||||
})
|
||||
|
||||
// Row 3: Feather / soft edges
|
||||
|
||||
// Soft rect
|
||||
shapes[] = shape2d.rect({
|
||||
plane: 'main',
|
||||
layer: 0,
|
||||
pos: {x: 100, y: 260},
|
||||
width: 100,
|
||||
height: 80,
|
||||
radius: 20,
|
||||
fill: {r: 0.8, g: 0.4, b: 0.1, a: 1},
|
||||
feather: 10
|
||||
})
|
||||
|
||||
// Soft circle (glow effect)
|
||||
shapes[] = shape2d.circle({
|
||||
plane: 'main',
|
||||
layer: 0,
|
||||
pos: {x: 250, y: 260},
|
||||
radius: 40,
|
||||
fill: {r: 1, g: 0.9, b: 0.3, a: 1},
|
||||
feather: 20
|
||||
})
|
||||
|
||||
// Soft ellipse
|
||||
shapes[] = shape2d.ellipse({
|
||||
plane: 'main',
|
||||
layer: 0,
|
||||
pos: {x: 400, y: 260},
|
||||
width: 120,
|
||||
height: 60,
|
||||
fill: {r: 0.3, g: 0.5, b: 1, a: 0.8},
|
||||
feather: 15
|
||||
})
|
||||
|
||||
// Sharp vs soft comparison
|
||||
shapes[] = shape2d.pill({
|
||||
plane: 'main',
|
||||
layer: 0,
|
||||
pos: {x: 550, y: 260},
|
||||
width: 120,
|
||||
height: 50,
|
||||
fill: {r: 1, g: 0.2, b: 0.6, a: 1},
|
||||
feather: 5
|
||||
})
|
||||
|
||||
// Row 4: Opacity and blending
|
||||
|
||||
// Semi-transparent overlapping shapes
|
||||
shapes[] = shape2d.rect({
|
||||
plane: 'main',
|
||||
layer: 0,
|
||||
pos: {x: 80, y: 130},
|
||||
width: 100,
|
||||
height: 80,
|
||||
fill: {r: 1, g: 0, b: 0, a: 0.6},
|
||||
opacity: 1
|
||||
})
|
||||
|
||||
shapes[] = shape2d.rect({
|
||||
plane: 'main',
|
||||
layer: 1,
|
||||
pos: {x: 120, y: 130},
|
||||
width: 100,
|
||||
height: 80,
|
||||
fill: {r: 0, g: 1, b: 0, a: 0.6},
|
||||
opacity: 1
|
||||
})
|
||||
|
||||
shapes[] = shape2d.rect({
|
||||
plane: 'main',
|
||||
layer: 2,
|
||||
pos: {x: 100, y: 150},
|
||||
width: 100,
|
||||
height: 80,
|
||||
fill: {r: 0, g: 0, b: 1, a: 0.6},
|
||||
opacity: 1
|
||||
})
|
||||
|
||||
// Animated opacity circle
|
||||
shapes[] = shape2d.circle({
|
||||
plane: 'main',
|
||||
layer: 0,
|
||||
pos: {x: 280, y: 130},
|
||||
radius: 50,
|
||||
fill: {r: 1, g: 1, b: 1, a: 1},
|
||||
opacity: 1
|
||||
})
|
||||
|
||||
// Different corner radii
|
||||
shapes[] = shape2d.rect({
|
||||
plane: 'main',
|
||||
layer: 0,
|
||||
pos: {x: 420, y: 130},
|
||||
width: 100,
|
||||
height: 80,
|
||||
radius: 0,
|
||||
fill: {r: 0.5, g: 0.5, b: 0.5, a: 1}
|
||||
})
|
||||
|
||||
shapes[] = shape2d.rect({
|
||||
plane: 'main',
|
||||
layer: 0,
|
||||
pos: {x: 540, y: 130},
|
||||
width: 100,
|
||||
height: 80,
|
||||
radius: 20,
|
||||
fill: {r: 0.6, g: 0.6, b: 0.6, a: 1}
|
||||
})
|
||||
|
||||
shapes[] = shape2d.rect({
|
||||
plane: 'main',
|
||||
layer: 0,
|
||||
pos: {x: 660, y: 130},
|
||||
width: 100,
|
||||
height: 80,
|
||||
radius: 40,
|
||||
fill: {r: 0.7, g: 0.7, b: 0.7, a: 1}
|
||||
})
|
||||
|
||||
// Row 5: Large decorative shapes
|
||||
|
||||
// Background panel
|
||||
shapes[] = shape2d.rect({
|
||||
plane: 'main',
|
||||
layer: -1,
|
||||
pos: {x: 700, y: 400},
|
||||
width: 160,
|
||||
height: 350,
|
||||
radius: 15,
|
||||
fill: {r: 0.15, g: 0.15, b: 0.2, a: 1},
|
||||
stroke: {r: 0.3, g: 0.3, b: 0.4, a: 1},
|
||||
stroke_thickness: 2
|
||||
})
|
||||
|
||||
// Decorative circles inside panel
|
||||
shapes[] = shape2d.circle({
|
||||
plane: 'main',
|
||||
layer: 0,
|
||||
pos: {x: 700, y: 500},
|
||||
radius: 30,
|
||||
fill: {r: 0.8, g: 0.2, b: 0.3, a: 1}
|
||||
})
|
||||
|
||||
shapes[] = shape2d.circle({
|
||||
plane: 'main',
|
||||
layer: 0,
|
||||
pos: {x: 700, y: 420},
|
||||
radius: 25,
|
||||
fill: {r: 0.2, g: 0.8, b: 0.3, a: 1}
|
||||
})
|
||||
|
||||
shapes[] = shape2d.circle({
|
||||
plane: 'main',
|
||||
layer: 0,
|
||||
pos: {x: 700, y: 350},
|
||||
radius: 20,
|
||||
fill: {r: 0.2, g: 0.3, b: 0.8, a: 1}
|
||||
})
|
||||
|
||||
log.console("test_shape2d initialized with " + text(length(shapes)) + " shapes")
|
||||
}
|
||||
|
||||
function update(dt) {
|
||||
t += dt
|
||||
|
||||
// Animate opacity on the white circle (index 16)
|
||||
if (shapes[16]) {
|
||||
shapes[16].opacity = 0.3 + 0.7 * (0.5 + 0.5 * math.sine(t * 2))
|
||||
}
|
||||
|
||||
// Animate the glow circle size (index 10)
|
||||
var scale = null
|
||||
if (shapes[10]) {
|
||||
scale = 1 + 0.2 * math.sine(t * 3)
|
||||
shapes[10].width = 80 * scale
|
||||
shapes[10].height = 80 * scale
|
||||
}
|
||||
|
||||
// Rotate the dashed pill stroke (index 7)
|
||||
if (shapes[7]) {
|
||||
shapes[4].dash_offset = t * 30
|
||||
shapes[5].dash_offset = t * 30
|
||||
shapes[6].dash_offset = t * 30
|
||||
shapes[7].dash_offset = t * 30
|
||||
}
|
||||
|
||||
// Pulse the decorative circles
|
||||
if (shapes[21]) {
|
||||
shapes[21].fill.r = 0.5 + 0.5 * math.sine(t * 1.5)
|
||||
}
|
||||
if (shapes[22]) {
|
||||
shapes[22].fill.g = 0.5 + 0.5 * math.sine(t * 1.5 + 2.094)
|
||||
}
|
||||
if (shapes[23]) {
|
||||
shapes[23].fill.b = 0.5 + 0.5 * math.sine(t * 1.5 + 4.188)
|
||||
}
|
||||
}
|
||||
|
||||
function render() {
|
||||
var plan = compositor.compile(compositor_config)
|
||||
return compositor.execute(plan)
|
||||
}
|
||||
|
||||
init()
|
||||
|
||||
core.start({
|
||||
width: 800,
|
||||
height: 600,
|
||||
title: "Test Shape2D - SDF Shapes",
|
||||
framerate: 60,
|
||||
update: update,
|
||||
render: render
|
||||
})
|
||||
Reference in New Issue
Block a user