Compare commits

..

3 Commits

Author SHA1 Message Date
05ee3d9b63 Added start to the background physics sim 2025-10-27 20:38:40 -05:00
15cbc6ccfe Renamed classes to operate the same as each other 2025-10-27 20:21:53 -05:00
4eca54312b Changed Font 2025-10-27 20:21:38 -05:00
6 changed files with 232 additions and 45 deletions

View File

@ -7,11 +7,12 @@
<title>The Void System</title> <title>The Void System</title>
<link href="/stylesheets/home.css" rel="stylesheet" type="text/css" media="all"> <link href="/stylesheets/home.css" rel="stylesheet" type="text/css" media="all">
<link rel="stylesheet" href="/stylesheets/base.css" type="text/css" media="all"> <link rel="stylesheet" href="/stylesheets/base.css" type="text/css" media="all">
<script src="/libraries/p5/p5.js"></script> <script src="/javascript/libraries/p5/p5.js"></script>
<style>canvas{z-index: -1;}</style>
<script src="/javascript/newsim.js"></script>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head> </head>
<body> <body>
<canvas id="backgroundSim" width="1000px" height="1000px" alt="Background Image Space Physics simulation"></canvas>
<h1 id="intotitle">Welcome to the Void System</h1> <h1 id="intotitle">Welcome to the Void System</h1>
<div id="mainview"> <div id="mainview">
<div id="postarea"> <div id="postarea">
@ -155,7 +156,6 @@
<button onclick="forgetMe()" type="submit">Forget me</button> <button onclick="forgetMe()" type="submit">Forget me</button>
</div> </div>
</div> </div>
<script src="/javascript/simulation.js"></script>
<script src="/javascript/remeber.js"></script> <script src="/javascript/remeber.js"></script>
</body> </body>
</html> </html>

151
javascript/newsim.js Normal file
View File

@ -0,0 +1,151 @@
let images = {};
let simulator = [];
let maxSpeed = 1;
let backgroundImage;
let LEFT = [-1,0];
const entityTypes = {
METERORITE_SMALL: "meteorite_small",
METERORITE_LARGE: "meteorite_large",
COMET: "comet",
};
let Settings = {
windowWrap: true,
physics: true,
}
function getMass(type){
switch (type){
case entityTypes.COMET: return 1400.0;
case entityTypes.METERORITE_SMALL: return 500.0;
case entityTypes.METERORITE_LARGE: return 1000.0;
}
}
function createEntity(x, y, vx, vy, type){
let entity = {
x: x,
y: y,
ax: 0.0,
ay: 0.0,
vx: vx,
vy: vy,
rot: 0,
mass: getMass(type),
type: type,
}
simulator.push(entity);
}
function getRandomType(){
let rand = Math.random();
if (rand > 0.955){
console.log("Comet made");
return entityTypes.COMET;
}if(rand > 0.4){
return entityTypes.METERORITE_SMALL;
}else{
return entityTypes.METERORITE_LARGE;
}
}
function physicsUpdate(entity){
entity.vx += entity.ax;
entity.vy += entity.ay;
entity.x += entity.vx;
entity.y += entity.vy;
}
function onHit(entity){
}
function drawBackground(refImage){
let w = windowWidth / refImage.width;
let h = windowHeight / refImage.height;
for (let iy = 0; iy <= h; iy++){
for (let ix = 0; ix <= w; ix++){
image(refImage, refImage.width * ix, refImage.height * iy);
}
}
}
function drawEntity(entity){
push();
imageMode(CENTER);
translate(entity.x, entity.y, 0);
rotate((Math.atan2(entity.vx, entity.vy) - Math.atan2(-1,0)) * 180/Math.PI);
image(images[entity.type], 0,0);
pop();
}
function preload(){
images[entityTypes.METERORITE_SMALL] = loadImage("/media/Art/meteorite_small_1.png");
images[entityTypes.METERORITE_LARGE] = loadImage("/media/Art/Meteorite_Large_1_100.png");
images[entityTypes.COMET] = loadImage("/media/Art/comet.png");
//images["ship"] = loadImage("/media/Art/ship.png"); #Make Ship asset for game portion
images["background"] = loadImage("/media/Art/EmptySpace.png");
}
function setup(){
let canvas = createCanvas(windowWidth, windowHeight);
background(255);
describe("A space physics simulator");
canvas.position(0,0);
//Load Entities
let entityCount = 50;
for(let i = 0; i <= entityCount; i+=1){
createEntity(
Math.floor(Math.random() * windowWidth),
Math.floor(Math.random() * windowHeight),
(Math.random() * maxSpeed * 2)-maxSpeed,
(Math.random() * maxSpeed * 2)-maxSpeed,
getRandomType(),
);
}
}
function mouseClicked(){
console.log(mouseX, mouseY);
simulator.forEach((entity) =>{
})
}
function draw(){
//background(images["background"]);
//Draw Tiled Background
drawBackground(images["background"]);
for(let e = 1; e < simulator.length; e++){
let entity = simulator[e]
//Physics Update
if (Settings.physics){
physicsUpdate(entity)
}
//Window Wrap
if (Settings.windowWrap){
if (entity.x > windowWidth){
entity.x = 0;
}
if (entity.x < 0){
entity.x = windowWidth;
}
if (entity.y > windowHeight){
entity.y = 0;
}
if (entity.y < 0){
entity.y = windowHeight;
}
}
//Draw Entity
drawEntity(entity);
}
}

