work in progress
This commit is contained in:
parent
25851bcd3c
commit
3e12c37460
|
@ -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>
|
||||
|
|
29
src/index.ts
29
src/index.ts
|
@ -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()
|
||||
})();
|
||||
|
|
60
src/lib.rs
60
src/lib.rs
|
@ -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
|
||||
}
|
||||
|
|
114
src/lib.ts
114
src/lib.ts
|
@ -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 };
|
||||
|
||||
|
|
Loading…
Reference in New Issue