Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #39532 > unrolled thread

Picture colors decreasing script.

Back to article view | Back to comp.lang.javascript

Contents

  Picture colors decreasing script. Kristjan Robam <kristjanrobam01@mail.ee> - 2021-02-28 22:33 -0800
    Re: Picture colors decreasing script. "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2021-03-01 11:56 -0800
      Re: Picture colors decreasing script. Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2021-03-02 13:42 +0100
        Re: Picture colors decreasing script. "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2021-03-03 07:02 -0800
          Re: Picture colors decreasing script. Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2021-03-03 19:47 +0100
            Re: Picture colors decreasing script. "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2021-03-03 11:37 -0800
              Re: Picture colors decreasing script. Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2021-03-03 21:33 +0100
                Re: Picture colors decreasing script. "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2021-03-03 12:38 -0800
                  Re: Picture colors decreasing script. Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2021-03-03 21:53 +0100
                    Re: Picture colors decreasing script. "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2021-03-03 16:36 -0800
                      Re: Picture colors decreasing script. Ben Bacarisse <ben.usenet@bsb.me.uk> - 2021-03-04 02:07 +0000
            Re: Picture colors decreasing script. John G Harris <niam@jghnorth.org.uk.invalid> - 2021-03-04 09:40 +0000

#39532 — Picture colors decreasing script.

<html>
<body>
<canvas id="canvas" width="500" height="597"></canvas>
<p></p>

<div style="display:none;">
<img id="y" src="y.bmp" width="500" height="597">
</div>


<script>

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = document.getElementById('y');

img.addEventListener('load', e => {
ctx.drawImage(img, 0, 0);
var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);


var y00=[];
y00.length=imgData.data.length;

for (var i = 0; i < imgData.data.length; i += 4) {
    y00[i]=0;
}

for (var i = 0; i < imgData.data.length; i += 4) {
   if(y00[i]==1) continue;   
   var a1=imgData.data[i];
   var a2=imgData.data[i+1];
   var a3=imgData.data[i+2];
   var a4=imgData.data[i+3];

for (var i2 = i+4; i2 < imgData.data.length; i2 += 4) {
   if(y00[i2]==1) continue;
   var a12=imgData.data[i2];
   var a22=imgData.data[i2+1];
   var a32=imgData.data[i2+2];
   var a42=imgData.data[i2+3];
   if(Math.abs(a1*a1+a2*a2+a3*a3+a4*a4-(a12*a12+a22*a22+a32*a32+a42*a42))<5) {
   imgData.data[i2]=imgData.data[i];
   imgData.data[i2+1]=imgData.data[i+1];
   imgData.data[i2+2]=imgData.data[i+2];
   imgData.data[i2+3]=imgData.data[i+3];
   y00[i2]=1;
   }

}

}


ctx.putImageData(imgData, 0, 0);
});

function renewingorder(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  while (0 !== currentIndex) {

    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}


</script>
</body>
</html>





Kristjan Robam

[toc] | [next] | [standalone]

#39538

On Monday, March 1, 2021 at 12:34:01 AM UTC-6, Kristjan Robam wrote:
> <html> 
> [...]
> </html> 

If you're just wanting to present code without comment, would you at least post it to
a service such as <http://codepen.io/> so that the rest of us don't have to spend
the time executing it ourselves? If you don't I doubt you'll get much of a commentary.

Some quick remarks:

```
<div style="display:none;">
<img id="y" src="y.bmp" width="500" height="597">
</div>
...
var img = document.getElementById('y');
img.addEventListener('load', ...)
```

You can replace that with:

```
let y= new Image(500, 597)
y.addEventListener('load', ...)
y.src = 'y.bmp'
```

Also for readability the following:

```
var a1=imgData.data[i];
var a2=imgData.data[i+1];
var a3=imgData.data[i+2];
var a4=imgData.data[i+3];
```

I think can be replaced with:

```
let {data} = imgData
...
let [r,g,b,a] = [data[i], data[i+1], data[i+2], data[i+3]]
```
and later on the same.


A power operator exists, so x*x becomes x**2 which may be helpful in your sum of squares below:

```
a1*a1+a2*a2+a3*a3+a4*a4-(a12*a12+a22*a22+a32*a32+a42*a42)
```

becoming:

```
a1*2 + a2**2 + a3**2 + a4**2 - (a12**2 + a22**2 + a32**2 + a42**2)
```

I'm a little suspicious of what's going on in general though here but I'll have to leave my comments as-is due to time constraints.

[toc] | [prev] | [next] | [standalone]

#39540

Michael Haufe (TNO) wrote:

> Also for readability the following:
> 
> ```
> var a1=imgData.data[i];
> var a2=imgData.data[i+1];
> var a3=imgData.data[i+2];
> var a4=imgData.data[i+3];
> ```
> 
> I think can be replaced with:
> 
> ```
> let {data} = imgData
> let [r,g,b,a] = [data[i], data[i+1], data[i+2], data[i+3]]
> ```

let [r,g,b,a] = data.slice(i, i + 4);

:)

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#39555

On Tuesday, March 2, 2021 at 6:42:26 AM UTC-6, Thomas 'PointedEars' Lahn wrote:
> Michael Haufe (TNO) wrote: 
> 
> > Also for readability the following: 
> > 
> > ``` 
> > var a1=imgData.data[i]; 
> > var a2=imgData.data[i+1]; 
> > var a3=imgData.data[i+2]; 
> > var a4=imgData.data[i+3]; 
> > ``` 
> > 
> > I think can be replaced with: 
> > 
> > ``` 
> > let {data} = imgData
> > let [r,g,b,a] = [data[i], data[i+1], data[i+2], data[i+3]] 
> > ```
> let [r,g,b,a] = data.slice(i, i + 4); 
> 
> :) 

Yes, that's shorter but when dealing with ImageData in a loop you definitely don't want to do this due to the significant performance penalty (at least an order of magnitude).

One could also perform a direct destructuring via an object pattern:

```
let {[i]:r,[i+1]:g,[i+2]:b,[i+3]:a} = data
```

While this is cute, again this is far worse in performance than my slightly more verbose example.

<https://jsbench.me/ulkltk1xpk>

[toc] | [prev] | [next] | [standalone]

#39556

Michael Haufe (TNO) wrote:

> On Tuesday, March 2, 2021 at 6:42:26 AM UTC-6, Thomas 'PointedEars' Lahn
> wrote:
>> Michael Haufe (TNO) wrote:
>> > Also for readability the following:
>> > 
>> > ```
>> > var a1=imgData.data[i];
>> > var a2=imgData.data[i+1];
>> > var a3=imgData.data[i+2];
>> > var a4=imgData.data[i+3];
>> > ```
>> > 
>> > I think can be replaced with:
>> > 
>> > ```
>> > let {data} = imgData
>> > let [r,g,b,a] = [data[i], data[i+1], data[i+2], data[i+3]]
>> > ```
>> let [r,g,b,a] = data.slice(i, i + 4);
>> 
>> :)
> 
> Yes, that's shorter but when dealing with ImageData in a loop you
> definitely don't want to do this due to the significant performance
> penalty (at least an order of magnitude).

What is the functional difference between your code and mine?

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#39557

On Wednesday, March 3, 2021 at 12:47:12 PM UTC-6, Thomas 'PointedEars' Lahn wrote:
> What is the functional difference between your code and mine?

You're calling slice obviously. If you mean what's the semantic difference: nothing. It's the same.

What matters more in this context would be performance.

[toc] | [prev] | [next] | [standalone]

#39559

Michael Haufe (TNO) wrote:

> On Wednesday, March 3, 2021 at 12:47:12 PM UTC-6, Thomas 'PointedEars'
> Lahn wrote:
>> What is the functional difference between your code and mine?
> 
> You're calling slice obviously. If you mean what's the semantic
> difference: nothing. It's the same.

No, I was asking about the *functional* difference.
 
> What matters more in this context would be performance.

Why do you think that .slice() would perform worse than accessing individual 
consecutive items directly?

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#39560

On Wednesday, March 3, 2021 at 2:33:42 PM UTC-6, Thomas 'PointedEars' Lahn wrote:
> Michael Haufe (TNO) wrote: 
> 
> > On Wednesday, March 3, 2021 at 12:47:12 PM UTC-6, Thomas 'PointedEars' 
> > Lahn wrote: 
> >> What is the functional difference between your code and mine? 
> > 
> > You're calling slice obviously. If you mean what's the semantic 
> > difference: nothing. It's the same.
> No, I was asking about the *functional* difference.
> > What matters more in this context would be performance.
> Why do you think that .slice() would perform worse than accessing individual 
> consecutive items directly?

I don't think, I know. You left out the relevant link in your quote:

<https://jsbench.me/ulkltk1xpk>

[toc] | [prev] | [next] | [standalone]

#39561

Michael Haufe (TNO) wrote:

> On Wednesday, March 3, 2021 at 2:33:42 PM UTC-6, Thomas 'PointedEars' Lahn
> wrote:
>> Michael Haufe (TNO) wrote:
>> > On Wednesday, March 3, 2021 at 12:47:12 PM UTC-6, Thomas 'PointedEars'
>> > Lahn wrote:
>> >> What is the functional difference between your code and mine?
>> > 
>> > You're calling slice obviously. If you mean what's the semantic
>> > difference: nothing. It's the same.
>> No, I was asking about the *functional* difference.
>> > What matters more in this context would be performance.
>> Why do you think that .slice() would perform worse than accessing
>> individual consecutive items directly?
> 
> I don't think, I know. You left out the relevant link in your quote:
>
> <https://jsbench.me/ulkltk1xpk>

Fascinating; slicing is 93.08 % slower than direct access.  But why?

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#39564

On Wednesday, March 3, 2021 at 2:53:26 PM UTC-6, Thomas 'PointedEars' Lahn wrote:
> Michael Haufe (TNO) wrote: 
> > <https://jsbench.me/ulkltk1xpk>
> Fascinating; slicing is 93.08 % slower than direct access. But why?

Given the steps slice takes, this should not be surprising:

<https://tc39.es/ecma262/#sec-array.prototype.slice>

Direct access is O(1)

`slice` is O(N) where N is end - start

Thus an order of magnitude worse.

[toc] | [prev] | [next] | [standalone]

#39565

"Michael Haufe (TNO)" <tno@thenewobjective.com> writes:

> On Wednesday, March 3, 2021 at 2:53:26 PM UTC-6, Thomas 'PointedEars' Lahn wrote:
>> Michael Haufe (TNO) wrote: 
>> > <https://jsbench.me/ulkltk1xpk>
>> Fascinating; slicing is 93.08 % slower than direct access. But why?
>
> Given the steps slice takes, this should not be surprising:
>
> <https://tc39.es/ecma262/#sec-array.prototype.slice>
>
> Direct access is O(1)
>
> `slice` is O(N) where N is end - start

Isn't that O(1) for the case in question?  (Big O might be too crude a
measure for this.)

> Thus an order of magnitude worse.

-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#39567

On Wed, 03 Mar 2021 19:47:03 +0100, Thomas 'PointedEars' Lahn
<PointedEars@web.de> wrote:

>Michael Haufe (TNO) wrote:
  <snip>
>What is the functional difference between your code and mine?

In Systems Analysis there are 'functional' requirments and
'non-functional' requirements. Speed is a 'non-functional'
requirement, however important.

  John

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web