BIN
media/fonts/SPACEMAN.TTF Normal file

Binary file not shown.

View File

@ -11,49 +11,64 @@
<body> <body>
<!----> <!---->
<div id="mainView"> <div id="mainView">
<h1>Rock Collection</h1>
<div class="collection">
<ul class="collectionList">
<li class="collectionItem">
<a href="http://"></a>
<img:src></img:src>
</li>
<li class="collectionItem">
<a href="http://"></a>
<img:src></img:src>
</li>
<li class="collectionItem">
<a href="http://"></a>
<img:src></img:src>
</li>
<li class="collectionItem">
<a href="http://"></a>
<img:src></img:src>
</li>
<li class="collectionItem">
<a href="http://"></a>
<img:src></img:src>
</li>
<li class="collectionItem">
<a href="http://"></a>
<img:src></img:src>
</li>
<li class="collectionItem">
<a href="http://"></a>
<img:src></img:src>
</li>
<li class="collectionItem">
<a href="http://"></a>
<img:src></img:src>
</li>
<li class="collectionItem">
<a href="http://"></a>
<img:src></img:src>
</li>
<li class="collectionItem">
<a href="http://"></a>
<img:src></img:src>
</li>
</ul>
</div>
<h1>Gear Collection</h1> <h1>Gear Collection</h1>
<div class="gearCollection"> <div class="collection">
<ul id="gearList"> <ul id="collectionList">
<li class="gearItem"> <li class="collectionItem"><a href="http://" class="itemLink"></a><img src="" alt="" class="itemImg"></li>
<a href="http://"></a> <li class="collectionItem"><a href="http://" class="itemLink"></a><img src="" alt="" class="itemImg"></li>
<img:src></img:src> <li class="collectionItem"><a href="http://" class="itemLink"></a><img src="" alt="" class="itemImg"></li>
</li> <li class="collectionItem"><a href="http://" class="itemLink"></a><img src="" alt="" class="itemImg"></li>
<li class="gearItem"> <li class="collectionItem"><a href="http://" class="itemLink"></a><img src="" alt="" class="itemImg"></li>
<a href="http://"></a> <li class="collectionItem"><a href="http://" class="itemLink"></a><img src="" alt="" class="itemImg"></li>
<img:src></img:src> <li class="collectionItem"><a href="http://" class="itemLink"></a><img src="" alt="" class="itemImg"></li>
</li> <li class="collectionItem"><a href="http://" class="itemLink"></a><img src="" alt="" class="itemImg"></li>
<li class="gearItem"> <li class="collectionItem"><a href="http://" class="itemLink"></a><img src="" alt="" class="itemImg"></li>
<a href="http://"></a> <li class="collectionItem"><a href="http://" class="itemLink"></a><img src="" alt="" class="itemImg"></li>
<img:src></img:src>
</li>
<li class="gearItem">
<a href="http://"></a>
<img:src></img:src>
</li>
<li class="gearItem">
<a href="http://"></a>
<img:src></img:src>
</li>
<li class="gearItem">
<a href="http://"></a>
<img:src></img:src>
</li>
<li class="gearItem">
<a href="http://"></a>
<img:src></img:src>
</li>
<li class="gearItem">
<a href="http://"></a>
<img:src></img:src>
</li>
<li class="gearItem">
<a href="http://"></a>
<img:src></img:src>
</li>
<li class="gearItem">
<a href="http://"></a>
<img:src></img:src>
</li>
</ul> </ul>
<h1>My Pic collection</h1> <h1>My Pic collection</h1>
<div class="gallery"> <div class="gallery">

15
pages/simonly.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/javascript/libraries/p5/p5.js"></script>
<script src="/javascript/libraries/p5/addons/p5.sound.js"></script>
<script src="/javascript/newsim.js"></script>
<style>body{margin:0;padding:0;} canvas{z-index: -1};</style>
<title>Background Physics Sim only</title>
</head>
<body>
</body>
</html>

View File

@ -1,9 +1,15 @@
@font-face {
font-family: SPACEMAN;
src: url("/media/fonts/SPACEMAN.TTF");
}
body{ body{
background-image: url("/media/Art/EmptySpace.png"); background-image: url("/media/Art/EmptySpace.png");
background-size: 6%; background-size: 6%;
cursor: url("/media/Art/comet.png"); cursor: url("/media/Art/comet.png");
color: rgb(57, 214, 253); color: rgb(57, 214, 253);
text-align: center; text-align: center;
font-family: SPACEMAN;
} }
#back{ #back{