Commit c4c88591 authored by Nicaudie Charlotte's avatar Nicaudie Charlotte

Set up base javascript file for transpilation

parent 113c75be
// setup canvas
// =========== CANVAS SETUP =========== //
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
// =========== CONSTANTS AND VARIABLES =========== //
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
// function to generate random number
function random(min,max) {
const num = Math.floor(Math.random()*(max-min)) + min;
return num;
}
// let STARTING_POSITION_X = random(0, 1 * width); // random(%f,%f) avec les 2 premiers floats du INIT
// let STARTING_POSITION_Y = random(0, 1 * height); // random(%f,%f) avec les 2 derniers floats du INIT
let STARTING_POSITION_X = random(0, 1 * width); // random(%f,%f) avec les 2 premiers floats du INIT
let STARTING_POSITION_Y = random(0, 1 * height); // random(%f,%f) avec les 2 derniers floats du INIT
let STARTING_POSITION_X = 0;//width / 2; // random(%f,%f) avec les 2 premiers floats du INIT
let STARTING_POSITION_Y = 0;//height / 2; // random(%f,%f) avec les 2 derniers floats du INIT
let alpha = 0.0; // TODO rendre ceci paramétrable avec un %f
let MIN_SIZE = 10; // TODO rendre ceci paramétrable avec un %f
let MAX_SIZE = 20; // TODO rendre ceci paramétrable avec un %f
let MIN_SPEED = -7; // TODO rendre ceci paramétrable avec un %f
let MAX_SPEED = 7; // TODO rendre ceci paramétrable avec un %f
let ORIENTATION_X = 0;
let ORIENTATION_X = 1;
let ORIENTATION_Y = 0;
// Ball constuctor
function Ball(xPosition, yPosition, xOrientation, yOrientation, xVelocity, yVelocity, color, size) {
this.position = [xPosition, yPosition];
this.orientation = [xOrientation, yOrientation];
this.velocity = [xVelocity, yVelocity];
this.color = color;
this.size = size;
}
// =========== UTILS FUNCTIONS =========== //
// Ball methods
Ball.prototype.draw = function () {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.position[0], this.position[1], this.size, 0, 2*Math.PI);
ctx.fill();
function random (minValue, maxValue) {
return Math.floor(Math.random() * (maxValue - minValue)) + minValue;
}
Ball.prototype.update = function () {
if((this.position[0] + this.size) >= width){
this.velocity[0] = -(this.velocity[0]);
}
if((this.position[1] + this.size) >= height){
this.velocity[1] = -(this.velocity[1]);
}
if((this.position[0] - this.size) <= 0){
this.velocity[0] = -(this.velocity[0]);
}
if((this.position[1] - this.size) <= 0){
this.velocity[1] = -(this.velocity[1]);
}
// =========== PEN DEFINITION =========== //
this.position[0] += this.velocity[0];
this.position[1] += this.velocity[1];
// Pen constuctor
function Pen(xPosition, yPosition, xOrientation, yOrientation) {
this.position = [xPosition, yPosition];
this.orientation = [xOrientation, yOrientation];
}
Ball.prototype.translate = function (dx, dy) {
// TODO : Voir s'il faut faire une incrémentation
// progressive pour mieux observer le tracé de la ligne
this.position[0] += dx;
this.position[1] += dy;
if (this.position[0] > width) {
this.position[0] = width;
}
else if (this.position[0] < 0) {
this.position[0] = 0;
}
else if (this.position[1] > height) {
this.position[1] = height;
}
else if (this.position[1] < 0) {
this.position[1] = 0;
}
Pen.prototype.translate = function (distance) {
let newDirection = [this.orientation[0] * distance, this.orientation[1] * distance];
console.log(this.position[0]);
console.log(this.position[1]);
this.position[0] += newDirection[0];
this.position[1] += newDirection[1];
console.log(this.position[0]);
console.log(this.position[1]);
ctx.lineTo(this.position[0], this.position[1]);
}
Ball.prototype.rotate = function (angle) {
Pen.prototype.rotate = function (angle) {
// Cast angle from degrees to radians
let angleRadians = (angle * Math.PI) / 180;
let angleRadians = angle * Mathis.PI / 180;
let rotationMatrix = [[Math.cos(angleRadians), -Math.sin(angleRadians)],
[Math.sin(angleRadians), Math.cos(angleRadians)]];
//this.orientation[0] =
}
// Ball creation
let ball = new Ball(
// ball position always drawn at least one ball width away from the edge of the canvas
// to avoid drawing errors
// random(0 + size, width - size),
// random(0 + size, height - size),
STARTING_POSITION_X,
STARTING_POSITION_Y,
ORIENTATION_X,
ORIENTATION_Y,
random(MIN_SPEED,MAX_SPEED),
random(MIN_SPEED,MAX_SPEED),
'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) + ')',
random(MIN_SIZE,MAX_SIZE)
);
// Animation
function loop() {
ctx.fillStyle = 'rgba(0,0,0,'+alpha+')';
ctx.fillRect(0,0,width, height);
ball.draw();
ball.update();
requestAnimationFrame(loop);
// Compute new orientation vector
let newOrientationX = (this.orientation[0] * Math.cos(angleRadians)) - (this.orientation[1] * Math.sin(angleRadians));
let newOrientationY = (this.orientation[0] * Math.sin(angleRadians)) + (this.orientation[1] * Math.cos(angleRadians));
// Normalize orientation
let normalizedOrientationX = newOrientationX / (Math.sqrt((newOrientationX ** 2) + (newOrientationY ** 2)));
let normalizedOrientationY = newOrientationY / (Math.sqrt((newOrientationX ** 2) + (newOrientationY ** 2)));
// Set the orientation vector to the new normalized one
this.orientation = [+(normalizedOrientationX.toFixed(2)), +(normalizedOrientationY.toFixed(2))];
}
/*
// Iter
function iter(minIter, maxIter) {
let nbIterations = random(minIter, maxIter);
......@@ -142,15 +84,29 @@ function Or()
// Apply stmt2
}
}
*/
// =========== MAIN DRAWING =========== //
// Create a pen
let pen = new Pen(STARTING_POSITION_X, STARTING_POSITION_Y, ORIENTATION_X, ORIENTATION_Y);
// BEGIN OF THE DRAWING
console.log("Width = " + width);
console.log("Height = " + height);
ctx.lineWidth = 6;
ctx.fillStyle = 'rgba(0,0,0,'+alpha+')';
ctx.fillRect(0,0,width, height);
ctx.beginPath();
ctx.moveTo(pen.position[0], pen.position[1]); // Go to init coordinates
ball.draw();
ball.update();
// === BEGIN OF CHANGING PART
requestAnimationFrame(loop);
pen.rotate(45);
pen.translate(484);
// === END OF CHANGING PART
loop();
\ No newline at end of file
// END OF THE DRAWING
ctx.stroke();
ctx.closePath();
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment