constructor() {
let offset = new Vec2();
let canvas;
let ctx;
let radius = 40;
let radius2 = 60;
let circle2Pos = new Vec2(256, 256);
offset.set(0, 0);;
canvas = Canvas(512, 512);
AddToDOM(canvas, 'game');
BackgroundColor(canvas, 'rgb(0, 0, 20)');
ctx = canvas.getContext('2d');
canvas.addEventListener('mousemove', function (evt) {
offset.x = evt.clientX - evt.target.offsetLeft;
offset.y = evt.clientY - evt.target.offsetTop;
});
function loop() {
requestAnimationFrame(loop);
ctx.clearRect(0, 0, 512, 512);
ctx.fillStyle = '#00ff00';
ctx.strokeStyle = '#00ff00';
// *** This is what really matters. ***
if (CircleToCircle(offset, radius, circle2Pos, radius2)) {
ctx.fillStyle = '#ff0000';
ctx.strokeStyle = '#ff0000';
}
drawCircle(ctx, circle2Pos.x, circle2Pos.y, radius2);
drawCircle(ctx, offset.x, offset.y, radius);
}
loop();
}
constructor () {
this.canvas = Canvas(800, 600);
BackgroundColor(this.canvas, 'rgb(0, 0, 0)');
AddToDOM(this.canvas, 'game');
this.ctx = GetContext(this.canvas);
this.starfield = new Starfield2DDot(800, 600);
this.starfield.addLayer({ qty: 200, speedY: -2, color: '#108A84', starHeight: 2 });
this.starfield.addLayer({ qty: 200, speedY: -3, color: '#19C3BA', starHeight: 4 });
this.starfield.addLayer({ qty: 200, speedY: -4, color: '#22F7EC', starHeight: 6 });
this.loop = new MainLoop(60);
this.loop.begin = (t => this.begin(t));
this.loop.update = (delta => this.update(delta));
this.loop.draw = (t => this.draw(t));
this.loop.start();
}
constructor () {
this.canvas = Canvas(800, 600);
BackgroundColor(this.canvas, 'rgb(200, 200, 250)');
AddToDOM(this.canvas, 'game');
this.ctx = this.canvas.getContext('2d');
this.rect = new Rectangle({ x: 200, y: 200, width: 128, fill: true });
this.rect.createLinearGradient(true, [ 0, '#ff00f0', 0.5, '#05fff0', 1, '#8000ff' ]);
// let gradient = RadialGradient(this.ctx, 256, 256, 300, 256, 256, 50, [ 0, '#ff00f0', 0.5, '#05fff0', 1, '#8000ff' ]);
// this.circ = new Circle({ x: 400, y: 300, radius: 128, fill: gradient });
this.loop = new MainLoop(60);
this.loop.begin = (t => this.begin(t));
this.loop.update = (delta => this.update(delta));
this.loop.draw = (t => this.draw(t));
this.loop.start();
}
constructor() {
let canvas;
let ctx;
let rect0 = [206, 206, 100, 100];
let point = [0, 0];
canvas = Canvas(512, 512);
AddToDOM(canvas, 'game');
BackgroundColor(canvas, 'rgb(0, 0, 20)');
ctx = canvas.getContext('2d');
canvas.addEventListener('mousemove', function (evt) {
point[0] = evt.clientX - evt.target.offsetLeft;
point[1] = evt.clientY - evt.target.offsetTop;
});
canvas.style.cursor = 'none';
function loop() {
requestAnimationFrame(loop);
ctx.clearRect(0, 0, 512, 512);
ctx.fillStyle = '#00ff00';
ctx.strokeStyle = '#00ff00';
// *** This is what really matters. ***
if (RectangleToPointTest(point, rect0)) {
ctx.fillStyle = '#ff0000';
ctx.strokeStyle = '#ff0000';
}
drawRect(ctx, rect0);
ctx.fillStyle = '#fff';
ctx.fillRect(point[0], point[1], 1, 1);
}
loop();
}
constructor () {
this.canvas = Canvas(800, 600);
BackgroundColor(this.canvas, 'rgb(0, 0, 0)');
AddToDOM(this.canvas, 'game');
this.ctx = GetContext(this.canvas);
this.ctx.fillStyle = '#fff';
this.sinusdots = new SinusDots({ x: 400, y: 300, x1: 1008, y1: 2048, x2: 512, y2: 970, x3: 248, y3: -436, x4: 372, y4: 64 });
this.sinusdots.addForm({ x1: 7779, y1: -32703, x2: 0, y2: 0, x3: 232, y3: 274, x4: -204, y4: 130 });
this.sinusdots.addForm({ x1: 7964, y1: 39680, x2: 21, y2: 64, x3: 169, y3: 292, x4: -119, y4: 356 });
this.sinusdots.addForm({ x1: -309, y1: -16255, x2: 277, y2: 188, x3: 97, y3: 198, x4: -255, y4: 512 });
this.sinusdots.addForm({ x1: -1093, y1: -1855, x2: 757, y2: 1014, x3: 846, y3: 572, x4: -274, y4: 408 });
this.sinusdots.addForm({ x1: 864, y1: 2328, x2: 408, y2: 1014, x3: 421, y3: 1220, x4: 18, y4: 94 });
this.sinusdots.addForm({ x1: -12, y1: 2952, x2: 737, y2: 1518, x3: -357, y3: -833, x4: 40, y4: 46 });
// this.sinusdots.addForm({ x1: 598, y1: 598, x2: 598, y2: 598, x3: 893, y3: 898, x4: 482, y4: 816 });
// this.sinusdots.addForm({ x1: 243, y1: 276, x2: 404, y2: 484, x3: 1259, y3: 1144, x4: 916, y4: 1268 });
this.loop = new MainLoop(60);
this.loop.begin = (t => this.begin(t));
this.loop.update = (delta => this.update(delta));
this.loop.draw = (t => this.draw(t));
this.loop.start();
}
constructor () {
this.canvas = Canvas(800, 600);
BackgroundColor(this.canvas, 'rgb(0, 0, 0)');
AddToDOM(this.canvas, 'game');
this.ctx = GetContext(this.canvas);
this.starfield = new Starfield2DDot(800, 600);
this.starfield.addLayer({ qty: 200, speedX: -2, color: '#0000ff'});
this.starfield.addLayer({ qty: 200, speedX: -3, color: '#ff0000'});
this.starfield.addLayer({ qty: 200, speedX: -4, color: '#00ff00'});
this.loop = new MainLoop(60);
this.loop.begin = (t => this.begin(t));
this.loop.update = (delta => this.update(delta));
this.loop.draw = (t => this.draw(t));
this.loop.start();
}
constructor() {
let offset = new Vec2(206, 206);
let canvas;
let ctx;
let angle = 0;
let cos = Math.cos;
let sin = Math.sin;
let poly0 = [
new Vec2(offset.x + 0, offset.y + 0),
new Vec2(offset.x + 100, offset.y + 0),
new Vec2(offset.x + 100, offset.y + 100),
new Vec2(offset.x + 0, offset.y + 100)
];
let poly1 = [
new Vec2(0, 0),
new Vec2(50, 0),
new Vec2(50, 50),
new Vec2(0, 50)
];
offset.set(0, 0);;
canvas = Canvas(512, 512);
AddToDOM(canvas, 'game');
BackgroundColor(canvas, 'rgb(0, 0, 20)');
ctx = canvas.getContext('2d');
canvas.addEventListener('mousemove', function (evt) {
offset.x = evt.clientX - evt.target.offsetLeft;
offset.y = evt.clientY - evt.target.offsetTop;
});
function loop() {
let transformedPoly1 = new Array(4);
for (let index = 0; index < 4; ++index) {
transformedPoly1[index] = [
offset.x + poly1[index].x * cos(angle) - poly1[index].y * sin(angle),
offset.y + poly1[index].x * sin(angle) + poly1[index].y * cos(angle)
];
}
ctx.fillStyle = '#00ff00';
ctx.strokeStyle = '#00ff00';
// *** This is what really matters. ***
if (RectPolygonToRectPolygonTest(poly0, transformedPoly1)) {
ctx.fillStyle = '#ff0000';
ctx.strokeStyle = '#ff0000';
}
requestAnimationFrame(loop);
ctx.clearRect(0, 0, 512, 512);
drawPoly(ctx, poly0);
drawPoly(ctx, transformedPoly1);
angle += 0.01;
}
loop();
}
constructor() {
let mouse = new Vec2(0, 0);
let canvas = null;
let ctx = null;
let body = null;
let bodies = new Array(4000);
canvas = Canvas(512, 512);
AddToDOM(canvas, 'game');
BackgroundColor(canvas, 'rgb(0, 0, 20)');
ctx = canvas.getContext('2d');
for (let i = 0; i < bodies.length; ++i) {
bodies[i] = new Body(canvas.width / 2, canvas.height / 2, new RectangleCollider(0, 0, 4, 4));
bodies[i].acceleration.y = 0.4;
bodies[i].velocity.x = getRandom(-5.0, 5.0);
bodies[i].velocity.y = getRandom(-10.0, -1.0);
}
canvas.addEventListener('mousemove', function (evt) {
mouse.x = evt.clientX - evt.target.offsetLeft;
mouse.y = evt.clientY - evt.target.offsetTop;
});
ctx.fillStyle = '#fff';
function begin() {
ctx.clearRect(0, 0, 512, 512);
}
function update() {
UpdatePhysics(loop.physicsStep);
}
function draw() {
for (let i = 0; i < bodies.length; ++i) {
ctx.fillRect(
bodies[i].position.x,
bodies[i].position.y,
bodies[i].collider.width,
bodies[i].collider.height
);
if (bodies[i].position.y > 512) {
bodies[i].position.x = canvas.width / 2;
bodies[i].position.y = canvas.height / 2;
bodies[i].velocity.y = getRandom(-10.0, -1.0);
}
}
ctx.fillText('fps: ' + loop.fps.toFixed(2), 16, 16);
}
let loop = new MainLoop(60);
loop.begin = (t => begin(t));
loop.update = (delta => update(delta));
loop.draw = (t => draw(t));
loop.start();
}
constructor() {
let offset = new Vec2(206, 206);
let correctionData = new CorrectionData();
let canvas;
let ctx;
let poly0 = [
new Vec2(offset.x + 50, offset.y + 0),
new Vec2(offset.x + 100, offset.y + 100),
new Vec2(offset.x + 0, offset.y + 100),
];
offset.set(0,0);
canvas = Canvas(512, 512);
AddToDOM(canvas, 'game');
BackgroundColor(canvas, 'rgb(0, 0, 20)');
ctx = canvas.getContext('2d');
canvas.addEventListener('mousemove', function (evt) {
offset.x = evt.clientX - evt.target.offsetLeft;
offset.y = evt.clientY - evt.target.offsetTop;
});
function loop() {
let poly1 = [
new Vec2(offset.x + 0, offset.y + 0),
new Vec2(offset.x + 100, offset.y + 0),
new Vec2(offset.x + 100, offset.y + 150),
new Vec2(offset.x + 0, offset.y + 100)
];
ctx.clearRect(0, 0, 512, 512);
ctx.fillStyle = '#00ff00';
ctx.strokeStyle = '#00ff00';
requestAnimationFrame(loop);
drawPoly(ctx, poly0);
drawPoly(ctx, poly1);
// *** This is what really matters. ***
if (PolygonToPolygonCorrection(poly0, poly1, correctionData)) {
ctx.fillStyle = '#ff0000';
ctx.strokeStyle = '#ff0000';
let resultPoly = new Array(poly1.length)
for (var i = 0; i < resultPoly.length; ++i) {
resultPoly[i] = [poly1[i][0] + correctionData.correction[0],poly1[i][1] + correctionData.correction[1]];
}
drawPoly(ctx, resultPoly);
}
}
loop();
}
constructor () {
this.canvas = Canvas(512, 512);
BackgroundColor(this.canvas, 'rgb(0, 0, 20)');
AddToDOM(this.canvas, 'game');
let ctx = this.canvas.getContext('2d');
this.rect1(ctx);
this.rect2(ctx);
this.rect3(ctx);
this.rect4(ctx);
}
constructor () {
this.canvas = Canvas(800, 600);
BackgroundColor(this.canvas, 'rgb(0, 0, 0)');
AddToDOM(this.canvas, 'game');
this.ctx = GetContext(this.canvas);
// Loader
this.loader = new Loader();
this.loader.path = 'assets/';
this.loader.image('star3').then((file) => this.loadComplete(file));
this.loader.start();
}
constructor () {
this.canvas = Canvas(320, 200);
AddToDOM(this.canvas, 'game');
BackgroundColor(this.canvas, '#000000');
this.loader = new Loader();
this.loader.path = 'assets/';
this.loader.image('agent-t-buggin-acf_logo').then((file) => this.loadComplete(file));
this.loader.start();
}
constructor () {
this.canvas = Canvas(512, 256);
BackgroundColor(this.canvas, 'rgb(0, 0, 50)');
AddToDOM(this.canvas, 'game');
this.ctx = this.canvas.getContext('2d');
this.ctx.fillStyle = 'rgba(255, 255, 255, 1)';
this.ctx.font = '14px Courier';
this.clock = new Clock();
this.clock.init(() => this.update());
}
loadComplete (file) {
// Draw the image
const ctx = GetContext(this.canvas);
ctx.drawImage(file.data, 0, 0);
// Get a pixel from 100x80 from the canvas context
const pixel = GetPixel(ctx, 100, 80);
console.log(pixel);
// Now let's set the rgb value we got as the canvas background color
const bgc = `rgba(${pixel.r}, ${pixel.g}, ${pixel.b}, ${255 / pixel.a})`;
BackgroundColor(this.canvas, bgc);
}
constructor () {
// Render the sprite data to an existing canvas and DON'T resize it
this.canvas = Canvas(800, 300);
BackgroundColor(this.canvas, 'rgb(0, 0, 20)');
AddToDOM(this.canvas, 'game');
let data = [
' 333 ',
' 777 ',
'E333E',
' 333 ',
' 3 3 '
];
RenderToCanvas(data, { canvas: this.canvas, palette: PALETTE_ARNE, resizeCanvas: false });
}
constructor () {
this.canvas = Canvas(512, 512);
BackgroundColor(this.canvas, 'rgb(0, 0, 20)');
AddToDOM(this.canvas, 'game');
this.ctx = this.canvas.getContext('2d');
this.offset = 0;
this.loop = new MainLoop(60);
this.loop.begin = (t => this.begin(t));
this.loop.update = (delta => this.update(delta));
this.loop.draw = (t => this.draw(t));
this.loop.start();
}
constructor () {
this.canvas = Canvas(512, 512);
BackgroundColor(this.canvas, 'rgb(0, 0, 20)');
AddToDOM(this.canvas, 'game');
this.ctx = this.canvas.getContext('2d');
Line(this.ctx, 2);
// export default function Rectangle (context, x, y, width = 128, height = 128, angle = 0, fromCenter = false) {
// Rotate from corner
Rectangle(this.ctx, 100, 100, 128, 128, DegToRad(20));
Stroke(this.ctx, 255, 0, 255);
}
constructor () {
this.canvas = Canvas(800, 600);
BackgroundColor(this.canvas, 'rgb(0, 0, 0)');
AddToDOM(this.canvas, 'game');
this.ctx = GetContext(this.canvas);
this.ctx.fillStyle = '#fff';
this.sinusdots = new SinusDots({ x: 400, y: 300, qty: 400, x1: 1008, y1: 2048, x2: 512, y2: 970, x3: 248, y3: -436, x4: 372, y4: 64 });
// Loader
this.image = null;
this.loader = new Loader();
this.loader.path = 'assets/';
this.loader.image('blue_ball').then((file) => this.loadComplete(file));
this.loader.start();
}
constructor() {
let offset = new Vec2(206, 206);
let canvas;
let ctx;
let poly0 = [
new Vec2(offset.x + 50, offset.y + 0),
new Vec2(offset.x + 100, offset.y + 100),
new Vec2(offset.x + 0, offset.y + 100),
];
offset.set(0,0);;
canvas = Canvas(512, 512);
canvas.style.cursor = 'none';
AddToDOM(canvas, 'game');
BackgroundColor(canvas, 'rgb(0, 0, 20)');
ctx = canvas.getContext('2d');
canvas.addEventListener('mousemove', function (evt) {
offset.x = evt.clientX - evt.target.offsetLeft;
offset.y = evt.clientY - evt.target.offsetTop;
});
function loop() {
ctx.fillStyle = '#00ff00';
ctx.strokeStyle = '#00ff00';
// *** This is what really matters. ***
if (PolygonToPoint(offset, poly0)) {
ctx.fillStyle = '#ff0000';
ctx.strokeStyle = '#ff0000';
}
requestAnimationFrame(loop);
ctx.clearRect(0, 0, 512, 512);
drawPoly(ctx, poly0);
ctx.fillRect(offset.x, offset.y, 1, 1);
}
loop();
}
constructor() {
let mouse = new Vec2(0, 0);
let canvas = null;
let ctx = null;
let bodyA = null;
let bodyB = null;
canvas = Canvas(512, 512);
AddToDOM(canvas, 'game');
BackgroundColor(canvas, 'rgb(0, 0, 20)');
ctx = canvas.getContext('2d');
canvas.addEventListener('mousemove', function (evt) {
mouse.x = evt.clientX - evt.target.offsetLeft;
mouse.y = evt.clientY - evt.target.offsetTop;
});
ctx.strokeStyle = ctx.fillStyle = '#fff';
bodyA = new Body(256, 450, new PolygonCollider([
[-228, -50],
[-228, -50 + 100],
[-228 + 456, -50 + 100],
[128, -90]
]));
bodyB = new Body(256, 150, new RectangleCollider(0, 0, 25, 60));
bodyA.acceleration.y = -0.05;
bodyB.bounce.y = 1;
bodyA.bounce.y = 0.5;
bodyB.acceleration.y = 0.05;
function begin() {
ctx.clearRect(0, 0, 512, 512);
}
function BodiesCollided(a, b) {
//console.log(a, b);
//console.log('Collision detected');
ctx.strokeStyle = ctx.fillStyle = '#ff0000';
}
function update() {
ctx.strokeStyle = ctx.fillStyle = '#fff';
UpdatePhysics(loop.physicsStep);
Collide(bodyA, bodyB, BodiesCollided);
// Run this after all collision request
// have been done.
UpdateCollisions();
if (bodyA.position.y < 0) {
bodyA.position.x = canvas.width / 2;
bodyA.position.y = canvas.height;
bodyA.velocity.x = 0;
bodyA.velocity.y = 0;
}
if (bodyB.position.y > 512) {
bodyB.position.x = canvas.width / 2;
bodyB.position.y = -bodyB.collider.height;
bodyB.velocity.x = 0;
bodyB.velocity.y = 0;
}
}
function draw() {
drawPoly(ctx, bodyA.position, bodyA.collider.verticesX, bodyA.collider.verticesY);
drawPoly(ctx, bodyB.position, bodyB.collider.verticesX, bodyB.collider.verticesY);
ctx.fillText('fps: ' + loop.fps.toFixed(2), 16, 16);
}
let loop = new MainLoop(60);
loop.begin = (t => begin(t));
loop.update = (delta => update(delta));
loop.draw = (t => draw(t));
loop.start();
}
import Color from 'graphics/color/BaseColor.js';
import Canvas from 'canvas/Canvas.js';
import AddToDOM from 'dom/AddToDOM.js';
import BackgroundColor from 'canvas/BackgroundColor.js';
let canvas = Canvas(512, 512);
BackgroundColor(canvas, 'rgb(0, 0, 0)');
AddToDOM(canvas, 'game');
let ctx = canvas.getContext('2d');
let color = new Color();
for (let y = 0; y < 8; y++)
{
for (let x = 0; x < 8; x++)
{
color.fromRandom();
ctx.fillStyle = color.rgba;
ctx.fillRect(x * 64, y * 64, 64, 64);
}
}