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