Compare commits
No commits in common. "aa565d98a6fed4479441992a9cacf8d27bc4ed64" and "a6a8792905e8c049143ab6baa718f2528815c2db" have entirely different histories.
aa565d98a6
...
a6a8792905
|
@ -3,6 +3,3 @@ app.wat
|
||||||
png2c
|
png2c
|
||||||
penger.c
|
penger.c
|
||||||
hand.c
|
hand.c
|
||||||
index.html
|
|
||||||
museum.c
|
|
||||||
pengers.h
|
|
||||||
|
|
34
app.c
|
@ -1,4 +1,4 @@
|
||||||
#include "pengers.h"
|
#include "penger.c"
|
||||||
#include "hand.c"
|
#include "hand.c"
|
||||||
|
|
||||||
#define GREEN 0xff00ff00
|
#define GREEN 0xff00ff00
|
||||||
|
@ -11,7 +11,6 @@
|
||||||
const unsigned int width = 800;
|
const unsigned int width = 800;
|
||||||
const unsigned int height = 600;
|
const unsigned int height = 600;
|
||||||
unsigned int BUFFER[width * height];
|
unsigned int BUFFER[width * height];
|
||||||
int id = 0;
|
|
||||||
|
|
||||||
// importer depuis js
|
// importer depuis js
|
||||||
int get_scale(void);
|
int get_scale(void);
|
||||||
|
@ -98,20 +97,20 @@ int rand(int min, int max)
|
||||||
void rebondi(v2 *pos, int scale)
|
void rebondi(v2 *pos, int scale)
|
||||||
{
|
{
|
||||||
float div = -1.5;
|
float div = -1.5;
|
||||||
if (pos->x - pengers_width[id]*scale/2 < 0) {
|
if (pos->x - penger_width*scale/2 < 0) {
|
||||||
pos->x = pengers_width[id]*scale/2;
|
pos->x = penger_width*scale/2;
|
||||||
velocity.x /= div;
|
velocity.x /= div;
|
||||||
}
|
}
|
||||||
if (pos->y - pengers_height[id]*scale/2 < 0) {
|
if (pos->y - penger_height*scale/2 < 0) {
|
||||||
pos->y = pengers_height[id]*scale/2;
|
pos->y = penger_height*scale/2;
|
||||||
velocity.y /= div;
|
velocity.y /= div;
|
||||||
}
|
}
|
||||||
if (pos->x + pengers_width[id]*scale/2 >= width) {
|
if (pos->x + penger_width*scale/2 >= width) {
|
||||||
pos->x = width - pengers_width[id]*scale/2;
|
pos->x = width - penger_width*scale/2;
|
||||||
velocity.x /= div;
|
velocity.x /= div;
|
||||||
}
|
}
|
||||||
if (pos->y + pengers_height[id]*scale/2 >= height) {
|
if (pos->y + penger_height*scale/2 >= height) {
|
||||||
pos->y = height - pengers_height[id]*scale/2;
|
pos->y = height - penger_height*scale/2;
|
||||||
velocity.y /= div;
|
velocity.y /= div;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -124,7 +123,6 @@ int collision(v2 point, int x, int y, int w, int h)
|
||||||
|
|
||||||
void init()
|
void init()
|
||||||
{
|
{
|
||||||
pengers_init();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
void draw(float dt)
|
void draw(float dt)
|
||||||
|
@ -133,8 +131,8 @@ void draw(float dt)
|
||||||
|
|
||||||
// position du penger en haut a gauche de l'image
|
// position du penger en haut a gauche de l'image
|
||||||
v2 penger_origin = {0};
|
v2 penger_origin = {0};
|
||||||
penger_origin.x = penger_pos.x - pengers_width[id]*scale/2;
|
penger_origin.x = penger_pos.x - penger_width*scale/2;
|
||||||
penger_origin.y = penger_pos.y - pengers_height[id]*scale/2;
|
penger_origin.y = penger_pos.y - penger_height*scale/2;
|
||||||
|
|
||||||
// jump
|
// jump
|
||||||
if (keys[SPACE]) {
|
if (keys[SPACE]) {
|
||||||
|
@ -143,7 +141,7 @@ void draw(float dt)
|
||||||
}
|
}
|
||||||
|
|
||||||
// mouse push
|
// mouse push
|
||||||
if (collision(mouse, penger_origin.x, penger_origin.y, pengers_width[id]*scale, pengers_height[id]*scale)) {
|
if (collision(mouse, penger_origin.x, penger_origin.y, penger_width*scale, penger_height*scale)) {
|
||||||
v2 force = v2_diff(penger_pos, mouse);
|
v2 force = v2_diff(penger_pos, mouse);
|
||||||
force = v2_normalize(force);
|
force = v2_normalize(force);
|
||||||
force = v2_scale(force, 5);
|
force = v2_scale(force, 5);
|
||||||
|
@ -187,9 +185,9 @@ void draw(float dt)
|
||||||
rebondi(&penger_pos, scale);
|
rebondi(&penger_pos, scale);
|
||||||
|
|
||||||
// dessine le penger sur le canva
|
// dessine le penger sur le canva
|
||||||
for (int y = 0; y < pengers_height[id]; y++) {
|
for (int y = 0; y < penger_height; y++) {
|
||||||
for (int i = 0; i < pengers_width[id]; i++) {
|
for (int i = 0; i < penger_width; i++) {
|
||||||
if (pengers_img[id][y*pengers_width[id] + i] <= 0x00FFFFFF) // pixel transparant
|
if (penger_img[y][i] <= 0x00FFFFFF) // pixel transparant
|
||||||
continue;
|
continue;
|
||||||
for (int s1 = 0; s1 < scale; s1++) {
|
for (int s1 = 0; s1 < scale; s1++) {
|
||||||
for (int s2 = 0; s2 < scale; s2++) {
|
for (int s2 = 0; s2 < scale; s2++) {
|
||||||
|
@ -197,7 +195,7 @@ void draw(float dt)
|
||||||
int idx_y = penger_origin.y + y*scale+s2;
|
int idx_y = penger_origin.y + y*scale+s2;
|
||||||
if (idx_x < 0 || idx_x >= width || idx_y < 0 || idx_y >= height)
|
if (idx_x < 0 || idx_x >= width || idx_y < 0 || idx_y >= height)
|
||||||
continue;
|
continue;
|
||||||
BUFFER[idx_y*width + idx_x] = pengers_img[id][y*pengers_width[id] + i];
|
BUFFER[idx_y*width + idx_x] = penger_img[y][i];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
34
build.sh
|
@ -1,6 +1,6 @@
|
||||||
#!/bin/bash
|
#!/bin/bash
|
||||||
|
|
||||||
export_sym="init draw key_pressed key_released set_velocity set_mouse BUFFER width height id"
|
export_sym="init draw key_pressed key_released set_velocity set_mouse BUFFER width height"
|
||||||
export_cmd=""
|
export_cmd=""
|
||||||
for e in $export_sym; do
|
for e in $export_sym; do
|
||||||
export_cmd="$export_cmd -Wl,--export=$e";
|
export_cmd="$export_cmd -Wl,--export=$e";
|
||||||
|
@ -14,38 +14,10 @@ else
|
||||||
a=$1
|
a=$1
|
||||||
fi
|
fi
|
||||||
|
|
||||||
#set -xe
|
set -xe
|
||||||
|
|
||||||
clang png2c.c -o png2c -lm
|
clang png2c.c -o png2c -lm
|
||||||
mkdir -p museum.c
|
./png2c "penger.png" > penger.c
|
||||||
rm -f museum.c/*
|
|
||||||
|
|
||||||
pengers_html=$'\n'
|
|
||||||
pengers_include=$'\n'
|
|
||||||
id=0
|
|
||||||
for p in $(ls museum); do
|
|
||||||
file=$(echo $p | sed "s/\.png$//g")
|
|
||||||
./png2c "museum/"$p $id > museum.c/$file.c
|
|
||||||
pengers_html+=$' <img src="museum/'$p'" class="penger-img" penger-id="'$id'"></img>\n'
|
|
||||||
pengers_include+='#include "museum.c/'$file$'.c"\n'
|
|
||||||
((id=id+1))
|
|
||||||
done
|
|
||||||
|
|
||||||
echo "int pengers_height[$id];" > pengers.h
|
|
||||||
echo "int pengers_width[$id];" >> pengers.h
|
|
||||||
echo "unsigned int *pengers_img[$id];" >> pengers.h
|
|
||||||
echo "$pengers_include" >> pengers.h
|
|
||||||
echo "void pengers_init(void) {" >> pengers.h
|
|
||||||
((id=id-1))
|
|
||||||
for i in $(seq 0 $id); do
|
|
||||||
echo " penger_init_$i();" >> pengers.h;
|
|
||||||
done
|
|
||||||
echo "}" >> pengers.h
|
|
||||||
|
|
||||||
echo -e "$pengers_html" > pengers_image.html.temp
|
|
||||||
sed -e '/Choose your penger:/rpengers_image.html.temp' index.html.template > index.html
|
|
||||||
rm pengers_image.html.temp
|
|
||||||
|
|
||||||
./png2c "hand.png" > hand.c
|
./png2c "hand.png" > hand.c
|
||||||
|
|
||||||
clang -O2 --target=wasm32 -fno-builtin -nostdlib --no-standard-libraries -Wl,--no-entry $export_cmd -Wl,--allow-undefined -o $f.wasm $a
|
clang -O2 --target=wasm32 -fno-builtin -nostdlib --no-standard-libraries -Wl,--no-entry $export_cmd -Wl,--allow-undefined -o $f.wasm $a
|
||||||
|
|
|
@ -0,0 +1,23 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="load.js"></script>
|
||||||
|
<style>
|
||||||
|
#demo-canvas:hover {
|
||||||
|
cursor: none
|
||||||
|
};
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<canvas id="demo-canvas"></canvas>
|
||||||
|
<br>
|
||||||
|
<p id='scale'></p>
|
||||||
|
<button id='descaling'>scale - 1</button>
|
||||||
|
<button id='scaling'>scale + 1</button>
|
||||||
|
<button id='reset'>reset velocity</button>
|
||||||
|
<br>
|
||||||
|
<p>Press arrow key to move</p>
|
||||||
|
<p>Press space key to jump</p>
|
||||||
|
<p>Penger is afraid of your stinky hand</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -1,50 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<script src="load.js"></script>
|
|
||||||
<style>
|
|
||||||
#demo-canvas:hover {
|
|
||||||
cursor: none
|
|
||||||
}
|
|
||||||
.penger-img {
|
|
||||||
width: 64px;
|
|
||||||
image-rendering: pixelated;
|
|
||||||
}
|
|
||||||
@media screen and (min-width: calc(800px + calc(64px * 4))) {
|
|
||||||
body {
|
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
#left {
|
|
||||||
float: left;
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
#right {
|
|
||||||
float: right;
|
|
||||||
width: calc(100% - 800px - 25px);
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
right: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="left">
|
|
||||||
<canvas id="demo-canvas"></canvas>
|
|
||||||
<br>
|
|
||||||
<button id='descaling'>scale - 1</button>
|
|
||||||
<button id='scaling'>scale + 1</button>
|
|
||||||
<button id='reset'>reset velocity</button>
|
|
||||||
<br>
|
|
||||||
<p id='scale'></p>
|
|
||||||
<p>Press arrow key to move</p>
|
|
||||||
<p>Press space key to jump</p>
|
|
||||||
<p>Penger is afraid of your stinky hand</p>
|
|
||||||
</div>
|
|
||||||
<div id="right">
|
|
||||||
<h3>Choose your penger:</h3>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
12
load.js
|
@ -7,10 +7,6 @@ function wasm_variable(name)
|
||||||
{
|
{
|
||||||
return global_memory[global_instance.exports[name].value / 4];
|
return global_memory[global_instance.exports[name].value / 4];
|
||||||
}
|
}
|
||||||
function wasm_set_variable(name, val)
|
|
||||||
{
|
|
||||||
return global_memory[global_instance.exports[name].value / 4] = val;
|
|
||||||
}
|
|
||||||
function wasm_function(name)
|
function wasm_function(name)
|
||||||
{
|
{
|
||||||
return global_instance.exports[name];
|
return global_instance.exports[name];
|
||||||
|
@ -22,7 +18,6 @@ window.onload = () => {
|
||||||
var scale_p = document.getElementById("scale");
|
var scale_p = document.getElementById("scale");
|
||||||
var reset_but = document.getElementById("reset");
|
var reset_but = document.getElementById("reset");
|
||||||
var canvas = document.getElementById("demo-canvas");
|
var canvas = document.getElementById("demo-canvas");
|
||||||
var pengers_img = document.getElementsByClassName('penger-img');
|
|
||||||
scale_p.innerText = "scale: " + scale;
|
scale_p.innerText = "scale: " + scale;
|
||||||
scale_but.onclick = () => {
|
scale_but.onclick = () => {
|
||||||
scale++;
|
scale++;
|
||||||
|
@ -39,9 +34,6 @@ window.onload = () => {
|
||||||
var r = canvas.getBoundingClientRect();
|
var r = canvas.getBoundingClientRect();
|
||||||
wasm_function('set_mouse')(e.clientX - r.x, e.clientY - r.y);
|
wasm_function('set_mouse')(e.clientX - r.x, e.clientY - r.y);
|
||||||
}
|
}
|
||||||
for (var i = 0; i < pengers_img.length; i++) {
|
|
||||||
pengers_img[i].onclick = (e) => {wasm_set_variable('id', e.target.getAttribute('penger-id'))}
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
(async() => {
|
(async() => {
|
||||||
|
@ -98,7 +90,6 @@ wasm_function('init')();
|
||||||
|
|
||||||
let prev = null;
|
let prev = null;
|
||||||
function first(timestamp) {
|
function first(timestamp) {
|
||||||
wasm_set_variable('id', Math.random() * document.getElementsByClassName('penger-img').length);
|
|
||||||
prev = timestamp;
|
prev = timestamp;
|
||||||
wasm_function('draw')(0.16);
|
wasm_function('draw')(0.16);
|
||||||
window.requestAnimationFrame(loop);
|
window.requestAnimationFrame(loop);
|
||||||
|
@ -115,9 +106,6 @@ window.requestAnimationFrame(first);
|
||||||
|
|
||||||
addEventListener('keydown', (e) => {
|
addEventListener('keydown', (e) => {
|
||||||
wasm_function('key_pressed')(e.keyCode);
|
wasm_function('key_pressed')(e.keyCode);
|
||||||
if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
addEventListener('keyup', (e) => {
|
addEventListener('keyup', (e) => {
|
||||||
|
|
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 5.2 KiB |
Before Width: | Height: | Size: 4.9 KiB |
Before Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 728 B |
Before Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.8 KiB |
Before Width: | Height: | Size: 4.8 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.8 KiB |
Before Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 5.3 KiB |
BIN
museum/Fesh.png
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 5.3 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 5.1 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 5.7 KiB |
Before Width: | Height: | Size: 5.0 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 5.3 KiB |
Before Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 550 B |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 535 B |
Before Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 5.2 KiB |
Before Width: | Height: | Size: 4.6 KiB |
BIN
museum/P_.png
Before Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.5 KiB |
BIN
museum/Pe.png
Before Width: | Height: | Size: 2.2 KiB |
BIN
museum/Peng.png
Before Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 5.1 KiB |
Before Width: | Height: | Size: 500 B |
Before Width: | Height: | Size: 4.9 KiB |
Before Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 391 B |
Before Width: | Height: | Size: 5.9 KiB |
Before Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.4 KiB |