I was playing a game with my family and we lost the dice that went with the game, so I created this small program and I am now trying to create a website with it. ``` mouseClicked = function() { // change to change max and minimum numbers var number= random(0.5, 6.4); // makes number into intiger var integer = round(number); // creates background fill(255, 255, 255); // makes the dice face be 1 if(integer === 1) { fill(245, 242, 242); rect(100, 100, 200, 200); fill(0, 0, 0); ellipse(200,200, 100, 100); } // makes the dice face 4 if(integer === 2) { fill(245, 242, 242); rect(100, 100, 200, 200); fill(0, 0, 0); ellipse(150,150, 70, 70); ellipse(250,250, 70, 70); } // makes the dice face be 3 if(integer === 3) { fill(245, 242, 242); rect(100, 100, 200, 200); fill(0, 0, 0); ellipse(150,150, 60, 60); ellipse(200, 200, 60, 60); ellipse(250, 250, 60, 60); } // make the dice face be 4 if(integer === 4) { fill(245, 242, 242); rect(100, 100, 200, 200); fill(0, 0, 0); ellipse(150, 150, 60, 60); ellipse(150, 250, 60 ,60); ellipse(250, 250, 60, 60); ellipse(250, 150, 60, 60); } // make the dice face be 5 if(integer === 5) { fill(245, 242, 242); rect(100, 100, 200, 200); fill(0, 0, 0); ellipse(150, 150, 60, 60); ellipse(150, 250, 60 ,60); ellipse(250, 250, 60, 60); ellipse(250, 150, 60, 60); ellipse(200, 200, 60, 60); } // make the dice face be 6 if(integer === 6) { fill(245, 242, 242); rect(100, 100, 200, 200); fill(0, 0, 0); ellipse(150, 150, 45, 45); ellipse(150, 250, 45, 45); ellipse(250, 250, 45, 45); ellipse(250, 150, 45, 45); ellipse(250, 200, 45, 45); ellipse(150, 200, 45, 45);

This code takes the position of your mouse cursor, and it creates circles where the cursor is. ``` strokeWeight(3); stroke(24, 0, 0); fill(245, 0, 0); background(255, 255, 255); draw = function() { ellipse(mouseX, mouseY, 30, 30) }; ``` I would like to know: - If there is a way to shorten this code, but still keep it readable. - Or any suggestions to make it better. You can see a live demo here.

So I wrote this code for a contest going on over at Khan Academy known as "Pixar in a Program". The goal of the contest is to create an entry that uses one of the skills shown in the new "Pixar in a Box" course made by them in their partnership with Disney Pixar. In my entry I used De Casteljau's algorithm to make a tool that allowed for easy editing to find the touching point of a parabola. My entry can be found here: https://www.khanacademy.org/computer-programming/de-casteljaus-algorithm-made-easy-wip/5879067530887168 It is written in their live editor over at Khan Academy using the Processing port to JavaScript known as Processing.JS. Here's the code: ``` var a = [-150, 50], b = [0, -50], c = [150, 50]; var ar = [], br = [], cr = []; // The "r" in these variable names means rounded, this is for grid snapping. var ad = [], bd = [], cd = [], qd = [], rd = [], pd = []; // The "d" in these variable names means data, this is for data ouput to match the Cartesian coordinate plane snaps. var t = 0.25; var q = [(1 - t) * a[0] + t * b[0], (1 - t) * a[1] + t * b[1]]; var r = [(1 - t) * b[0] + t * c[0], (1 - t) * b[1] + t * c[1]]; var p = [(1 - t) * q[0] + t * r[0], (1 - t) * q[1] + t * r[1]]; var qMenu = false; var qMenuHover = false; var rMenu = false; var rMenuHover = false; var pMenu = false; var pMenuHover = false; var settingsMenu = false; var settingsMenuHover = false; var mfp = false; // Stands for "Make Full Parabola" var totalPoints = 3; var selected = false; var x = function(i) { if(i === 0) { return ar[0]; } else if(i === 1) { return br[0]; } else if(i === 2) { return cr[0]; } }; // Used to get the x value of a certain point var y = function(i) { if(i === 0) { return ar[1]; } else if(i === 1) { return br[1]; } else if(i === 2) { return cr[1]; } }; // Used to get the y value of a certain point var setX = function(i, value) { if(i === 0) { a[0] = value; } else if(i

Inspired by this question, I modified the script to run a simple simulation of Taylor-Green vortex using LBM and post-processes it using P5*js (an official Javascript port of the Processing API). Unfortunately, it is not performing well, but as I am new to Javascript programming, I lack the insight to really optimize the code. Getting some advice and suggestions for improvement would be greatly appreciated. A working codepen version can be found here. ``` // 2D vector class function vec2(x,y){ this.x = x; this.y = y; } vec2.prototype = { scale: function(s){ return new vec2(this.x*s,this.y*s); }, add: function(v){ return new vec2(this.x+v.x,this.y+v.y); }, subtract: function(v){ return new vec2(this.x-v.x,this.y-v.y); }, dot: function(v){ return this.x*v.x+this.y+v.y; }, length: function(){ return Math.sqrt(this.x*this.x+this.y*this.y); }, normalise: function(){ var l = 1/this.length(); return new vec2(this.x*l, this.y*l); }, }; // domain class function domain(nx, ny) { this.nx = nx; // domain width this.ny = ny; // domain height this.f = []; // distribution array this.ftmp = []; // temporary array this.dens = []; // density array this.vel = []; // velocity array this.omega = 1; // relaxation frequency this.e = [ // discrete velocity set new vec2(0,0), new vec2(0,1), new vec2(1,0), new vec2(0,-1), new vec2(-1,0), new vec2(1,1), new vec2(1,-1), new vec2(-1,-1), new vec2(-1,1) ]; this.w = [ // weights 4/9, 1/9, 1/9, 1/9, 1/9, 1/36, 1/36, 1/36, 1/36 ]; // Arrays initialization for (var x=0; x f for(var x=1; x<this.nx-1; x++){ for(var y=1; y<this.ny-1; y++){ for(var i=0; i<9; i++){ this.f[x][y][i] = this.ftmp[x-this.e[i].x][y-this.e[i].y][i]; } } } } } function s

I've been fooling around in JavaScript again, and I've come up with this simple physics simulation. I think it has a pretty simple setup, here's "psuedocode" of sorts to explain it. - Constructor `PhysicsEntity` - Private method `_calculateForces` - Calculates forces to be applied. - Private method `_applyForces` - Apply the calculated forces. - Private method `_renderEntity` - Render the `PhysicsEntity` at it's position. - Method `updateEntity` - Update the entity. I think the interface is pretty clear, but if you have any suggestions, they would be greatly appreciated. ``` /* A simple physics object for managing certain things such as forces acting upon the object, and rendering. */ var PhysicsEntity = function(mass, entityWidth, entityHeight, accelerationVector, position, lifeTime) { this.mass = mass; this.entityWidth = entityWidth; this.entityHeight = entityHeight; this.accelerationVector = accelerationVector; this.position = position; this.velocity = new PVector(0, 0); // Calculate the forces to be applied to the velocity this._calculateForces = function() { this.velocity.add(this.accelerationVector.x*this.mass, this.accelerationVector.y*this.mass); }; // Apply velocity to the Entity's position this._applyForces = function() { this.position.add(this.velocity); }; // Render the Entity at it's position this._renderEntity = function() { rect(this.position.x, this.position.y, this.entityWidth, this.entityHeight); }; // Update the entity this.updateEntity = function() { this._calculateForces(); this._applyForces(); this._renderEntity(); }; }; ``` Here's an example of how this can be used. ``` // Data for creating new PhysicsEntities and storing them var DEFAULT_MASS = 1; var DEFAULT_WIDTH = 10; var DEFAULT_HEIGHT = 10; var DEFAULT_ACCELERATION = new PVector(0, 0.2); var DEFAULT_LIFETIME = 250; var entityArray = []; //

I've taken my previous block building game and added some performance improvements, and commented some things that needed to be commented for better explanation. ``` /** Here are few instructions before you start... * IMPORTANT (ON KHANACADEMY ONLY): When you make changes to the code, all tiles will be black. * Just hit the restart button to fix that. * * CONTROLS: * MOUSE - Move around the current selected tile. * LEFT MOUSE BUTTON - Add a tile to the screen. * RIGHT MOUSE BUTTON - Delete a tile from the screen. * CONTROL KEY - Change the block type forward. * SHIFT KEY - Change the block type backward. * WASD or LEFT RIGHT DOWN UP - Move around the map. */ /* Global program constants */ var CURSOR_FONT = createFont("monospace", 15); var WHITE = color(255, 255, 255); var SUN_WIDTH = 100; var SUN_HEIGHT = 100; var TILE_SIZE = 10; var COLORS = [ color(180, 120, 20), color(20, 150, 20), color(100, 100, 100), color(240, 200, 10), color(5, 44, 117), color(255, 255, 255), color(110, 70, 10), color(10, 210, 20), ]; var TILE_TYPES = [ "Dirt", "Grass", "Stone", "Sand", "Water", "Snow", "Wood", "Leaves", ]; /* Colors for the sun and moon */ var skyObjectColor1 = color(194, 181, 33); var skyObjectColor2 = color(255, 140, 0); /* Variables concerning map movement */ var movingUp = false; var movingDown = false; var movingLeft = false; var movingRight = false; /* Variables that control the darkness of the sky */ var starVisibilityChange = 0; var starVisibility = 15; var skyDarknessChange = 0.25; var skyDarkness = 125; /* Array containing cloud data */ var cloudArray = []; /* Current selected color */ var selectedColor = 0; /* Array contaning all tile data */ var tileArray = []; /* Array containing all star data */ var starArray = []; /* Variables controlling the sun and moon's position */ var skyObjectYChange = -0.05; var SKY_OBJ_X_POS = 189; var skyObjectYPos = 200; /* Populate the st

I've spent the last weekend working on this basic block building game, which I'm quite proud of. I do think it can be improved in many places though, e.g, performance issues due to my badly designed tile loading, etc. etc... ``` /** Here are few instructions before you start... * IMPORTANT (ON KHANACADEMY ONLY): When you make changes to the code, all tiles will be black. * Just hit the restart button to fix that. * * CONTROLS: * MOUSE - Move around the current selected tile. * LEFT MOUSE BUTTON - Add a tile to the screen. * RIGHT MOUSE BUTTON - Delete a tile from the screen. * CONTROL KEY - Change the block type. * WASD or LEFT RIGHT DOWN UP - Move around the map. */ /* Global program constants */ var CURSOR_FONT = createFont("monospace", 15); var BACKGROUND_COLOR = color(0, 0, 255); var HITBOX_COLOR = color(255, 255, 255); var CLOUD_COLOR = color(255, 255, 255); var SUN_COLOR1 = color(194, 181, 33); var SUN_COLOR2 = color(255, 140, 0); var SUN_WIDTH = 100; var SUN_HEIGHT = 100; var TILE_SIZE = 10; var COLORS = [ color(180, 120, 20), color(20, 150, 20), color(100, 100, 100), color(240, 200, 10), color(5, 44, 117), color(255, 255, 255), color(110, 70, 10), color(10, 210, 20), ]; var TILE_TYPES = [ "Dirt", "Grass", "Stone", "Sand", "Water", "Snow", "Wood", "Leaves", ]; /* Variables concerning map movement */ var movingUp = false; var movingDown = false; var movingLeft = false; var movingRight = false; /* Array containing cloud data */ var cloudArray = []; /* Current selected color */ var selectedColor = 0; /* Array contaning all tile data */ var tileArray = []; /* Variables controlling the sun's position */ var sunYChange = -0.5; var SUN_X_POS = 189; var sunYPos = 200; /* Render the day and night cycle*/ var renderDayNightCycle = function() { noStroke(); fill(SUN_COLOR2); rect(SUN_X_POS, sunYPos, 45, 45); fill(SUN_COLOR1); rect(SUN_X_POS+5, sunYPos+5, 35, 35);

After about half an hour of fooling around with Processing.js/JavaScript, I got this fairly decent particle system set up: ``` // main particle constructor class var Particle = function(position) { this.velocity = new PVector(random(-0.1, 0.1), random(-0.1, 0.1)); this.acceleration = new PVector(random(-0.01, 0.01), random(-0.01, 0.01)); this.lifeTime = 300; this.position = position.get(); }; // update the particle Particle.prototype.update = function() { this.velocity.add(this.acceleration); this.position.add(this.velocity); this.lifeTime--; }; // render the particle Particle.prototype.render = function() { strokeWeight(2); stroke(161, 153, 153, this.lifeTime); fill(140, 135, 140, this.lifeTime); ellipse(this.position.x, this.position.y, 15, 15); }; // check the bounds of a particle Particle.prototype.checkBounds = function() { if(this.position.x >= 385) { this.acceleration = new PVector(random(-0.02, -0.01), random(-0.01, 0.01)); } if(this.position.x = 385) { this.acceleration = new PVector(random(-0.01, 0.01), random(-0.02, -0.01)); } if(this.position.y 0) { return false; } else { return true; } }; // array containing particles var particles = []; // main draw loop var draw = function() { // draw the background and push a new particle background(11, 100, 209); particles.push(new Particle(new PVector(mouseX, mouseY))); // iterate through particles and run their methods for(var p = particles.length-1; p >= 0; p--) { var particle = particles[p]; particle.checkBounds(); particle.update(); particle.render(); if(particle.particleDead()) { particles.splice(p, 1); } } }; ``` Now, I think that this could definitely be improved, as the `Particle.prototype.checkBounds` method seems to not work all the time. Anyways, what can I improve here?

I was fooling around with some maths and realized that I could use a parabola to represent a bouncing ball. So, naturally, I decided to make it in code. `var Ball = function(r, v, a, y, x) { this.r = r; this.v = v; this.a = a; this.y = y; this.x = x; }; Ball.prototype.draw = function() { this.y = this.v*this.r*this.r + this.a*this.r; var NewBallY = 380 - this.y; ellipse(this.x, NewBallY, 20, 20); if(this.y The equation I used to calculate the parabola representing a ball's \$y\$ position is here, where \$y\$ is the `y` position of the ball, \$V\$ is the velocity, \$A\$ is the acceleration, and \$r\$ is the amount of time passed since the start of the bounce: $$y=Vr^{2}+Ar$$

I was messing around with Javascript in Khanacademy the other day and this "monstrosity" was born. It's a terrain generator that uses a simplified version of the random walk method. ``` // current tile position var BlockX = 200; var BlockY = 200; // tile size var SizeX = 2; var SizeY = 2; // min and max X positions var MinX = 0; var MaxX = 400; // min and max Y positions var MinY = 0; var MaxY = 400; // possible position changes var BlockPosChanges = [-1, 1, 0]; // repeats and max repeats var MaxRepeats = round(random(10*100, 10*1250)); // Do not change! This is at the max safe amount var Repeats = 0; // set the background background(0, 13, 255); // main program loop while(Repeats = MaxX) { break; } // test if at edge if(BlockY = MaxY) { break; } // increment repeats Repeats++; } ``` Since this version of Javascript has features that may not be included in other variants, you can test this program here in Khanacademy. What can I improve here?