work in progress

This commit is contained in:
lelgenio 2020-11-17 22:56:00 -03:00
parent 25851bcd3c
commit 3e12c37460
4 changed files with 186 additions and 23 deletions

View File

@ -14,11 +14,15 @@
<h1>Js vs Rust</h1>
<input type="file" id="inputFile">
<h2>linguagem:</h2>
<button id="runBtnJs">JavaScript</button>
<button id="shufBtnJs">Js shuf</button>
<button id="sortBtnJs">Js sort</button>
<button id="runBtnRust">Rust</button>
<button id="shufBtnRust">Rust shuf</button>
<canvas id="drawing" width="600" height="600"> </canvas>
<button id="sortBtnRust">Rust sort</button>
<canvas id="drawing" width="400" height="400"> </canvas>
<footer>
<a href="doc.html">Trabalho escrito</a>
</footer>

View File

@ -1,20 +1,27 @@
import init, { draw_rs, shuffle_rs } from './wasm/wasm.js';
import { draw_ts } from './lib.js';
import init, { draw_rs, shuffle_rs, sort_rs} from './wasm/wasm.js';
import { draw_ts, shuffle_ts, sort_ts, read_image } from './lib.js';
function btn_fn(id: string, fun: Function){
document.getElementById(id)?.addEventListener("click",()=>{
fun();
})
}
(async () => {
await init();
document.getElementById("runBtnRust")?.addEventListener("click",()=>{
draw_rs();
})
document.getElementById("shufBtnRust")?.addEventListener("click",()=>{
shuffle_rs();
})
btn_fn("runBtnRust", draw_rs);
btn_fn("shufBtnRust", shuffle_rs);
btn_fn("sortBtnRust", sort_rs);
btn_fn("runBtnJs", draw_ts);
btn_fn("shufBtnJs", shuffle_ts);
btn_fn("sortBtnJs", sort_ts);
document.getElementById("runBtnJs")?.addEventListener("click",()=>{
draw_ts();
})
draw_ts();
// shuffle_rs();
// sort_rs();
read_image()
})();

View File

@ -73,6 +73,66 @@ pub fn shuffle_rs() -> Result<(), JsValue> {
Ok(())
}
#[wasm_bindgen]
pub fn sort_rs() -> Result<(), JsValue> {
let canvas = canvas::Canvas::get_by_id("drawing");
let width = canvas.canvas.width();
let height = canvas.canvas.height();
let mut data: Vec<u8> = canvas.data();
let mut sorted = false;
let (mut x, mut y, mut p1, mut p2);
while !sorted {
sorted = true;
y = 0;
while y < height {
x = 0;
while x < width - 1 {
p1 = coor_to_liner(x, y, width);
p2 = coor_to_liner(x + 1, y, width);
let c1 = Pixel::from_data_and_xy(&data, p1);
let c2 = Pixel::from_data_and_xy(&data, p2);
if c1.r > c2.r && c1.g > c2.g {
swap_pixel(&mut data, p1, p2);
sorted = false;
}
// if c1.b{
// swap_pixel(&mut data, p1, p2);
// sorted = false;
// }
x += 1;
}
y += 1;
}
}
log!("done");
canvas.set_data(&mut data, width);
Ok(())
}
struct Pixel {
r: u8,
g: u8,
b: u8,
}
impl Pixel {
fn from_data_and_xy(data: &Vec<u8>, ord: usize) -> Self {
Self {
r: data[ord],
g: data[ord + 1],
b: data[ord + 2],
}
}
}
fn coor_to_liner(x: u32, y: u32, width: u32) -> usize {
(x * 4 + y * width * 4) as usize
}

View File

@ -42,35 +42,124 @@ function shuffle_ts() {
const width = myImageData.width,
height = myImageData.height;
const data = myImageData.data;
for (let x = 0; x < width; x++)
for (let y = 0; y < height; y++) {
let p1 = coor_to_liner(x, y, width);
let p1 = xy_to_lin(x, y, width);
let ox = rand_int(0, width);
let oy = rand_int(0, height);
let p2 = coor_to_liner(ox, oy, width);
console.log(ox)
let p2 = xy_to_lin(ox, oy, width);
swap_pixel(myImageData.data, p1, p2);
}
for (let x = 0; x < width * height / 2; x++)
data[x] = data[data.length / 2 + x];
ctx.putImageData(myImageData, 0, 0)
}
export { draw_ts, shuffle_ts };
function read_image() {
const canvas = document.getElementById("drawing") as HTMLCanvasElement;
const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
var fileElement = document.getElementById("inputFile") as HTMLInputElement;
var reader = new FileReader();
fileElement.onchange = () => {
if (fileElement.files && fileElement.files.length > 0) {
reader.readAsDataURL(fileElement.files[0]);
reader.onload = (e) => {
var img = new Image();
img.onload = () => {
// canvas.width = img.width;
// canvas.height= img.height;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}
img.src = e.target?.result as string;
}
function coor_to_liner(x: number, y: number, width: number): number {
}
}
}
function sort_ts() {
var beginTime = Date.now()
const canvas = document.getElementById("drawing") as HTMLCanvasElement;
const ctx = canvas.getContext("2d") as CanvasRenderingContext2D
var myImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const width = myImageData.width,
height = myImageData.height;
const data = myImageData.data;
for (let i = 0; i < 10; i++)
for (let x = 0; x < width; x++)
for (let y = 1; y < height; y++) {
let p5 = xy_to_lin(x, y, width);
let p6 = xy_to_lin(x + 1, y, width);
let p8 = xy_to_lin(x, y + 1, width);
let c5 = new Color(data, p5);
let c6 = new Color(data, p6);
let c8 = new Color(data, p8);
if (c5.value + c6.value + c8.value < 100 || c5.value - 10 > c8.value && y < height - 2) {
if (c8.value > c5.value && y < height - 2)
swap_pixel(myImageData.data, p5, p8);
else if (c5.r > c6.r && x < width - 1)
swap_pixel(myImageData.data, p5, p6)
// else if (c5.b > c8.b && y < height - 2)
// swap_pixel(myImageData.data, p5, p8);
}
// else if (c5.g > c8.g && y < height - 1)
// swap_pixel(myImageData.data, p5, p8);
// else
// if (avg1 < avg5 && x > 0 && y > 0 )
// swap_pixel(myImageData.data, p5, p1);
}
ctx.putImageData(myImageData, 0, 0);
const endTime = Date.now();
const delta = (endTime - beginTime) / 1000;
console.log(`fps = ${1 / delta}`)
requestAnimationFrame(sort_ts);
}
class Color {
r: number;
g: number;
b: number;
a: number;
value: number;
index: number;
constructor(data: Uint8ClampedArray, i: number) {
this.index = i;
this.r = data[i + 0];
this.g = data[i + 1];
this.b = data[i + 2];
this.a = data[i + 3];
this.value = (this.r + this.g + this.b) / 3
}
save(data: Uint8ClampedArray) {
data[this.index + 0] = this.r;
data[this.index + 1] = this.g;
data[this.index + 2] = this.b;
data[this.index + 3] = this.a;
}
}
function xy_to_lin(x: number, y: number, width: number): number {
return (x * 4 + y * width * 4)
}
function swap_pixel(data: Uint8ClampedArray, p1: number, p2: number) {
if (p2 >= data.length)
return
for (let i = 0; i < 4; i++) {
let tmppix = data[p1 + i];
data[p1 + i] = data[p2 + i];
@ -81,3 +170,6 @@ function swap_pixel(data: Uint8ClampedArray, p1: number, p2: number) {
function rand_int(start: number, end: number): number {
return Math.round(Math.random() * (end - start) + start);
}
export { draw_ts, shuffle_ts, sort_ts, read_image };