commit
d575ddfd74
12 changed files with 1278 additions and 0 deletions
@ -0,0 +1,2 @@ |
|||||||
|
.idea |
||||||
|
|
||||||
@ -0,0 +1,6 @@ |
|||||||
|
{ |
||||||
|
"display_name": "Cross product", |
||||||
|
"info_text": "A 3D coordinates system which supported my presentation about the cross product in math class. Switch through states with arrow keys.", |
||||||
|
"visible": false, |
||||||
|
"tags": ["Tool", "Maths"] |
||||||
|
} |
||||||
@ -0,0 +1,130 @@ |
|||||||
|
class Arrow { |
||||||
|
|
||||||
|
constructor(posX, posY, posZ, dirX, dirY, dirZ, c, sp){ |
||||||
|
this.color = color(c); |
||||||
|
this.visible = true; |
||||||
|
this.sphere = sp; |
||||||
|
this.pos = createVector(posX, posY, posZ); |
||||||
|
this.dir = createVector(dirX, dirY, dirZ); |
||||||
|
this.end = p5.Vector.add(this.pos, this.dir); |
||||||
|
} |
||||||
|
|
||||||
|
static cross(a1, a2, c){ |
||||||
|
let v = p5.Vector.cross(a1.dir, a2.dir); |
||||||
|
return new Arrow(a1.pos.x, a1.pos.y, a1.pos.z, v.x, v.y, v.z, c); |
||||||
|
} |
||||||
|
|
||||||
|
show(){ |
||||||
|
this.pos.mult(scale); |
||||||
|
this.dir.mult(scale); |
||||||
|
this.end.mult(scale); |
||||||
|
|
||||||
|
stroke(this.color); |
||||||
|
strokeWeight(4); |
||||||
|
let endV = p5.Vector.add(this.pos, this.dir); |
||||||
|
line(this.pos.y, -this.pos.z, this.pos.x, endV.y, -endV.z, endV.x); |
||||||
|
if (this.sphere){ |
||||||
|
push(); |
||||||
|
translate(this.pos.y, -this.pos.z, this.pos.x); |
||||||
|
noStroke(); |
||||||
|
fill(220, 200, 180); |
||||||
|
sphere(5); |
||||||
|
pop(); |
||||||
|
} |
||||||
|
|
||||||
|
this.pos.div(scale); |
||||||
|
this.dir.div(scale); |
||||||
|
this.end.div(scale); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
class Quad { |
||||||
|
|
||||||
|
constructor(a1, a2, c){ |
||||||
|
this.color = color(c); |
||||||
|
this.visible = true; |
||||||
|
this.a1 = a1; |
||||||
|
this.a2 = a2; |
||||||
|
} |
||||||
|
|
||||||
|
show(){ |
||||||
|
this.a1.pos.mult(scale); |
||||||
|
this.a2.dir.mult(scale); |
||||||
|
this.a1.end.mult(scale); |
||||||
|
this.a2.end.mult(scale); |
||||||
|
|
||||||
|
ambientLight(this.color); |
||||||
|
strokeWeight(1); |
||||||
|
beginShape(); |
||||||
|
vertex(this.a1.pos.y, -this.a1.pos.z, this.a1.pos.x); |
||||||
|
vertex(this.a1.end.y, -this.a1.end.z, this.a1.end.x); |
||||||
|
vertex(this.a1.end.y + this.a2.dir.y, -this.a1.end.z - this.a2.dir.z, this.a1.end.x + this.a2.dir.x); |
||||||
|
vertex(this.a2.end.y, -this.a2.end.z, this.a2.end.x); |
||||||
|
endShape(); |
||||||
|
|
||||||
|
this.a1.pos.div(scale); |
||||||
|
this.a2.dir.div(scale); |
||||||
|
this.a1.end.div(scale); |
||||||
|
this.a2.end.div(scale); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
class Cuboid { |
||||||
|
|
||||||
|
constructor(a1, a2, a3, c, h){ |
||||||
|
this.color = color(c); |
||||||
|
this.visible = true; |
||||||
|
this.showHeight = h; |
||||||
|
this.a1 = a1; |
||||||
|
this.a2 = a2; |
||||||
|
this.a3 = a3; |
||||||
|
} |
||||||
|
|
||||||
|
show(){ |
||||||
|
this.a1.pos.mult(scale); |
||||||
|
this.a2.pos.mult(scale); |
||||||
|
this.a3.pos.mult(scale); |
||||||
|
this.a1.dir.mult(scale); |
||||||
|
this.a2.dir.mult(scale); |
||||||
|
this.a3.dir.mult(scale); |
||||||
|
this.a1.end.mult(scale); |
||||||
|
this.a2.end.mult(scale); |
||||||
|
this.a3.end.mult(scale); |
||||||
|
|
||||||
|
let endDown = p5.Vector.add(this.a1.end, this.a2.dir); |
||||||
|
let endUp = p5.Vector.add(endDown, this.a3.dir); |
||||||
|
let a1Up = p5.Vector.add(this.a1.end, this.a3.dir); |
||||||
|
let a2Up = p5.Vector.add(this.a2.end, this.a3.dir); |
||||||
|
stroke(this.color); |
||||||
|
strokeWeight(4); |
||||||
|
line(this.a2.end.y, -this.a2.end.z, this.a2.end.x, endDown.y, -endDown.z, endDown.x); |
||||||
|
line(this.a1.end.y, -this.a1.end.z, this.a1.end.x, endDown.y, -endDown.z, endDown.x); |
||||||
|
line(this.a3.end.y, -this.a3.end.z, this.a3.end.x, a1Up.y, -a1Up.z, a1Up.x); |
||||||
|
line(this.a3.end.y, -this.a3.end.z, this.a3.end.x, a2Up.y, -a2Up.z, a2Up.x); |
||||||
|
line(a1Up.y, -a1Up.z, a1Up.x, endUp.y, -endUp.z, endUp.x); |
||||||
|
line(a2Up.y, -a2Up.z, a2Up.x, endUp.y, -endUp.z, endUp.x); |
||||||
|
line(this.a1.end.y, -this.a1.end.z, this.a1.end.x, a1Up.y, -a1Up.z, a1Up.x); |
||||||
|
line(this.a2.end.y, -this.a2.end.z, this.a2.end.x, a2Up.y, -a2Up.z, a2Up.x); |
||||||
|
line(endDown.y, -endDown.z, endDown.x, endUp.y, -endUp.z, endUp.x); |
||||||
|
|
||||||
|
if (this.showHeight){ |
||||||
|
stroke(255, 255, 0); |
||||||
|
let hDir = p5.Vector.cross(this.a1.dir, this.a2.dir); |
||||||
|
let hLength = p5.Vector.dot(this.a3.dir, hDir) / hDir.mag(); |
||||||
|
hDir.setMag(hLength); |
||||||
|
line(this.a3.end.y, -this.a3.end.z, this.a3.end.x, this.a3.end.y - hDir.y, -this.a3.end.z + hDir.z, this.a3.end.x - hDir.x); |
||||||
|
} |
||||||
|
|
||||||
|
this.a1.pos.div(scale); |
||||||
|
this.a2.pos.div(scale); |
||||||
|
this.a3.pos.div(scale); |
||||||
|
this.a1.dir.div(scale); |
||||||
|
this.a2.dir.div(scale); |
||||||
|
this.a3.dir.div(scale); |
||||||
|
this.a1.end.div(scale); |
||||||
|
this.a2.end.div(scale); |
||||||
|
this.a3.end.div(scale); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,51 @@ |
|||||||
|
function keyPressed(){ |
||||||
|
switch(keyCode){ |
||||||
|
case 68: //D
|
||||||
|
debug = !debug; |
||||||
|
return false; |
||||||
|
case 71: //G
|
||||||
|
grid = !grid; |
||||||
|
return false; |
||||||
|
case RIGHT_ARROW: |
||||||
|
if (state < 16) state++; |
||||||
|
break; |
||||||
|
case LEFT_ARROW: |
||||||
|
if (state > 0) state--; |
||||||
|
break; |
||||||
|
} |
||||||
|
updater(); |
||||||
|
} |
||||||
|
|
||||||
|
function keyReleased(){ |
||||||
|
switch(keyCode){ |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function mouseDragged(){ |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
function mousePressed(){ |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
function mouseReleased(){ |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
function mouseWheel(event){ |
||||||
|
scale -= event.delta > 0 ? scale / 50 : -scale / 50; |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
window.onresize = function(event){ |
||||||
|
resizeCanvas($("#canvasHolder").width(), $("#canvasHolder").height()); |
||||||
|
} |
||||||
|
|
||||||
|
function checkKeys(){ |
||||||
|
if (keyIsDown(UP_ARROW) && !keyIsDown(DOWN_ARROW) && scale < 100) scale += scale / 50; |
||||||
|
if (keyIsDown(DOWN_ARROW) && !keyIsDown(UP_ARROW) && scale > 10) scale -= scale / 50; |
||||||
|
if (scale < 10) scale = 10; |
||||||
|
if (scale > 100) scale = 100; |
||||||
|
} |
||||||
@ -0,0 +1,623 @@ |
|||||||
|
var TOP = 1; |
||||||
|
var RIGHT = 2 |
||||||
|
var BOTTOM = 3; |
||||||
|
var LEFT = 4; |
||||||
|
var TOP_RIGHT = 5; |
||||||
|
var BOTTOM_RIGHT = 6; |
||||||
|
var BOTTOM_LEFT = 7; |
||||||
|
var TOP_LEFT = 8; |
||||||
|
|
||||||
|
var wWidth = window.innerWidth; |
||||||
|
var wHeight = window.innerHeight; |
||||||
|
var oldWHeight; |
||||||
|
var oldWWidth; |
||||||
|
|
||||||
|
let frameRateArray = []; |
||||||
|
|
||||||
|
function updateVars(){ |
||||||
|
oldWWidth = wWidth; |
||||||
|
oldWHeight = wHeight; |
||||||
|
wWidth = window.innerWidth; |
||||||
|
wHeight = window.innerHeight; |
||||||
|
} |
||||||
|
|
||||||
|
function collisionDetection(obj0, obj1){ |
||||||
|
|
||||||
|
var sp = strokePadding; |
||||||
|
if (sp == null) sp = 0; |
||||||
|
|
||||||
|
if (obj0.isEllipse && obj1.isRectangle){ |
||||||
|
|
||||||
|
//Ball
|
||||||
|
var b = obj0; |
||||||
|
|
||||||
|
//Rectangle
|
||||||
|
var r = obj1; |
||||||
|
|
||||||
|
for (var i = 0; i < TWO_PI; i += PI / 32){ |
||||||
|
|
||||||
|
/* Check every borderpoint of the ball beginning |
||||||
|
at the top in clock direction up to top again */ |
||||||
|
|
||||||
|
// Ball Center X
|
||||||
|
var bcx = b.x; |
||||||
|
|
||||||
|
// Ball Center Y
|
||||||
|
var bcy = b.y; |
||||||
|
|
||||||
|
// Ball Border X
|
||||||
|
var bbx = b.x + sin(i) * b.r; |
||||||
|
|
||||||
|
// Ball Border Y inverted because Y = 0 is the TOP of the screen
|
||||||
|
var bby = b.y - cos(i) * b.r; |
||||||
|
|
||||||
|
// Rectangle Width
|
||||||
|
var rW = r.width + 2 * sp; |
||||||
|
|
||||||
|
// Rectangle Height
|
||||||
|
var rH = r.height + 2 * sp; |
||||||
|
|
||||||
|
// Rectangle Border X
|
||||||
|
var rX = r.x - sp; |
||||||
|
|
||||||
|
// Rectangle Border Y
|
||||||
|
var rY = r.y - sp; |
||||||
|
|
||||||
|
// Objects touch
|
||||||
|
if (bbx > rX && bbx < rX + rW |
||||||
|
&& bby > rY && bby < rY + rH){ |
||||||
|
|
||||||
|
// STRAIGHT FACES //
|
||||||
|
|
||||||
|
//Top/Bottom touch
|
||||||
|
if (bcx > rX && bcx < rX + rW){
|
||||||
|
|
||||||
|
//Top touch
|
||||||
|
if (b.v.y > 0) return {isTouching: true, location: TOP}; |
||||||
|
|
||||||
|
//Bottom touch
|
||||||
|
if (b.v.y < 0) return {isTouching: true, location: BOTTOM}; |
||||||
|
} |
||||||
|
|
||||||
|
//Left/Right touch
|
||||||
|
if (bcy > rY && bcy < rY + rH){ |
||||||
|
|
||||||
|
//Left touch
|
||||||
|
if (b.v.x > 0) return {isTouching: true, location: LEFT}; |
||||||
|
|
||||||
|
//Right touch
|
||||||
|
if (b.v.x < 0) return {isTouching: true, location: RIGHT}; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// CORNERS //
|
||||||
|
|
||||||
|
// BOTTOM Left/Right
|
||||||
|
if (i > 0 && i <= PI / 2) return {isTouching: true, location: BOTTOM_LEFT}; |
||||||
|
|
||||||
|
//LEFT Bottom/Top
|
||||||
|
if (i > PI / 2 && i <= PI) return {isTouching: true, location: TOP_LEFT}; |
||||||
|
|
||||||
|
//TOP Left/Right
|
||||||
|
if (i > PI && i <= PI + PI / 2) return {isTouching: true, location: TOP_RIGHT}; |
||||||
|
|
||||||
|
//RIGHT Bottom/Top
|
||||||
|
if (i > PI + PI / 2 && i <= TWO_PI) return {isTouching: true, location: BOTTOM_RIGHT}; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
if (obj0.isEllipse && obj1.isEllipse){ |
||||||
|
|
||||||
|
//Ball 1
|
||||||
|
var b1 = obj0; |
||||||
|
|
||||||
|
//Ball 2
|
||||||
|
var b2 = obj1; |
||||||
|
|
||||||
|
//Balls are close to each other
|
||||||
|
if (b1.x + b1.r > b2.x - b2.r |
||||||
|
&& b1.x - b1.r < b2.x + b2.r |
||||||
|
&& b1.y + b1.r > b2.y - b2.r |
||||||
|
&& b1.y - b1.r < b2.y + b2.r){ |
||||||
|
|
||||||
|
var distance = sqrt(pow(b1.x - b2.x, 2) + pow(b1.y - b2.y, 2)); |
||||||
|
|
||||||
|
if (distance < b1.r + b2.r) return {isTouching: true}; |
||||||
|
} |
||||||
|
} |
||||||
|
return {isTouching: false, location: 0}; |
||||||
|
} |
||||||
|
|
||||||
|
function performCollision(obj0, obj1, collision){ |
||||||
|
if (obj0.isEllipse){ |
||||||
|
|
||||||
|
var ball = obj0; |
||||||
|
|
||||||
|
//Ball collides with frameborder
|
||||||
|
if (obj1.isFrameborder){ |
||||||
|
switch (collision.location){ |
||||||
|
case BOTTOM: |
||||||
|
ball.v.y *= -1; |
||||||
|
break; |
||||||
|
case LEFT: |
||||||
|
case RIGHT: |
||||||
|
ball.v.x *= -1; |
||||||
|
break; |
||||||
|
} |
||||||
|
if (testMode && collision.location == TOP) ball.v.y *= -1; |
||||||
|
ball.move(); |
||||||
|
} |
||||||
|
|
||||||
|
//Ball collides with any brick
|
||||||
|
if (obj1.isBrick){ |
||||||
|
switch (collision.location){ |
||||||
|
case TOP: |
||||||
|
case BOTTOM: |
||||||
|
ball.v.y *= -1; |
||||||
|
ball.move(); |
||||||
|
return; |
||||||
|
case LEFT: |
||||||
|
case RIGHT: |
||||||
|
ball.v.x *= -1; |
||||||
|
ball.move(); |
||||||
|
return; |
||||||
|
case TOP_LEFT: |
||||||
|
var cornerX = obj1.x; |
||||||
|
var cornerY = obj1.y; |
||||||
|
break; |
||||||
|
case TOP_RIGHT: |
||||||
|
var cornerX = obj1.x + obj1.width; |
||||||
|
var cornerY = obj1.y; |
||||||
|
break; |
||||||
|
case BOTTOM_LEFT: |
||||||
|
var cornerX = obj1.x; |
||||||
|
var cornerY = obj1.y + obj1.height; |
||||||
|
break; |
||||||
|
case BOTTOM_RIGHT: |
||||||
|
var cornerX = obj1.x + obj1.width; |
||||||
|
var cornerY = obj1.y + obj1.height; |
||||||
|
break; |
||||||
|
} |
||||||
|
|
||||||
|
var nx = ball.x - cornerX; |
||||||
|
var ny = ball.y - cornerY; |
||||||
|
var length = sqrt(nx * nx + ny * ny); |
||||||
|
nx /= length; |
||||||
|
ny /= length; |
||||||
|
|
||||||
|
var projection = ball.v.x * nx + ball.v.y * ny; |
||||||
|
ball.v.x = ball.v.x - 2 * projection * nx; |
||||||
|
ball.v.y = ball.v.y - 2 * projection * ny; |
||||||
|
|
||||||
|
ball.move(); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
//Ball collides with paddleboard
|
||||||
|
if (obj1.isPaddle){ |
||||||
|
switch (collision.location){ |
||||||
|
case TOP: |
||||||
|
case TOP_LEFT: |
||||||
|
case TOP_RIGHT: |
||||||
|
ball.v.x = ball.calcVelocityX(obj1, ball.v.x); |
||||||
|
ball.v.y = -ball.calcVelocityY(); |
||||||
|
ball.move(); |
||||||
|
return; |
||||||
|
case LEFT: |
||||||
|
case RIGHT: |
||||||
|
ball.v.x *= -1; |
||||||
|
ball.move(); |
||||||
|
return; |
||||||
|
case BOTTOM_LEFT: |
||||||
|
var cornerX = obj1.x; |
||||||
|
var cornerY = obj1.y + obj1.height; |
||||||
|
break; |
||||||
|
case BOTTOM_RIGHT: |
||||||
|
var cornerX = obj1.x + obj1.width; |
||||||
|
var cornerY = obj1.y + obj1.height; |
||||||
|
break; |
||||||
|
} |
||||||
|
var nx = ball.x - cornerX; |
||||||
|
var ny = ball.y - cornerY; |
||||||
|
var length = sqrt(nx * nx + ny * ny); |
||||||
|
nx /= length; |
||||||
|
ny /= length; |
||||||
|
|
||||||
|
var projection = ball.v.x * nx + ball.v.y * ny; |
||||||
|
ball.v.x = ball.v.x - 2 * projection * nx; |
||||||
|
ball.v.y = ball.v.y - 2 * projection * ny; |
||||||
|
|
||||||
|
ball.move(); |
||||||
|
} |
||||||
|
|
||||||
|
//Ball collides with other ball
|
||||||
|
if (obj1.isEllipse){ |
||||||
|
|
||||||
|
//Ball 1
|
||||||
|
var b1 = obj0; |
||||||
|
|
||||||
|
//Ball 2
|
||||||
|
var b2 = obj1; |
||||||
|
|
||||||
|
//Set mass equal to radius of each ball
|
||||||
|
b1.mass = b1.r; |
||||||
|
b2.mass = b2.r; |
||||||
|
|
||||||
|
//Colliding angle of ball 1 to ball 2 using arc tan of both x and y differences
|
||||||
|
var collisionAngle = atan2((b2.y - b1.y), (b2.x - b1.x)); |
||||||
|
|
||||||
|
//Converting directions of velocity vector of balls into angles
|
||||||
|
var d1 = atan2(b1.v.y, b1.v.x); |
||||||
|
var d2 = atan2(b2.v.y, b2.v.x); |
||||||
|
|
||||||
|
//Ignoring mass effects new velocites are simply magnitude multiplied with value of angle differences
|
||||||
|
var newXspeed1 = b1.v.mag * cos(d1 - collisionAngle); |
||||||
|
var newYspeed1 = b1.v.mag * sin(d1 - collisionAngle); |
||||||
|
var newXspeed2 = b2.v.mag * cos(d2 - collisionAngle); |
||||||
|
var newYspeed2 = b2.v.mag * sin(d2 - collisionAngle); |
||||||
|
|
||||||
|
//According to the principle of linear momentum, kinetic energy stays the same after collision, so velocities are now related to masses
|
||||||
|
var finalXspeed1 = ((b1.mass - b2.mass) * newXspeed1 + b2.mass * 2 * newXspeed2) / (b1.mass + b2.mass); |
||||||
|
var finalYspeed1 = newYspeed1; |
||||||
|
var finalXspeed2 = (b1.mass * 2 * newXspeed1 + (b2.mass - b1.mass) * newXspeed2) / (b1.mass + b2.mass); |
||||||
|
var finalYspeed2 = newYspeed2; |
||||||
|
|
||||||
|
//Values of collisionAngle
|
||||||
|
var cosAngle = cos(collisionAngle); |
||||||
|
var sinAngle = sin(collisionAngle); |
||||||
|
|
||||||
|
//To also keep velocites relative to pure collisionAngle, subtract sin*x from cos*x and add sin*y to cos*y because coordSystem has y = 0 on the top
|
||||||
|
var u1x = cosAngle * finalXspeed1 - sinAngle * finalYspeed1; |
||||||
|
var u1y = sinAngle * finalXspeed1 + cosAngle * finalYspeed1; |
||||||
|
var u2x = cosAngle * finalXspeed2 - sinAngle * finalYspeed2; |
||||||
|
var u2y = sinAngle * finalXspeed2 + cosAngle * finalYspeed2; |
||||||
|
|
||||||
|
//Set new velocities to both balls
|
||||||
|
b1.v.x = u1x; |
||||||
|
b1.v.y = u1y; |
||||||
|
b2.v.x = u2x; |
||||||
|
b2.v.y = u2y; |
||||||
|
|
||||||
|
//Update magnitude
|
||||||
|
b1.v.mag = sqrt(pow(b1.v.x, 2) + pow(b1.v.y, 2)); |
||||||
|
b2.v.mag = sqrt(pow(b2.v.x, 2) + pow(b2.v.y, 2)); |
||||||
|
|
||||||
|
|
||||||
|
//Move balls one vx/vy forward to avoid double inverting collision detection
|
||||||
|
b1.x += b1.v.x; |
||||||
|
b1.y += b1.v.y; |
||||||
|
b2.x += b2.v.x; |
||||||
|
b2.y += b2.v.y; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function toTimeString(time, hoursWanted){ |
||||||
|
|
||||||
|
var time = floor(time / 10); |
||||||
|
|
||||||
|
var hs = String(floor(time % 100)); |
||||||
|
var fs = String(floor((time / 100) % 60)); |
||||||
|
|
||||||
|
if (hoursWanted){ |
||||||
|
var min = String(floor(((time / 100) / 60) % 60)); |
||||||
|
var hr = String(floor(((time / 100) / 60) / 60)); |
||||||
|
|
||||||
|
if (hs.length < 2) hs = "0" + hs; |
||||||
|
if (fs.length < 2) fs = "0" + fs; |
||||||
|
if (min.length < 2) min = "0" + min; |
||||||
|
if (hr.length < 2) hr = "0" + hr; |
||||||
|
|
||||||
|
var timeString = hr + ":" + min + ":" + fs + ":" + hs; |
||||||
|
} else { |
||||||
|
var min = String(floor(((time / 100) / 60) % 60)); |
||||||
|
|
||||||
|
if (hs.length < 2) hs = "0" + hs; |
||||||
|
if (fs.length < 2) fs = "0" + fs; |
||||||
|
if (min.length < 2) min = "0" + min; |
||||||
|
|
||||||
|
var timeString = min + ":" + fs + ":" + hs; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return timeString; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
function setCookie(name, value, years){ |
||||||
|
var expires = ""; |
||||||
|
if (years){ |
||||||
|
var date = new Date(); |
||||||
|
date.setTime(date.getTime() + (years * 365 * 24 * 60 * 60 * 1000)); |
||||||
|
expires = "; expires=" + date.toUTCString(); |
||||||
|
} |
||||||
|
document.cookie = name + "=" + value + expires + "; path=/"; |
||||||
|
} |
||||||
|
|
||||||
|
function getCookie(name){ |
||||||
|
var nameEQ = name + "="; |
||||||
|
var ca = document.cookie.split(';'); |
||||||
|
for (var i = 0; i < ca.length; i++){ |
||||||
|
var c = ca[i]; |
||||||
|
while (c.charAt(0) == ' ') c = c.substring(1, c.length); |
||||||
|
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); |
||||||
|
} |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
function deleteCookies(){ |
||||||
|
for (var i = 0; i < arguments.length; i++) setCookie(arguments[i], "", -1); |
||||||
|
} |
||||||
|
|
||||||
|
function deleteAllCookies(){ |
||||||
|
var cookies = document.cookie.split(";"); |
||||||
|
for (var i = 0; i < cookies.length; i++) deleteCookies(cookies[i].split("=")[0]); |
||||||
|
} |
||||||
|
|
||||||
|
Array.prototype.shuffle = function(){ |
||||||
|
let currentIndex = this.length, temporaryValue, randomIndex; |
||||||
|
while (0 != currentIndex){ |
||||||
|
randomIndex = floor(random() * currentIndex); |
||||||
|
currentIndex -= 1; |
||||||
|
temporaryValue = this[currentIndex]; |
||||||
|
this[currentIndex] = this[randomIndex]; |
||||||
|
this[randomIndex] = temporaryValue; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
Array.prototype.clone = function(){ |
||||||
|
return this.slice(0); |
||||||
|
}; |
||||||
|
|
||||||
|
Array.prototype.partitiate = function(dimensions){ |
||||||
|
if (dimensions == 0) return this; |
||||||
|
let parts = []; |
||||||
|
while(this.length) parts.push(this.splice(0, round(pow(this.length, 1 / (1 + 1 / dimensions)))).partitiate(dimensions - 1)); |
||||||
|
return parts; |
||||||
|
} |
||||||
|
|
||||||
|
function debugInformation(){ |
||||||
|
let x = viewPort.x, |
||||||
|
y = viewPort.y; |
||||||
|
textSize(12); |
||||||
|
textStyle(NORMAL); |
||||||
|
stroke(255); |
||||||
|
strokeWeight(1); |
||||||
|
fill(255); |
||||||
|
text("FPS : " + round(frameRate()), 10 + x, 10 + textAscent("FPS : ") + y); |
||||||
|
text("MouseX : " + round(mouseX + x), 10 + x, 10 + textAscent("FPS : ") + 10 + textAscent("MouseX : ") + y); |
||||||
|
text("MouseY : " + round(mouseY + y), 10 + x, 10 + textAscent("FPS : ") + 10 + textAscent("MouseX : ") + 10 + textAscent("MouseY : ") + y); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function ColorPicker(editor) { |
||||||
|
this.movingObject = ""; |
||||||
|
|
||||||
|
this.updateFromHSV = function(){ |
||||||
|
this.h = 1 - $("#hue_picker").position().top / $("#hue").height(); |
||||||
|
this.s = ($("#sb_picker").position().left + 8) / $("#saturation").width(); |
||||||
|
this.v = 1 - ($("#sb_picker").position().top + 8) / $("#value").height(); |
||||||
|
|
||||||
|
this.r = HSVtoRGB(this.h, this.s, this.v).r; |
||||||
|
this.g = HSVtoRGB(this.h, this.s, this.v).g; |
||||||
|
this.b = HSVtoRGB(this.h, this.s, this.v).b; |
||||||
|
|
||||||
|
this.hex = RGBtoHEX(this.r, this.g, this.b); |
||||||
|
|
||||||
|
this.updateInterface(); |
||||||
|
} |
||||||
|
|
||||||
|
this.updateFromRGB = function(){ |
||||||
|
this.r = $($(".color_picker_rgb")[0]).val(); |
||||||
|
this.g = $($(".color_picker_rgb")[1]).val(); |
||||||
|
this.b = $($(".color_picker_rgb")[2]).val(); |
||||||
|
|
||||||
|
this.h = RGBtoHSV(this.r, this.g, this.b).h; |
||||||
|
this.s = RGBtoHSV(this.r, this.g, this.b).s; |
||||||
|
this.v = RGBtoHSV(this.r, this.g, this.b).v; |
||||||
|
|
||||||
|
this.hex = RGBtoHEX(this.r, this.g, this.b); |
||||||
|
|
||||||
|
this.updateFromHEX(null, true); |
||||||
|
|
||||||
|
this.updateInterface(); |
||||||
|
} |
||||||
|
|
||||||
|
this.updateFromHEX = function(input, otf){ |
||||||
|
if (!otf){ //Not on the fly
|
||||||
|
if ($(input).val().isValidHEX()) this.hex = $(input).val(); |
||||||
|
else { |
||||||
|
alert("Error!"); |
||||||
|
return; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
this.r = HEXtoRGB(this.hex).r; |
||||||
|
this.g = HEXtoRGB(this.hex).g; |
||||||
|
this.b = HEXtoRGB(this.hex).b; |
||||||
|
|
||||||
|
this.h = RGBtoHSV(this.r, this.g, this.b).h; |
||||||
|
this.s = RGBtoHSV(this.r, this.g, this.b).s; |
||||||
|
this.v = RGBtoHSV(this.r, this.g, this.b).v; |
||||||
|
|
||||||
|
this.updateInterface(); |
||||||
|
} |
||||||
|
|
||||||
|
this.updateInterface = function(){ |
||||||
|
var o = Math.round((this.r * 299 + (this.g * 587) + (this.b * 114)) / 1000); //https://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx
|
||||||
|
this.fontColor = (o > 125) ? "#000" : "#FFF"; |
||||||
|
|
||||||
|
$($(".color_picker_rgb")[0]).val(this.r); |
||||||
|
$($(".color_picker_rgb")[1]).val(this.g); |
||||||
|
$($(".color_picker_rgb")[2]).val(this.b); |
||||||
|
|
||||||
|
$("#color_picker_hex").val(this.hex); |
||||||
|
|
||||||
|
$("#hue_picker").css("top", (1 - this.h) * $("#hue").height()); |
||||||
|
$("#sb_picker").css({ |
||||||
|
"left": this.s * $("#saturation").width() - 8, |
||||||
|
"top": (1 - this.v) * $("#value").height() - 8 |
||||||
|
}); |
||||||
|
|
||||||
|
var sRGB = HSVtoRGB(this.h, 1, 1); |
||||||
|
var saturationBackground = "linear-gradient(to right, #FFF 0%, rgb("
|
||||||
|
+ sRGB.r + ","
|
||||||
|
+ sRGB.g + ","
|
||||||
|
+ sRGB.b + ") 100%)"; |
||||||
|
|
||||||
|
$("#saturation").css("background", saturationBackground); |
||||||
|
|
||||||
|
/*$($(".color_picker_rgb")[0]).css({ |
||||||
|
"background-color": "rgb(" + this.r + ", 0, 0)" |
||||||
|
}); |
||||||
|
$($(".color_picker_rgb")[1]).css({ |
||||||
|
"background-color": "rgb(0, " + this.g + ", 0)" |
||||||
|
}); |
||||||
|
$($(".color_picker_rgb")[2]).css({ |
||||||
|
"background-color": "rgb(0, 0, " + this.b + ")" |
||||||
|
});*/ |
||||||
|
//Fancy but overloaded
|
||||||
|
|
||||||
|
$("#color_picker_hex").css({ |
||||||
|
"background-color": this.hex, |
||||||
|
"color": this.fontColor |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
this.mousePressed = function(){ |
||||||
|
var x = winMouseX - $("#saturation").offset().left; |
||||||
|
var y = winMouseY - $("#value").offset().top; |
||||||
|
if (x > 0 && x < $("#saturation").width() && y > 0 && y < $("#value").height()){ |
||||||
|
this.movingObject = "sb"; |
||||||
|
} |
||||||
|
if (x > $("#saturation").width() + 6 && x < $("#saturation").width() + 6 + $("#hue").width() && y > 0 && y < $("#hue").height()){ |
||||||
|
this.movingObject = "hue"; |
||||||
|
} |
||||||
|
this.mouseDragged(); |
||||||
|
} |
||||||
|
|
||||||
|
this.mouseDragged = function(){ |
||||||
|
if (this.movingObject == "hue"){ |
||||||
|
var objH = $("#hue"); |
||||||
|
var picker = $("#hue_picker"); |
||||||
|
var h = winMouseY - objH.offset().top; |
||||||
|
if (h > 0 && h < objH.height()){ |
||||||
|
picker.css("top", h - 1); |
||||||
|
} else if (h > objH.height()){ |
||||||
|
picker.css("top", objH.height() - 1); |
||||||
|
} else if (h < 0){ |
||||||
|
picker.css("top", -1); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if (this.movingObject == "sb"){ |
||||||
|
var objS = $("#saturation"); |
||||||
|
var objV = $("#value"); |
||||||
|
var picker = $("#sb_picker"); |
||||||
|
var s = winMouseX - objS.offset().left; |
||||||
|
var v = winMouseY - objV.offset().top; |
||||||
|
if (s > 0 && s < objS.width()){ |
||||||
|
picker.css("left", s - 8); |
||||||
|
} else if (s < 0){ |
||||||
|
picker.css("left", -8); |
||||||
|
} else if (s < objS.width()){ |
||||||
|
picker.css("left", objS.width() - 8); |
||||||
|
} |
||||||
|
if (v > 0 && v < objV.height()){ |
||||||
|
picker.css("top", v - 8); |
||||||
|
} else if (v < 0){ |
||||||
|
picker.css("top", -8); |
||||||
|
} else if (v > objV.height()){ |
||||||
|
picker.css("top", objV.height() - 8); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
this.updateFromHSV(); |
||||||
|
} |
||||||
|
|
||||||
|
this.mouseReleased = function(){ |
||||||
|
this.movingObject = ""; |
||||||
|
} |
||||||
|
|
||||||
|
this.getColor = function(){ |
||||||
|
return this.hex; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//www.stackoverflow.com -->
|
||||||
|
function RGBtoHEX(r, g, b) { |
||||||
|
var rgb = b | (g << 8) | (r << 16); |
||||||
|
return '#' + (0x1000000 + rgb).toString(16).slice(1); |
||||||
|
} |
||||||
|
|
||||||
|
function HEXtoRGB(hex) { |
||||||
|
var shorthandRegex = /^#?([a-fA-F\d])([a-fA-F\d])([a-fA-F\d])$/i; |
||||||
|
hex = hex.replace(shorthandRegex, function(m, r, g, b) { |
||||||
|
return r + r + g + g + b + b; |
||||||
|
}); |
||||||
|
var result = /^#?([a-fA-F\d]{2})([a-fA-F\d]{2})([a-fA-F\d]{2})$/i.exec(hex); |
||||||
|
return result ? { |
||||||
|
r: parseInt(result[1], 16), |
||||||
|
g: parseInt(result[2], 16), |
||||||
|
b: parseInt(result[3], 16) |
||||||
|
} : null; |
||||||
|
} |
||||||
|
|
||||||
|
function HSVtoRGB(h, s, v) { |
||||||
|
var r, g, b, i, f, p, q, t; |
||||||
|
if (arguments.length === 1) { |
||||||
|
s = h.s, v = h.v, h = h.h; |
||||||
|
} |
||||||
|
i = Math.floor(h * 6); |
||||||
|
f = h * 6 - i; |
||||||
|
p = v * (1 - s); |
||||||
|
q = v * (1 - f * s); |
||||||
|
t = v * (1 - (1 - f) * s); |
||||||
|
switch (i % 6) { |
||||||
|
case 0: r = v, g = t, b = p; break; |
||||||
|
case 1: r = q, g = v, b = p; break; |
||||||
|
case 2: r = p, g = v, b = t; break; |
||||||
|
case 3: r = p, g = q, b = v; break; |
||||||
|
case 4: r = t, g = p, b = v; break; |
||||||
|
case 5: r = v, g = p, b = q; break; |
||||||
|
} |
||||||
|
return { |
||||||
|
r: Math.round(r * 255), |
||||||
|
g: Math.round(g * 255), |
||||||
|
b: Math.round(b * 255) |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
function RGBtoHSV(r, g, b) { |
||||||
|
if (arguments.length === 1) { |
||||||
|
g = r.g, b = r.b, r = r.r; |
||||||
|
} |
||||||
|
var max = Math.max(r, g, b), min = Math.min(r, g, b), |
||||||
|
d = max - min, |
||||||
|
h, |
||||||
|
s = (max === 0 ? 0 : d / max), |
||||||
|
v = max / 255; |
||||||
|
|
||||||
|
switch (max) { |
||||||
|
case min: h = 0; break; |
||||||
|
case r: h = (g - b) + d * (g < b ? 6: 0); h /= 6 * d; break; |
||||||
|
case g: h = (b - r) + d * 2; h /= 6 * d; break; |
||||||
|
case b: h = (r - g) + d * 4; h /= 6 * d; break; |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
h: h, |
||||||
|
s: s, |
||||||
|
v: v |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
String.prototype.isValidHEX = function(){ |
||||||
|
return /(^#[0-9A-Fa-f]{6}$)|(^#[0-9A-Fa-f]{3}$)/i.test(this); |
||||||
|
} |
||||||
@ -0,0 +1,267 @@ |
|||||||
|
//p5 X --> Y
|
||||||
|
//p5 Y --> -Z
|
||||||
|
//p5 Z --> X
|
||||||
|
|
||||||
|
//line(y1, -z1, x1, y2, -z2, x2)
|
||||||
|
|
||||||
|
let debug = false, |
||||||
|
viewPort = {x: 0, y: 0, z: 0}, |
||||||
|
arrows = [], |
||||||
|
quads = [], |
||||||
|
cuboids = [], |
||||||
|
state = 0, |
||||||
|
scale = 25, |
||||||
|
grid = true; |
||||||
|
|
||||||
|
let oldMouse = {x: 0, y: 0}, |
||||||
|
rotation = {x: 0, y: 0}; |
||||||
|
|
||||||
|
|
||||||
|
function setup() { |
||||||
|
setFrameRate(60); |
||||||
|
let c = createCanvas($("#canvasHolder").width(), $("#canvasHolder").height(), WEBGL); |
||||||
|
c.parent("canvasHolder"); |
||||||
|
$("#cheatInput").css("display", "none"); |
||||||
|
} |
||||||
|
|
||||||
|
function draw() { |
||||||
|
background(20); |
||||||
|
translate(-50, 50, 0); |
||||||
|
rotateX(-PI / 16); |
||||||
|
rotateY(-PI / 8); |
||||||
|
myOrbitControl(); |
||||||
|
checkKeys(); |
||||||
|
drawCoordSystem(); |
||||||
|
for (let a of arrows) a.show();
|
||||||
|
for (let q of quads) q.show(); |
||||||
|
for (let c of cuboids) c.show(); |
||||||
|
} |
||||||
|
|
||||||
|
let vectorA1 = () => new Arrow(2, 2, 2, 4, 0, 0, "#FFF", true); |
||||||
|
let vectorB1 = () => new Arrow(2, 2, 2, 0, 6, 0, "#FFF"); |
||||||
|
let vectorC1 = () => new Arrow(2, 2, 2, 3, 0, 5, "#FFF"); |
||||||
|
let vectorA2 = () => new Arrow(2, 2, 2, 2, 3, -2, "#FFF", true); |
||||||
|
let vectorB2 = () => new Arrow(2, 2, 2, 0, 3, 2, "#FFF"); |
||||||
|
let vectorC2 = () => new Arrow(2, 2, 2, 3, -1, 6, "#FFF"); |
||||||
|
let createCuboid = (a1, a2, a3, h) => new Cuboid(a1, a2, a3, color(100, 255, 255), h); |
||||||
|
let createQuad = (a1, a2) => new Quad(a1, a2, color(255, 200, 100)); |
||||||
|
let crossVector = (a1, a2) => Arrow.cross(a1, a2, "#FE9"); |
||||||
|
|
||||||
|
function drawCoordSystem(){ |
||||||
|
|
||||||
|
strokeWeight(5); |
||||||
|
|
||||||
|
let strong = 10, |
||||||
|
weak = 150; |
||||||
|
|
||||||
|
let longLength = 300; |
||||||
|
let shortLength = longLength / 3; |
||||||
|
|
||||||
|
let long = longLength - longLength % scale; |
||||||
|
let short = shortLength - shortLength % scale; |
||||||
|
|
||||||
|
//X
|
||||||
|
stroke(strong, strong, 255); //strong
|
||||||
|
line(0, 0, long, 0, 0, 0); |
||||||
|
stroke(weak, weak, 255); //weak
|
||||||
|
line(0, 0, 0, 0, 0, -short); |
||||||
|
|
||||||
|
//Y
|
||||||
|
stroke(255, strong, strong); //strong
|
||||||
|
line(long, 0, 0, 0, 0, 0); |
||||||
|
stroke(255, weak, weak); //weak
|
||||||
|
line(0, 0, 0, -short, 0, 0); |
||||||
|
|
||||||
|
//Z
|
||||||
|
stroke(strong, 255, strong); //strong
|
||||||
|
line(0, -long, 0, 0, 0, 0); |
||||||
|
stroke(weak, 255, weak); //weak
|
||||||
|
line(0, 0, 0, 0, short, 0); |
||||||
|
|
||||||
|
if (grid){ |
||||||
|
strokeWeight(1); |
||||||
|
|
||||||
|
//Multiple for XY
|
||||||
|
stroke("rgba(255, " + weak + ", 255, 0.3)"); |
||||||
|
for (let y = -short; y <= longLength; y += scale) line(y, 0, long, y, 0, -short); |
||||||
|
for (let x = -short; x <= longLength; x += scale) line(long, 0, x, -short, 0, x); |
||||||
|
|
||||||
|
//Multiple for XZ
|
||||||
|
stroke("rgba(" + weak + ", 255, 255, 0.3)"); |
||||||
|
for (let z = -short; z <= longLength; z += scale) line(0, -z, long, 0, -z, -short); |
||||||
|
for (let x = -short; x <= longLength; x += scale) line(0, -long, x, 0, short, x); |
||||||
|
|
||||||
|
//Multiple for YZ
|
||||||
|
stroke("rgba(255, 255, " + weak + ", 0.3)"); |
||||||
|
for (let y = -short; y <= longLength; y += scale) line(y, -long, 0, y, short, 0); |
||||||
|
for (let z = -short; z <= longLength; z += scale) line(long, -z, 0, -short, -z, 0); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
function myOrbitControl(){ |
||||||
|
if (mouseIsPressed){ |
||||||
|
rotation.x -= map(mouseY - oldMouse.y, 0, height, 0, PI); |
||||||
|
rotation.y += map(mouseX - oldMouse.x, 0, width, 0, PI); |
||||||
|
} |
||||||
|
rotateX(rotation.x); |
||||||
|
rotateY(rotation.y); |
||||||
|
oldMouse.x = mouseX; |
||||||
|
oldMouse.y = mouseY; |
||||||
|
} |
||||||
|
|
||||||
|
function html(name, vector, first, second){ |
||||||
|
if (name == null){ |
||||||
|
$("#info").html(""); |
||||||
|
return; |
||||||
|
} |
||||||
|
let dir = vector.dir; |
||||||
|
$("#info").append("<fieldset><table><tr><td></td><td><span></span></td><td></td><td><span></span></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td></tr></table></fieldset>"); |
||||||
|
$("#info fieldset").last().attr({ |
||||||
|
"class": "holder", |
||||||
|
"id": name |
||||||
|
}); |
||||||
|
$("#" + name + " table tr:eq(0) td:eq(0)").html("<sub>→</sub>"); |
||||||
|
$("#" + name + " table tr:eq(0) td:eq(0)").css({"text-align": "left", "-moz-transform": "translate(-2px, 30px) scale(1, 1)"}); |
||||||
|
$("#" + name + " table tr:eq(0) td:eq(1) span").html("("); |
||||||
|
$("#" + name + " table tr:eq(0) td:eq(2)").html(dir.x); |
||||||
|
$("#" + name + " table tr:eq(0) td:eq(3) span").html(")"); |
||||||
|
$("#" + name + " table tr:eq(0) td:eq(1), #" + name + " table tr:eq(0) td:eq(3)").attr({ |
||||||
|
"style": "font-size: 70px", |
||||||
|
"rowspan": "3" |
||||||
|
}); |
||||||
|
$("#" + name + " table tr:eq(1) td:eq(0)").html(name + " = "); |
||||||
|
$("#" + name + " table tr:eq(1) td:eq(1)").html(dir.y); |
||||||
|
$("#" + name + " table tr:eq(2) td:eq(1)").html(dir.z); |
||||||
|
|
||||||
|
if (first){ |
||||||
|
$("#" + name + " table tr:eq(0) td:eq(5), #" + name + " table tr:eq(0) td:eq(7)").html("<sub>→</sub>"); |
||||||
|
$("#" + name + " table tr:eq(0) td:eq(5), #" + name + " table tr:eq(0) td:eq(7)").css("-moz-transform", "translateY(30px)"); |
||||||
|
$("#" + name + " table tr:eq(1) td:eq(2)").html(" = "); |
||||||
|
$("#" + name + " table tr:eq(1) td:eq(3)").html(first); |
||||||
|
$("#" + name + " table tr:eq(1) td:eq(4)").html("×"); |
||||||
|
$("#" + name + " table tr:eq(1) td:eq(5)").html(second); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function updater(){ |
||||||
|
arrows = []; |
||||||
|
quads = []; |
||||||
|
cuboids = []; |
||||||
|
html(null); |
||||||
|
switch(state){ |
||||||
|
case 1: |
||||||
|
arrows.push(vectorA1()); |
||||||
|
html("a", vectorA1()); |
||||||
|
break; |
||||||
|
case 2: |
||||||
|
arrows.push(vectorA1()); |
||||||
|
arrows.push(vectorB1()); |
||||||
|
html("a", vectorA1()); |
||||||
|
html("b", vectorB1()); |
||||||
|
break; |
||||||
|
case 3: |
||||||
|
arrows.push(vectorA1()); |
||||||
|
arrows.push(vectorB1()); |
||||||
|
arrows.push(crossVector(vectorA1(), vectorB1())); |
||||||
|
html("a", vectorA1()); |
||||||
|
html("b", vectorB1()); |
||||||
|
html("x", crossVector(vectorA1(), vectorB1()), "a", "b");
|
||||||
|
break; |
||||||
|
case 4: |
||||||
|
arrows.push(vectorA1()); |
||||||
|
arrows.push(vectorB1()); |
||||||
|
arrows.push(crossVector(vectorA1(), vectorB1())); |
||||||
|
quads.push(createQuad(vectorA1(), vectorB1())); |
||||||
|
html("a", vectorA1()); |
||||||
|
html("b", vectorB1()); |
||||||
|
html("x", crossVector(vectorA1(), vectorB1()), "a", "b");
|
||||||
|
break; |
||||||
|
case 5: |
||||||
|
arrows.push(vectorA1()); |
||||||
|
arrows.push(vectorB1()); |
||||||
|
html("a", vectorA1()); |
||||||
|
html("b", vectorB1()); |
||||||
|
break; |
||||||
|
case 6: |
||||||
|
arrows.push(vectorA1()); |
||||||
|
arrows.push(vectorB1()); |
||||||
|
arrows.push(vectorC1()); |
||||||
|
html("a", vectorA1()); |
||||||
|
html("b", vectorB1()); |
||||||
|
html("c", vectorC1()); |
||||||
|
break; |
||||||
|
case 7: |
||||||
|
arrows.push(vectorA1()); |
||||||
|
arrows.push(vectorB1()); |
||||||
|
arrows.push(vectorC1()); |
||||||
|
cuboids.push(createCuboid(vectorA1(), vectorB1(), vectorC1(), true)); |
||||||
|
html("a", vectorA1()); |
||||||
|
html("b", vectorB1()); |
||||||
|
html("c", vectorC1()); |
||||||
|
break; |
||||||
|
case 8: |
||||||
|
arrows.push(vectorA1()); |
||||||
|
arrows.push(vectorB1()); |
||||||
|
arrows.push(vectorC1()); |
||||||
|
arrows.push(crossVector(vectorA1(), vectorB1())); |
||||||
|
cuboids.push(createCuboid(vectorA1(), vectorB1(), vectorC1(), true)); |
||||||
|
quads.push(createQuad(vectorA1(), vectorB1())); |
||||||
|
html("a", vectorA1()); |
||||||
|
html("b", vectorB1()); |
||||||
|
html("c", vectorC1()); |
||||||
|
html("x", crossVector(vectorA1(), vectorB1()), "a", "b");
|
||||||
|
break; |
||||||
|
case 9: |
||||||
|
break; |
||||||
|
case 10: |
||||||
|
arrows.push(vectorA2()); |
||||||
|
html("a", vectorA2()); |
||||||
|
break; |
||||||
|
case 11: |
||||||
|
arrows.push(vectorA2()); |
||||||
|
arrows.push(vectorB2()); |
||||||
|
html("a", vectorA2()); |
||||||
|
html("b", vectorB2()); |
||||||
|
break; |
||||||
|
case 12: |
||||||
|
arrows.push(vectorA2()); |
||||||
|
arrows.push(vectorB2()); |
||||||
|
arrows.push(vectorC2()); |
||||||
|
html("a", vectorA2()); |
||||||
|
html("b", vectorB2()); |
||||||
|
html("c", vectorC2()); |
||||||
|
break; |
||||||
|
case 13: |
||||||
|
quads.push(createQuad(vectorA2(), vectorB2())); |
||||||
|
arrows.push(vectorA2()); |
||||||
|
arrows.push(vectorB2()); |
||||||
|
arrows.push(vectorC2()); |
||||||
|
html("a", vectorA2()); |
||||||
|
html("b", vectorB2()); |
||||||
|
html("c", vectorC2()); |
||||||
|
break; |
||||||
|
case 14: |
||||||
|
cuboids.push(createCuboid(vectorA2(), vectorB2(), vectorC2(), false)); |
||||||
|
quads.push(createQuad(vectorA2(), vectorB2())); |
||||||
|
arrows.push(vectorA2()); |
||||||
|
arrows.push(vectorB2()); |
||||||
|
arrows.push(vectorC2()); |
||||||
|
html("a", vectorA2()); |
||||||
|
html("b", vectorB2()); |
||||||
|
html("c", vectorC2()); |
||||||
|
break; |
||||||
|
case 15: |
||||||
|
cuboids.push(createCuboid(vectorA2(), vectorB2(), vectorC2(), false)); |
||||||
|
quads.push(createQuad(vectorA2(), vectorB2())); |
||||||
|
arrows.push(crossVector(vectorA2(), vectorB2())); |
||||||
|
arrows.push(vectorA2()); |
||||||
|
arrows.push(vectorB2()); |
||||||
|
arrows.push(vectorC2()); |
||||||
|
html("a", vectorA2()); |
||||||
|
html("b", vectorB2()); |
||||||
|
html("c", vectorC2()); |
||||||
|
html("x", crossVector(vectorA2(), vectorB2()), "a", "b"); |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
Binary file not shown.
Binary file not shown.
@ -0,0 +1,88 @@ |
|||||||
|
#color_picker{ |
||||||
|
width: 300px; |
||||||
|
height: 25%; |
||||||
|
margin: 20px; |
||||||
|
margin-top: 50px; |
||||||
|
border: 5px solid #000; |
||||||
|
background-color: #000; |
||||||
|
-webkit-user-select: none; |
||||||
|
-moz-user-select: none; |
||||||
|
-ms-user-select: none; |
||||||
|
user-select: none; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
#color_picker_numeric{ |
||||||
|
width: 80%; |
||||||
|
padding: 5%; |
||||||
|
margin: 5%; |
||||||
|
background-color: #888; |
||||||
|
border-radius: 10px; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.color_picker_rgb{ |
||||||
|
float: left; |
||||||
|
width: 22%; |
||||||
|
height: 35px; |
||||||
|
font-size: 25px; |
||||||
|
color: #000; |
||||||
|
} |
||||||
|
.color_picker_rgb:nth-child(1){ |
||||||
|
margin-right: 10%; |
||||||
|
margin-left: 3%; |
||||||
|
background-color: #F00; |
||||||
|
|
||||||
|
} |
||||||
|
.color_picker_rgb:nth-child(2){ |
||||||
|
background-color: #0F0; |
||||||
|
} |
||||||
|
.color_picker_rgb:nth-child(3){ |
||||||
|
margin-left: 10%; |
||||||
|
background-color: #00F; |
||||||
|
color: #FFF; |
||||||
|
} |
||||||
|
#color_picker_hex{ |
||||||
|
width: 50%; |
||||||
|
height: 30px; |
||||||
|
font-size: 25px; |
||||||
|
margin: 10% 25% 0 25%; |
||||||
|
} |
||||||
|
#saturation{ |
||||||
|
position: relative; |
||||||
|
width: calc(100% - 33px); |
||||||
|
height: 100%; |
||||||
|
background: linear-gradient(to right, #FFF 0%, #F00 100%); |
||||||
|
float: left; |
||||||
|
margin-right: 6px; |
||||||
|
} |
||||||
|
#value { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background: linear-gradient(to top, #000 0%, rgba(255,255,255,0) 100%); |
||||||
|
} |
||||||
|
#sb_picker{ |
||||||
|
border: 2px solid; |
||||||
|
border-color: #FFF; |
||||||
|
position: absolute; |
||||||
|
width: 14px; |
||||||
|
height: 14px; |
||||||
|
border-radius: 10px; |
||||||
|
bottom: 50px; |
||||||
|
left: 50px; |
||||||
|
box-sizing: border-box; |
||||||
|
z-index: 10; |
||||||
|
} |
||||||
|
#hue { |
||||||
|
width: 27px; |
||||||
|
height: 100%; |
||||||
|
position: relative; |
||||||
|
float: left; |
||||||
|
background: linear-gradient(to bottom, #F00 0%, #F0F 17%, #00F 34%, #0FF 50%, #0F0 67%, #FF0 84%, #F00 100%); |
||||||
|
} |
||||||
|
#hue_picker { |
||||||
|
position: absolute; |
||||||
|
background: #000; |
||||||
|
border-bottom: 1px solid #000; |
||||||
|
top: 0; |
||||||
|
width: 27px; |
||||||
|
height: 2px; |
||||||
|
} |
||||||
@ -0,0 +1,87 @@ |
|||||||
|
a:link, a:hover, a:active, a:visited{color: #000;} |
||||||
|
|
||||||
|
html, body{margin: 0; padding: 0; height: 100%; width: 100%; background-color: #AAA;} |
||||||
|
|
||||||
|
canvas{margin: 0; padding: 0; display: block;} |
||||||
|
|
||||||
|
button:hover{cursor: pointer;} |
||||||
|
|
||||||
|
#canvasHolder{ |
||||||
|
position: absolute; |
||||||
|
display: block; |
||||||
|
width: calc(100% - 340px - 10px); |
||||||
|
margin: auto; |
||||||
|
right: 0px; |
||||||
|
top: 0px; |
||||||
|
bottom: 0px; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'TitilliumWeb'; |
||||||
|
src: url('data/styles/TitilliumWeb-Light.ttf'); |
||||||
|
} |
||||||
|
|
||||||
|
body{ |
||||||
|
font-family: 'TitilliumWeb'; |
||||||
|
cursor: none; |
||||||
|
-moz-user-select: none; |
||||||
|
-webkit-user-select: none; |
||||||
|
} |
||||||
|
|
||||||
|
#info{ |
||||||
|
background-color: #222; |
||||||
|
position: absolute; |
||||||
|
display: block; |
||||||
|
width: 340px; |
||||||
|
margin: auto; |
||||||
|
left: 0px; |
||||||
|
top: 0px; |
||||||
|
bottom: 0px; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
#border{ |
||||||
|
position: absolute; |
||||||
|
display: block; |
||||||
|
width: 10px; |
||||||
|
top: 0; |
||||||
|
bottom: 0; |
||||||
|
left: 340px; |
||||||
|
background-color: #444; |
||||||
|
} |
||||||
|
|
||||||
|
.holder{ |
||||||
|
background-color: rgb(10, 20, 20); |
||||||
|
position: relative; |
||||||
|
width: 314px; |
||||||
|
margin: 5px; |
||||||
|
padding: 3px; |
||||||
|
padding-top: 0px; |
||||||
|
border: 5px solid #444; |
||||||
|
border-radius: 5px; |
||||||
|
color: #ddd; |
||||||
|
font-size: 35px; |
||||||
|
} |
||||||
|
|
||||||
|
p{margin-top: 5px; margin-bottom: 5px;} |
||||||
|
legend{font-size: 30px;} |
||||||
|
|
||||||
|
.holder span{ |
||||||
|
display: inline-block; |
||||||
|
-moz-transform: scale(1,2); |
||||||
|
} |
||||||
|
|
||||||
|
.holder td{ |
||||||
|
text-align: center; |
||||||
|
padding: 0px; |
||||||
|
} |
||||||
|
|
||||||
|
#cheatInput{ |
||||||
|
position: absolute; |
||||||
|
margin: 0px; |
||||||
|
padding: 0px; |
||||||
|
bottom: 0; |
||||||
|
right: 0; |
||||||
|
left: 0; |
||||||
|
width: 384px; |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 124 KiB |
Loading…
Reference in new issue