Skip to content

Instantly share code, notes, and snippets.

@pmurias

pmurias/index.html

Created September 23, 2019 10:57
Show Gist options
  • Save pmurias/2c710afec97bdb27a26ee431fe38d803 to your computer and use it in GitHub Desktop.
Save pmurias/2c710afec97bdb27a26ee431fe38d803 to your computer and use it in GitHub Desktop.
Download ZIP
Spaceship drawing demo
Raw
index.html
<html>
<head>
<script defer src="spaceship.p6"></script>
</head>
<body style='background-color: blue'>
<canvas id='spaceship' height='500' width='500' style='border: 1px pink;'></canvas>
</body>
</html>
Raw
main.p6
my $document = EVAL(:lang<JavaScript>, 'return document');
my $canvas = $document.getElementById('spaceship');
my $ctx = $canvas.getContext('2d');
class G {
has $.ctx;
has $!path = EVAL(:lang<JavaScript>, 'return new Path2D()');
has $!lastX;
has $!lastY;
method rgb($r, $g, $b) {
sub convert($f) {
floor(255 * $f);
}
my $css = "rgb({convert($r)}, {convert($b)}, {convert($g)})";
$.ctx<strokeStyle> = $css;
$.ctx<fillStyle> = $css;
}
method translate($x, $y) {
$.ctx.translate($x.Num, $y.Num);
}
method move_to($x, $y) {
$!lastX = $x;
$!lastY = $y;
$!path.moveTo($x.Num, $y.Num);
}
method line_to($x is copy, $y is copy, :$relative) {
if $relative {
$x = $!lastX + $x;
$y = $!lastY + $y;
}
$!lastX = $x;
$!lastY = $y;
$!path.lineTo($x.Num, $y.Num);
}
method fill(:$preserve) {
$.ctx.fill($!path);
unless $preserve {
$!path = EVAL(:lang<JavaScript>, 'return new Path2D()');
}
}
method stroke(:$preserve) {
$.ctx.stroke($!path);
unless $preserve {
$!path = EVAL(:lang<JavaScript>, 'return new Path2D()');
}
}
method new_path() {
$!path = EVAL(:lang<JavaScript>, 'return new Path2D()');
}
method copy_path() {
my $copyPath = EVAL(:lang<JavaScript>, 'return new Path2D()');
$copyPath.addPath($!path);
$copyPath;
}
method append_path($path) {
$!path.addPath($path);
}
method close_path() {
$!path.closePath();
}
method scale($x, $y) {
$.ctx.scale($x.Num, $y.Num);
}
method save() {
$.ctx.save();
}
method restore() {
$.ctx.restore();
}
method set_composite_operation($operation) {
$.ctx<globalCompositeOperation> = $operation;
}
}
say('#1');
my $g = G.new(ctx => $ctx);
given $g {
.rgb(1e0, 1e0, 1e0);
.translate(100, 130);
.move_to(-30, 20);
.line_to(60, 0, :relative);
.line_to(-2, 7, :relative);
.line_to(60, -15, :relative);
.line_to(10, -20, :relative);
.line_to(-60, -20, :relative);
.line_to(-9, -10, :relative);
.line_to(-14, 5, :relative);
.line_to(-30, 0, :relative);
.line_to(-14, -5, :relative);
.line_to(-9, 10, :relative);
.line_to(-60, 20, :relative);
.line_to(10, 20, :relative);
.line_to(60, 15, :relative);
.line_to(-2, -7, :relative);
.close_path;
.rgb(0.5e0, 0.5e0, 0.5e0);
.fill() :preserve;
my $outlinepath = .copy_path;
.rgb(1e0, 1e0, 1e0);
.new_path();
for ^2 -> $i {
.move_to(-15 + $i * 28, 20);
.line_to(-5, 10, :relative);
.line_to(12, 0, :relative);
.line_to(-5, -10, :relative);
}
.stroke;
for ^2 -> $i {
.save;
.scale(-1, 1) if $i;
.set_composite_operation('source-atop');
.rgb(1e0, 0e0, 0e0);
.move_to(50, 30);
.line_to(20, 0, :relative);
.line_to(10, -60, :relative);
.line_to(-30, 0, :relative);
.close_path;
.fill;
.restore;
}
.append_path($outlinepath);
.rgb(1e0, 1e0, 1e0);
.stroke();
.move_to(-10, 0);
.line_to(10, 0);
.line_to(20, -20);
.line_to(10, -100);
.line_to(-10, -100);
.line_to(-20, -20);
.line_to(-10, 0);
.rgb(0.5e0, 0.5e0, 0.5e0);
.fill :preserve;
.rgb(1e0, 1e0, 1e0);
.stroke;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment