commit
cae09d450d
16 changed files with 528 additions and 0 deletions
@ -0,0 +1,2 @@ |
||||
.idea |
||||
|
@ -0,0 +1,6 @@ |
||||
{ |
||||
"display_name": "Valentine Present ♥", |
||||
"info_text": "For Selina", |
||||
"visible": true, |
||||
"tags": ["Tool", "Game"] |
||||
} |
After Width: | Height: | Size: 318 B |
@ -0,0 +1,30 @@ |
||||
'use strict';
|
||||
|
||||
function keyPressed(){
|
||||
|
||||
} |
||||
|
||||
function keyReleased(){ |
||||
|
||||
} |
||||
|
||||
function mouseMoved(){ |
||||
|
||||
} |
||||
|
||||
function mouseDragged(){ |
||||
|
||||
} |
||||
|
||||
function mousePressed(){ |
||||
if (ranBool()){ |
||||
flowers.push(new Flower(mouseX, mouseY)); |
||||
} else { |
||||
hearts.push(new Heart(mouseX, mouseY)); |
||||
} |
||||
|
||||
} |
||||
|
||||
function mouseReleased(){ |
||||
|
||||
} |
@ -0,0 +1,70 @@ |
||||
class Flower{ |
||||
|
||||
constructor(x, y){ |
||||
this.pos = createVector(x, y); |
||||
this.rotation = 0; |
||||
this.rotateSpeed = random(PI / 1024, PI / 512) * random([-1, 1]); |
||||
this.leafCount = 16; |
||||
this.leafs = []; |
||||
this.radius = random(20, 200); |
||||
} |
||||
|
||||
update(){ |
||||
|
||||
this.rotation += this.rotateSpeed; |
||||
this.newLeaf = frameCount % 5 == 0; |
||||
if (this.leafs.length < this.leafCount && this.newLeaf){ |
||||
this.leafs.push(new Leaf(this.radius)); |
||||
this.newLeaf = false; |
||||
} |
||||
for (let l of this.leafs){ |
||||
l.update(); |
||||
} |
||||
} |
||||
|
||||
show(){ |
||||
|
||||
push(); |
||||
translate(this.pos.x, this.pos.y); |
||||
rotate(this.rotation); |
||||
for (let i = 0; i < this.leafs.length; i++){ |
||||
let l = this.leafs[i]; |
||||
|
||||
let angle = i / this.leafCount * TWO_PI; |
||||
l.show(angle); |
||||
} |
||||
pop(); |
||||
} |
||||
|
||||
} |
||||
|
||||
class Leaf{ |
||||
|
||||
constructor(radius){ |
||||
this.width = radius; |
||||
this.alpha = 0; |
||||
} |
||||
|
||||
update(){ |
||||
if (this.alpha < 0.6) this.alpha += 0.01; |
||||
} |
||||
|
||||
show(angle){ |
||||
push(); |
||||
noStroke(); |
||||
rotate(angle); |
||||
let hue = int(angle / TWO_PI * 360); |
||||
let c = color('hsba(' + hue + ', 100%, 100%, ' + this.alpha + ')'); |
||||
fill(c);
|
||||
beginShape(); |
||||
for (let x = 0; x < this.width; x++){ |
||||
vertex(x, sin(x * TWO_PI / (this.width * 2)) * this.width / 5); |
||||
} |
||||
for (let x = this.width; x >= 0; x--){ |
||||
vertex(x, sin(x * TWO_PI / (this.width * 2)) * -this.width / 5); |
||||
} |
||||
endShape(); |
||||
pop(); |
||||
} |
||||
|
||||
} |
@ -0,0 +1,42 @@ |
||||
class Heart{ |
||||
|
||||
constructor(x, y){ |
||||
this.pos = createVector(x, y); |
||||
this.pulse = 0; |
||||
this.size = random(50, 200); |
||||
} |
||||
|
||||
update(){ |
||||
this.pulse += 0.1; |
||||
this.pulseValue = 1 + 0.03 * sin(this.pulse); |
||||
} |
||||
|
||||
show(){ |
||||
|
||||
function heart(x, size){ |
||||
return size * sqrt(1 - abs(x) / size); |
||||
} |
||||
|
||||
push(); |
||||
translate(this.pos.x, this.pos.y); |
||||
scale(this.pulseValue); |
||||
fill(255, 0, 0, 80); |
||||
noStroke(); |
||||
|
||||
arc(this.size / 4, 0, this.size / 2, this.size / 2, PI, TWO_PI); |
||||
arc(-this.size / 4, 0, this.size / 2, this.size / 2, PI, TWO_PI); |
||||
|
||||
beginShape(); |
||||
vertex(-this.size / 2, 0); |
||||
|
||||
for (let x = -this.size / 2; x < this.size / 2; x++){ |
||||
vertex(x, heart(x, this.size / 2)); |
||||
} |
||||
|
||||
vertex(this.size / 2, 0); |
||||
endShape(); |
||||
|
||||
pop(); |
||||
} |
||||
|
||||
} |
@ -0,0 +1,71 @@ |
||||
'use strict'; |
||||
|
||||
let projectName = "project_pattern"; |
||||
|
||||
let debug = false, |
||||
viewPort = {x: 0, y: 0}, |
||||
font, |
||||
settings, |
||||
loader; |
||||
|
||||
//Only for online games
|
||||
let socket; |
||||
|
||||
let flowers = [], |
||||
hearts = []; |
||||
|
||||
function preload(){ |
||||
loadJSON('data/settings/libraries.json', json => loadScripts(json)); |
||||
loadJSON('data/settings/settings.json', json => settings = json); |
||||
loadFont('data/styles/font.ttf', f => font = f); |
||||
} |
||||
|
||||
function setup(){ |
||||
canvasSetup(); |
||||
interfaceSetup(); |
||||
} |
||||
|
||||
function draw(){ |
||||
|
||||
background(10); |
||||
|
||||
for (let flower of flowers){ |
||||
flower.update(); |
||||
flower.show(); |
||||
} |
||||
|
||||
for (let heart of hearts){ |
||||
heart.update(); |
||||
heart.show(); |
||||
} |
||||
|
||||
if (loader){ |
||||
loader.update(); |
||||
loader.display(); |
||||
} |
||||
|
||||
if (debug) debugInformation(); |
||||
} |
||||
|
||||
function canvasSetup(){ |
||||
setFrameRate(60); |
||||
let w = window.innerWidth, |
||||
h = window.innerHeight; |
||||
let canvas = createCanvas(w, h); |
||||
canvas.parent('canvas-holder'); |
||||
textFont(font); |
||||
} |
||||
|
||||
function interfaceSetup(){ |
||||
|
||||
} |
||||
|
||||
function loadScripts(libs){ |
||||
for (let script in libs){ |
||||
if (libs[script]){ |
||||
let url = location.protocol + '//' + location.host + '/lib/benjocraeft/' + script + '.js'; |
||||
console.log(url); |
||||
$.getScript(url); |
||||
} |
||||
} |
||||
} |
@ -0,0 +1,48 @@ |
||||
'use strict'; |
||||
|
||||
function socketConnect(){ |
||||
socket = io("https://" + window.location.hostname + "?game=" + projectName); |
||||
} |
||||
|
||||
function createLobby(dom){ |
||||
if (inputIsValid('create')){ |
||||
onlineRequestFrontend(dom); |
||||
//TODO
|
||||
} |
||||
} |
||||
|
||||
function joinLobby(dom){ |
||||
if (inputIsValid('join')){ |
||||
onlineRequestFrontend(dom); |
||||
//TODO
|
||||
} |
||||
} |
||||
|
||||
function onlineRequestFrontend(dom){ |
||||
$(dom).blur(); |
||||
$(dom).attr('disabled', 'disabled'); |
||||
if (loader) loader.destroy(); |
||||
loader = new Loader($('#loader').get(0)); |
||||
} |
||||
|
||||
function inputIsValid(type){ |
||||
let valid = true; |
||||
$('.error-label').html(''); |
||||
if (type === 'create'){ |
||||
if ($('#player-name > input').val() === ''){ |
||||
valid = false; |
||||
$('#player-name > .error-label').html('Please enter a name!'); |
||||
} |
||||
} |
||||
if (type === 'join'){ |
||||
if ($('#player-name > input').val() === ''){ |
||||
valid = false; |
||||
$('#player-name > .error-label').html('Please enter a name!'); |
||||
} |
||||
if ($('#lobby-code > input').val() === ''){ |
||||
valid = false; |
||||
$('#lobby-code > .error-label').html('Please enter your code!'); |
||||
} |
||||
} |
||||
return valid; |
||||
} |
@ -0,0 +1,8 @@ |
||||
{ |
||||
"collision": false, |
||||
"colorPicker": false, |
||||
"cookie": true, |
||||
"loader": true, |
||||
"prototypes": true, |
||||
"technical": true |
||||
} |
@ -0,0 +1,3 @@ |
||||
{ |
||||
|
||||
} |
@ -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; |
||||
} |
Binary file not shown.
@ -0,0 +1,88 @@ |
||||
input[type=range] { |
||||
-webkit-appearance: none; |
||||
margin: 18px 0; |
||||
width: 100%; |
||||
} |
||||
input[type=range]:focus { |
||||
outline: none; |
||||
} |
||||
input[type=range]::-webkit-slider-runnable-track { |
||||
width: 100%; |
||||
height: 8.4px; |
||||
cursor: pointer; |
||||
animate: 0.2s; |
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; |
||||
background: #3071a9; |
||||
border-radius: 1.3px; |
||||
border: 0.2px solid #010101; |
||||
} |
||||
input[type=range]::-webkit-slider-thumb { |
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; |
||||
border: 1px solid #000000; |
||||
height: 36px; |
||||
width: 16px; |
||||
border-radius: 3px; |
||||
background: #ffffff; |
||||
cursor: pointer; |
||||
-webkit-appearance: none; |
||||
margin-top: -14px; |
||||
} |
||||
input[type=range]:focus::-webkit-slider-runnable-track { |
||||
background: #367ebd; |
||||
} |
||||
input[type=range]::-moz-range-track { |
||||
width: 100%; |
||||
height: 8.4px; |
||||
cursor: pointer; |
||||
animate: 0.2s; |
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; |
||||
background: #3071a9; |
||||
border-radius: 1.3px; |
||||
border: 0.2px solid #010101; |
||||
} |
||||
input[type=range]::-moz-range-thumb { |
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; |
||||
border: 1px solid #000000; |
||||
height: 36px; |
||||
width: 16px; |
||||
border-radius: 3px; |
||||
background: #ffffff; |
||||
cursor: pointer; |
||||
} |
||||
input[type=range]::-ms-track { |
||||
width: 100%; |
||||
height: 8.4px; |
||||
cursor: pointer; |
||||
animate: 0.2s; |
||||
background: transparent; |
||||
border-color: transparent; |
||||
border-width: 16px 0; |
||||
color: transparent; |
||||
} |
||||
input[type=range]::-ms-fill-lower { |
||||
background: #2a6495; |
||||
border: 0.2px solid #010101; |
||||
border-radius: 2.6px; |
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; |
||||
} |
||||
input[type=range]::-ms-fill-upper { |
||||
background: #3071a9; |
||||
border: 0.2px solid #010101; |
||||
border-radius: 2.6px; |
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; |
||||
} |
||||
input[type=range]::-ms-thumb { |
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; |
||||
border: 1px solid #000000; |
||||
height: 36px; |
||||
width: 16px; |
||||
border-radius: 3px; |
||||
background: #ffffff; |
||||
cursor: pointer; |
||||
} |
||||
input[type=range]:focus::-ms-fill-lower { |
||||
background: #3071a9; |
||||
} |
||||
input[type=range]:focus::-ms-fill-upper { |
||||
background: #367ebd; |
||||
} |
@ -0,0 +1,23 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js" type="text/javascript"></script> |
||||
<script src="https://code.jquery.com/jquery-3.6.4.min.js" type="text/javascript"></script> |
||||
<script src="data/scripts/init.js" type="text/javascript"></script> |
||||
<script src="data/scripts/events.js" type="text/javascript"></script> |
||||
<script src="data/scripts/online.js" type="text/javascript"></script> |
||||
<script src="data/scripts/flower.js" type="text/javascript"></script> |
||||
<script src="data/scripts/heart.js" type="text/javascript"></script> |
||||
<link href="styles.css" rel="stylesheet"> |
||||
<link href="data/styles/color_picker.css" rel="stylesheet"> |
||||
<link href="data/styles/range_input.css" rel="stylesheet"> |
||||
<title>I love you ♥</title> |
||||
</head> |
||||
<body> |
||||
<div id="p5_loading"></div> |
||||
<div id="content"> |
||||
<div id="canvas-holder"></div> |
||||
</div> |
||||
</body> |
||||
</html> |
@ -0,0 +1,49 @@ |
||||
a:link, a:hover, a:active, a:visited{color: #000;} |
||||
|
||||
html, body{margin: 0; padding: 0; height: 100%; width: 100%;} |
||||
|
||||
canvas{margin: 0; padding: 0; border: none; display: block;} |
||||
|
||||
button:hover{cursor: pointer;} |
||||
|
||||
@font-face{ |
||||
font-family: "Rametto"; |
||||
src: url("data/styles/font.ttf"); |
||||
} |
||||
|
||||
*{ |
||||
font-family: "Rametto"; |
||||
color: #000; |
||||
font-size: 17px; |
||||
} |
||||
|
||||
:root{ |
||||
--width: 100vw; |
||||
--height: 100vh; |
||||
} |
||||
|
||||
body{ |
||||
overflow: hidden; |
||||
} |
||||
|
||||
/** |
||||
* Standard styles |
||||
*/ |
||||
|
||||
#canvas-holder{ |
||||
position: relative; |
||||
width: var(--width); |
||||
height: var(--height); |
||||
} |
||||
#canvas-holder canvas{ |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
border-radius: inherit; |
||||
} |
||||
#p5_loading{ |
||||
display: none; |
||||
} |
||||
|
After Width: | Height: | Size: 20 KiB |
Loading…
Reference in new issue