update,
This commit is contained in:
louiscklaw
1
_ref/GOLproject/.gitignore
vendored
Normal file
1
_ref/GOLproject/.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.DS_Store
|
||||
172
_ref/GOLproject/GOL-page.css
Normal file
172
_ref/GOLproject/GOL-page.css
Normal file
@@ -0,0 +1,172 @@
|
||||
#logoC{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
max-height: 280px;
|
||||
max-width: 280px;
|
||||
}
|
||||
#myName{
|
||||
font-family: 'Aboreto', 'cursive';
|
||||
font-size: 80px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
.top{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
}
|
||||
.tittle{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-family:'Josefin Sans', sans-serif;
|
||||
font-weight:0;
|
||||
}
|
||||
|
||||
.icon-location{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.icon{
|
||||
width: 350px;
|
||||
height: auto;
|
||||
border-radius: 40px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.intro{
|
||||
background-color: #FEFCFB;
|
||||
}
|
||||
|
||||
.intro-p{
|
||||
font-family:'Josefin Sans', sans-serif;
|
||||
font-size: 28px;
|
||||
margin: 5px;
|
||||
padding: 50px;
|
||||
}
|
||||
.intro-box{
|
||||
width: 350px;
|
||||
height: auto;
|
||||
padding:20px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.other-things{
|
||||
font-family:'Josefin Sans', sans-serif;
|
||||
font-weight: bold;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.spacing{
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.hobbies-box{
|
||||
background-color: #f5ebe0;
|
||||
border-radius: 18px;
|
||||
min-height: 355px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.photo-box{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 5px;
|
||||
aspect-ratio: auto;
|
||||
}
|
||||
|
||||
.photos{
|
||||
width: 200px;
|
||||
height: auto;
|
||||
border-radius: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 5px;
|
||||
margin-top: 10px;
|
||||
padding: 14px;
|
||||
}
|
||||
.flame{
|
||||
width:200px;
|
||||
height:210px;
|
||||
color: #000;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.description{
|
||||
font-family:'Josefin Sans', sans-serif;
|
||||
font-size: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-bottom:20px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* button */
|
||||
.the-button{
|
||||
margin: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#go{
|
||||
align-items: center;
|
||||
background-color: #EBD8DA;
|
||||
border: 2px solid #593d3b;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
color: #593d3b;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-family: Inter,sans-serif;
|
||||
font-size: 16px;
|
||||
height: 48px;
|
||||
justify-content: center;
|
||||
line-height: 24px;
|
||||
max-width: 100%;
|
||||
padding: 0 25px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
|
||||
/* the go button */
|
||||
#go:after {
|
||||
background-color: #593d3b;
|
||||
border-radius: 8px;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 48px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
transform: translate(8px, 8px);
|
||||
transition: transform .2s ease-out;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#go:hover:after {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
#go:active {
|
||||
background-color: #EBD8DA;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
#go:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#go {
|
||||
padding: 0 40px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
135
_ref/GOLproject/GOL-page.html
Normal file
135
_ref/GOLproject/GOL-page.html
Normal file
@@ -0,0 +1,135 @@
|
||||
<!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">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=League+Gothic&display=swap');
|
||||
</style>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap');
|
||||
</style>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&family=Open+Sans:wght@300&display=swap');
|
||||
</style>
|
||||
<title>Game of Life intro</title>
|
||||
<link rel="stylesheet" href="GOL-page.css" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container-fluid topbar">
|
||||
<div class="row top" style="margin-bottom:20px">
|
||||
<div id="logoC">
|
||||
<img src="./intro_asset/logo 2-01.png" class="col-sm-6">
|
||||
</div>
|
||||
<div id="myName" class="col-sm-6">I.m.Candace</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid topbar">
|
||||
<div class="row intro" style="margin-bottom:20px">
|
||||
<h1 class="col-sm-6 tittle"> A little bit about myself. </h1>
|
||||
<p class="col-sm-6 intro-p">
|
||||
I want to be a UX designer and developer.
|
||||
Dedicated to creating human-centred platforms to empathetic solutions to everyday problems. I am
|
||||
enthusiastic about learning new things and enjoy exploring solutions to improve my quality of life.
|
||||
</p>
|
||||
<div class="col-sm-4 icon-location">
|
||||
<div class="col-md-3 ">
|
||||
<img src="./intro_asset/icon.jpg" class="icon" alt="Responsive image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-4">
|
||||
<img src="./intro_asset/Frame 57.png" class="intro-box" alt="Responsive image">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="other-things">
|
||||
Other things I enjoy:
|
||||
</h3>
|
||||
<div class="row spacing">
|
||||
<div class="col-lg-2">
|
||||
<div class="hobbies-box">
|
||||
<div class="photo-box">
|
||||
<img class="photos" src="./intro_asset/food.JPG" alt="Responsive image">
|
||||
</div>
|
||||
<div>
|
||||
<div class="description-box">
|
||||
<p class="description">
|
||||
Foodie
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-2">
|
||||
<div class="hobbies-box">
|
||||
<div class="photo-box">
|
||||
<img class="photos" src="./intro_asset/ceramic.JPG" alt="Responsive image">
|
||||
</div>
|
||||
<div>
|
||||
<div class="description-box">
|
||||
<p class="description">
|
||||
Ceramic
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-2">
|
||||
<div class="hobbies-box">
|
||||
<div class="photo-box">
|
||||
<img class="photos" src="./intro_asset/cat.jpeg" alt="Responsive image">
|
||||
</div>
|
||||
<div>
|
||||
<div class="description-box">
|
||||
<p class="description">
|
||||
Photography
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-2">
|
||||
<div class="hobbies-box">
|
||||
<div class="photo-box">
|
||||
<img class="photos" src="./intro_asset/makeup.JPG" alt="Responsive image">
|
||||
</div>
|
||||
<div>
|
||||
<div class="description-box">
|
||||
<p class="description">
|
||||
Makeup
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<a href="GOL.html">
|
||||
<div class="the-button">
|
||||
<button id="go" role="button" onclick=""location.href=' '>Go to the game!</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
|
||||
crossorigin="anonymous"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
0
_ref/GOLproject/GOL-page.js
Normal file
0
_ref/GOLproject/GOL-page.js
Normal file
128
_ref/GOLproject/GOL.css
Normal file
128
_ref/GOLproject/GOL.css
Normal file
@@ -0,0 +1,128 @@
|
||||
h1{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #ccccca;
|
||||
padding: 10px;
|
||||
background-color: #425363;
|
||||
height: 80px;
|
||||
|
||||
/* all color 264653 , 2a9d8f, fcbf49, f4a261, e76f51*/
|
||||
}
|
||||
body{
|
||||
|
||||
}
|
||||
.button{
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
margin: 15px;
|
||||
}
|
||||
.button5{
|
||||
appearance: button;
|
||||
background-color: transparent;
|
||||
background-image: linear-gradient(to bottom, #e9e9e9, #ebe8e1);
|
||||
border: 0 solid #ccccca;
|
||||
border-radius: .5rem;
|
||||
box-sizing: border-box;
|
||||
color: #482307;
|
||||
column-gap: 1rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-family: ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
|
||||
font-size: 100%;
|
||||
font-weight: 700;
|
||||
line-height: 24px;
|
||||
margin: 0;
|
||||
outline: 2px solid transparent;
|
||||
padding: 1rem 1.5rem;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
transition: all .1s cubic-bezier(.4, 0, .2, 1);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
touch-action: manipulation;
|
||||
box-shadow: -6px 8px 10px rgba(81,41,10,0.1),0px 2px 2px rgba(81,41,10,0.2);
|
||||
}
|
||||
|
||||
.button5:active {
|
||||
background-color: #f3f4f6;
|
||||
box-shadow: -1px 2px 5px rgba(81,41,10,0.15),0px 1px 1px rgba(81,41,10,0.15);
|
||||
transform: translateY(0.125rem);
|
||||
}
|
||||
|
||||
.button5:focus {
|
||||
box-shadow: rgba(72, 35, 7, .46) 0 0 0 4px, -6px 8px 10px rgba(81,41,10,0.1), 0px 2px 2px rgba(81,41,10,0.2);
|
||||
}
|
||||
|
||||
.choose{
|
||||
margin-top: 10px;
|
||||
}
|
||||
.form-group{
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
input[type=range]::-webkit-slider-runnable-track{
|
||||
background: #e9e9e9;
|
||||
border-radius: 10px;
|
||||
box-shadow: 1px 1px 1px #ccccca, 0px 0px 6px #696156;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
|
||||
}
|
||||
|
||||
.scaleButton::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
background:#425363;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.canvas-box{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#control{
|
||||
position: absolute;
|
||||
bottom: 100px;
|
||||
left:30px;
|
||||
max-height: 55px ;
|
||||
}
|
||||
|
||||
#shape-select{
|
||||
margin: 20px;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.slider-box{
|
||||
padding-top: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
#scale, #speed{
|
||||
font-size: medium;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 10px 30px 15px 20px;
|
||||
}
|
||||
|
||||
.scale-label, .speed-label{
|
||||
display: flex;
|
||||
align-items:center;
|
||||
margin: 0 15px 0 15px;
|
||||
}
|
||||
.scale-bar, .speed-bar{
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.num-input{
|
||||
margin: 10px 15px 10px 20px;
|
||||
}
|
||||
.life-input{
|
||||
margin:10px
|
||||
}
|
||||
.friend-imput{
|
||||
margin: 10px;
|
||||
}
|
||||
96
_ref/GOLproject/GOL.html
Normal file
96
_ref/GOLproject/GOL.html
Normal file
@@ -0,0 +1,96 @@
|
||||
<!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" />
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
|
||||
<title>Game of life</title>
|
||||
<link rel="stylesheet" href="GOL.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Game of Life</h1>
|
||||
<div class="col-lg canvas-box">
|
||||
<div id="canvas"></div>
|
||||
<div id="control" class="button col-sm-4">
|
||||
<button id="reset-game" role="button" class="button5">
|
||||
Restart
|
||||
</button>
|
||||
<button id="random-game" role="button" class="button5">
|
||||
Random
|
||||
</button>
|
||||
<button id="stop" role="button" class="button5">
|
||||
Stop
|
||||
</button>
|
||||
<button id="start" role="button" class="button5">
|
||||
Start
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-sm-4 num-input">
|
||||
<div class="life-input">
|
||||
<label for="life-number">Life</label>
|
||||
<input type="number" class="form-control" id="life-number" placeholder="1-3">
|
||||
</div>
|
||||
<div class="friend-imput">
|
||||
<label for="fd-number">friends</label>
|
||||
<input type="number" class="form-control" id="fd-number" placeholder="1-3">
|
||||
</div>
|
||||
</div>
|
||||
<div id="shape-select" class="col-md-3">
|
||||
<div class="form-group">
|
||||
<div>
|
||||
<label for="shape-type">Type of shape</label>
|
||||
<select id="shape-type" class="form-control" id="exampleFormControlSelect1">
|
||||
<option value="ship">ship</option>
|
||||
<option value="glider">glider</option>
|
||||
<option value="boat">boat</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" id="addButton" lass="btn btn-outline-dark btn-sm">
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 slider-box">
|
||||
<div id="scale">
|
||||
<div class="scaleButton scale-label">
|
||||
<input type="range" name="scale" min="10" max="35" step="0.5" class="scale-bar" />
|
||||
<label for="scale">
|
||||
<div>Scale</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="speed">
|
||||
<div class="speedButton speed-label">
|
||||
<input type="range" name="speed" min="10" max="40" step="0.5" class="speed-bar" />
|
||||
<label for="speed">
|
||||
<div>Speed</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.js"></script>
|
||||
<script src="GOL.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
229
_ref/GOLproject/GOL.js
Normal file
229
_ref/GOLproject/GOL.js
Normal file
@@ -0,0 +1,229 @@
|
||||
const boxColor = 150;
|
||||
let unitLength = 20;
|
||||
const strokeColor = 111;
|
||||
let columns;
|
||||
let rows;
|
||||
let currentBoard;
|
||||
let nextBoard;
|
||||
let loneliness = 2;
|
||||
let overPopulation = 3;
|
||||
let fr = 25;
|
||||
|
||||
//scale button
|
||||
document.querySelector("#scale").addEventListener("change", function (event) {
|
||||
unitLength = Number(event.target.value);
|
||||
setup();
|
||||
});
|
||||
function init() {
|
||||
for (let i = 0; i < columns; i++) {
|
||||
for (let j = 0; j < rows; j++) {
|
||||
currentBoard[i][j] = 0;
|
||||
nextBoard[i][j] = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//speed button
|
||||
document.querySelector("#speed").addEventListener("change", function (event) {
|
||||
frameRate(Number(event.target.value));
|
||||
});
|
||||
|
||||
|
||||
// setup
|
||||
function setup() {
|
||||
const canvas = createCanvas(windowWidth, windowHeight - 100);
|
||||
canvas.parent(document.querySelector("#canvas"));
|
||||
|
||||
columns = floor(width / unitLength);
|
||||
rows = floor(height / unitLength);
|
||||
|
||||
currentBoard = [];
|
||||
nextBoard = [];
|
||||
for (let i = 0; i < columns; i++) {
|
||||
currentBoard[i] = [];
|
||||
nextBoard[i] = [];
|
||||
}
|
||||
init();
|
||||
}
|
||||
|
||||
// window resize
|
||||
function windowResized() {
|
||||
resizeCanvas(windowWidth, windowHeight);
|
||||
// columns & rows increase and decrease size
|
||||
columns = Math.floor(windowWidth / unitLength);
|
||||
rows = Math.floor(windowWidth / unitLength);
|
||||
|
||||
for (let i = currentBoard.length; i < columns; i++) {
|
||||
for (let j = 0; j < rows; j++) {
|
||||
currentBoard[i] = [];
|
||||
nextBoard[i] = [];
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < columns; i++) {
|
||||
for (let j = 0; j < rows; j++) {
|
||||
currentBoard[i][j] = 0;
|
||||
nextBoard[i][j] = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelector("#life-number").addEventListener("change", (e) => {
|
||||
loneliness = Number(e.target.value);
|
||||
});
|
||||
|
||||
document.querySelector("#fd-number").addEventListener("input", () => {
|
||||
generate();
|
||||
});
|
||||
|
||||
function draw() {
|
||||
background(255);
|
||||
generate();
|
||||
for (let i = 0; i < columns; i++) {
|
||||
for (let j = 0; j < rows; j++) {
|
||||
if (currentBoard[i][j] == 1) {
|
||||
fill(boxColor);
|
||||
} else {
|
||||
fill(218);
|
||||
}
|
||||
stroke(strokeColor);
|
||||
rect(i * unitLength, j * unitLength, unitLength, unitLength);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function generate() {
|
||||
for (let x = 0; x < columns; x++) {
|
||||
for (let y = 0; y < rows; y++) {
|
||||
let neighbors = 0;
|
||||
for (let i of [-1, 0, 1]) {
|
||||
for (let j of [-1, 0, 1]) {
|
||||
if (i == 0 && j == 0) {
|
||||
continue;
|
||||
}
|
||||
neighbors +=
|
||||
currentBoard[(x + i + columns) % columns][
|
||||
(y + j + rows) % rows
|
||||
];
|
||||
}
|
||||
}
|
||||
if (currentBoard[x][y] == 1 && neighbors < loneliness) {
|
||||
nextBoard[x][y] = 0;
|
||||
} else if (currentBoard[x][y] == 1 && neighbors > overPopulation) {
|
||||
nextBoard[x][y] = 0;
|
||||
} else if (currentBoard[x][y] == 0 && neighbors == 3) {
|
||||
nextBoard[x][y] = 1;
|
||||
} else {
|
||||
nextBoard[x][y] = currentBoard[x][y];
|
||||
}
|
||||
}
|
||||
}
|
||||
[currentBoard, nextBoard] = [nextBoard, currentBoard];
|
||||
}
|
||||
|
||||
const shape = {
|
||||
ship: [
|
||||
[0, 1, 1],
|
||||
[1, 0, 1],
|
||||
[1, 1, 0],
|
||||
],
|
||||
|
||||
glider: [
|
||||
[0, 0, 1],
|
||||
[1, 0, 1],
|
||||
[0, 1, 1],
|
||||
],
|
||||
|
||||
boat: [
|
||||
[0, 1, 0],
|
||||
[1, 0, 1],
|
||||
[0, 1, 1],
|
||||
],
|
||||
};
|
||||
|
||||
function addShape(key) {
|
||||
const x = Math.round(random() * columns);
|
||||
const y = Math.round(random() * rows);
|
||||
for (let i = 0; i < shape[key].length; i++) {
|
||||
for (let j = 0; j < shape[key][i].length; j++) {
|
||||
currentBoard[(x + i) % columns][(y + j) % rows] = shape[key][i][j];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelector("#addButton").addEventListener("click", () => {
|
||||
const select = document.querySelector("#shape-type").value;
|
||||
addShape(select);
|
||||
// same as -> addShape(document.querySelector('#number').value)
|
||||
});
|
||||
|
||||
//reset
|
||||
document.querySelector("#reset-game").addEventListener("click", function () {
|
||||
initReset();
|
||||
});
|
||||
function initReset() {
|
||||
for (let i = 0; i < columns; i++) {
|
||||
for (let j = 0; j < rows; j++) {
|
||||
currentBoard[i][j] = 0;
|
||||
nextBoard[i][j] = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
//stop function
|
||||
document.querySelector("#stop").addEventListener("click", () => {
|
||||
noLoop();
|
||||
});
|
||||
|
||||
//start
|
||||
document.querySelector("#start").addEventListener("click", () => {
|
||||
loop();
|
||||
});
|
||||
|
||||
//random
|
||||
document.querySelector("#random-game").addEventListener("click", function () {
|
||||
randomGame();
|
||||
});
|
||||
|
||||
function randomGame() {
|
||||
for (let i = 0; i < columns; i++) {
|
||||
for (let j = 0; j < rows; j++) {
|
||||
currentBoard[i][j] = random() > 0.8 ? 1 : 0;
|
||||
nextBoard[i][j] = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//mouse control //
|
||||
|
||||
function mouseDragged() {
|
||||
if (mouseX > unitLength * columns || mouseY > unitLength * rows) {
|
||||
return;
|
||||
}
|
||||
const x = Math.floor(mouseX / unitLength);
|
||||
const y = Math.floor(mouseY / unitLength);
|
||||
currentBoard[x][y] = 1;
|
||||
fill(boxColor);
|
||||
stroke(strokeColor);
|
||||
rect(x * unitLength, y * unitLength, unitLength, unitLength);
|
||||
}
|
||||
|
||||
function mousePressed() {
|
||||
noLoop();
|
||||
mouseDragged();
|
||||
}
|
||||
|
||||
function mouseReleased() {
|
||||
loop();
|
||||
}
|
||||
|
||||
function mouseDragged() {
|
||||
if (mouseX > unitLength * columns || mouseY > unitLength * rows) {
|
||||
return;
|
||||
}
|
||||
const x = Math.floor(mouseX / unitLength);
|
||||
const y = Math.floor(mouseY / unitLength);
|
||||
console.log(currentBoard[x][y]);
|
||||
currentBoard[x][y] = 1;
|
||||
fill(boxColor);
|
||||
stroke(strokeColor);
|
||||
rect(x * unitLength, y * unitLength, unitLength, unitLength);
|
||||
}
|
||||
BIN
_ref/GOLproject/intro_asset/Frame 57.png
(Stored with Git LFS)
Normal file
BIN
_ref/GOLproject/intro_asset/Frame 57.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
_ref/GOLproject/intro_asset/blackground.jpeg
Normal file
BIN
_ref/GOLproject/intro_asset/blackground.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
_ref/GOLproject/intro_asset/brush.png
(Stored with Git LFS)
Normal file
BIN
_ref/GOLproject/intro_asset/brush.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
_ref/GOLproject/intro_asset/cat.jpeg
Normal file
BIN
_ref/GOLproject/intro_asset/cat.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
BIN
_ref/GOLproject/intro_asset/ceramic.JPG
Normal file
BIN
_ref/GOLproject/intro_asset/ceramic.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
BIN
_ref/GOLproject/intro_asset/food.JPG
Normal file
BIN
_ref/GOLproject/intro_asset/food.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 225 KiB |
BIN
_ref/GOLproject/intro_asset/icon.jpg
(Stored with Git LFS)
Normal file
BIN
_ref/GOLproject/intro_asset/icon.jpg
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
_ref/GOLproject/intro_asset/logo 2-01.png
(Stored with Git LFS)
Normal file
BIN
_ref/GOLproject/intro_asset/logo 2-01.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
_ref/GOLproject/intro_asset/makeup.JPG
Normal file
BIN
_ref/GOLproject/intro_asset/makeup.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 MiB |
3
_ref/background-p5js/background_test/.vscode/settings.json
vendored
Normal file
3
_ref/background-p5js/background_test/.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
1
_ref/background-p5js/background_test/favicon.ico
Normal file
1
_ref/background-p5js/background_test/favicon.ico
Normal file
@@ -0,0 +1 @@
|
||||
1
|
||||
BIN
_ref/background-p5js/background_test/helloworld.jpeg
Normal file
BIN
_ref/background-p5js/background_test/helloworld.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
25
_ref/background-p5js/background_test/index.html
Normal file
25
_ref/background-p5js/background_test/index.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<!-- local resources -->
|
||||
<link rel="stylesheet" href="/index.css"/>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id='canvas'></div>
|
||||
|
||||
<!-- public resources -->
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
|
||||
|
||||
<!-- local resources -->
|
||||
<script src="/index.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
16
_ref/background-p5js/background_test/index.js
Normal file
16
_ref/background-p5js/background_test/index.js
Normal file
@@ -0,0 +1,16 @@
|
||||
let img;
|
||||
|
||||
function preload() {
|
||||
img = loadImage("python.jpg");
|
||||
}
|
||||
|
||||
function setup() {
|
||||
const canvas = createCanvas(windowWidth - 20, windowHeight - 200);
|
||||
canvas.parent(document.querySelector("#canvas"));
|
||||
|
||||
for (let i = 0; i < 100; i += 50) {
|
||||
for (let j = 0; j < 100; j += 50) {
|
||||
image(img, i, j, 45, 45);
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
_ref/background-p5js/background_test/python.jpg
(Stored with Git LFS)
Normal file
BIN
_ref/background-p5js/background_test/python.jpg
(Stored with Git LFS)
Normal file
Binary file not shown.
7
_ref/gitUpdate.bat
Normal file
7
_ref/gitUpdate.bat
Normal file
@@ -0,0 +1,7 @@
|
||||
git status .
|
||||
|
||||
@pause
|
||||
|
||||
git add .
|
||||
git commit -m"update _ref,"
|
||||
start git push
|
||||
Reference in New Issue
Block a user