Randomize Overlaid Circles

[B+]

Feedback: On my Windows 10 system, code does not respond to any normal exits like clicking the X box in top, right corner.

What browser do you use? Firefox complains about busy script sometimes. Chromium works fine. But, I've never tried it on Windows. I replied to Aurel's post that way, because I found his words a bit funny.

I don't know why you have this:

I have no idea. I've translated someone else's example from this topic.

I use FireFox, I can try on Edge.

Yeah, because you are using a translation of my code, I am trying to help you get it right.
I posted another version with RGB color instead RGBF. (above) S = 5, the very first screen, is like a perfect palette display for things to come.

I am pretty sure even if you are color blind you will like the difference because the shadings are missing.

[Aurel]

...so you don't believe...nice but is true.
i open your html file in Opera on win7 then what i see is just black rectangle
which not respond aftter i click on ..that take cca 10 sec then i see drawing 
KMeleone need cca 30 seconds to show drawing

[B+]

Yeah, I have tested it now on Edge, MS browser, and like on FireFox it is runs slow as the dickens.

Again when I try to exit by clicking the top right X box to close, there is no immediate response. There is no indication that my click has been received... I end having to find alternative ways to close the thing.

[B+]

Python (using graphics.py):

Code: [Select]

from graphics import *
xmax = 800
ymax = 600
win = GraphWin('Circles', xmax, ymax)
win.autoflush = False
win.getMouse()
while 1:
s = 500
for x in range(0, xmax + 1):
for y in range(0, ymax + 1):
a = x * s / 600.0
b = y * s / 600.0
c = a * a + b * b
d = c / 2.0
d = d - int(d)
if d < 0.25:
kol = color_rgb(d * 4, 0, 0)
elif d < 0.5:
kol = color_rgb(0, 2 * d, 0)
elif d < 0.75:
kol = color_rgb(0, 0, 4 / 3.0 * d)
else:
kol = color_rgb(255, 0, 0)
win.plot(x, y, kol)
print x
win.flush()
win.getMouse()
if s == 1000:
s = 500
else:
s += 5


OK finally got this working running from Geany and putting import file in same folder.
New color scheme now has full RGB range and some white to brighten screens. For longest time I couldn't figure why screen was getting stuck after first loop. It was because s being reset back to start right after while 1:
These screens take 4-5 minutes to do 800x600 pixels about same speed as JB pixel drawing:

Code: [Select]

from graphics import *
xmax = 800
ymax = 600
win = GraphWin('Circles', xmax, ymax)
win.autoflush = False
s = 35
loop = 1
while 1:
for x in range(0, xmax + 1):
for y in range(0, ymax + 1):
a = x * s / 600.0
b = y * s / 600.0
c = a * a + b * b
d = c / 2.0
d = d - int(d)
d = int(d * 1000)
if d < 250:
kol = color_rgb(d, 0, 0)
elif d < 500:
kol = color_rgb(0, d - 250, 0)
elif d < 750:
kol = color_rgb(0, 0, d - 500)
else:
kol = color_rgb(255, 255, 255)
win.plot(x, y, kol)
if loop == 1:
win.flush()
if loop > 1:
win.flush()
loop += 1
if s == 1000:
s = 5
else:
s += 5
print(s)


[Mike Lobanovsky]

Feedback: On my Windows 10 system, code does not respond to any normal exits like clicking the X box in top, right corner.

Yeah, I have tested it now on Edge, MS browser, and like on FireFox it is runs slow as the dickens.Again when I try to exit by clicking the top right X box to close, there is no immediate response. There is no indication that my click has been received... I end having to find alternative ways to close the thing.

The only sure way to have it running at any reasonable speed would be to change one statement in the function setup() and two statements in the function mouseClicked() in the sketch.js file that you downloaded, to the following:

........
createCanvas(320, 200);
........
for (x = 0; x <= 320; x++) {
  for (y = 0; y <= 200; y++) {
........

JavaScript is terribly slow drawing anything in a bigger canvas. And for each new pattern you have to click again as there's no outer loop that would've made your browser entirely unresponsive with the 800x600 px canvas. And I suspect Tomaaz knew this when uploading the sample...

[B+]

Thanks Mike,

Much more responsive! Check this out:

Code: [Select]

var x, y, s, a, b, c, d, kol, s

function setup() {
createCanvas(320, 200);
background('black');
s = 1000;
}

function mouseClicked() {
if (s == 1000) {
s = 5;
}
else {
s += 5;
}
for (x = 0; x <= 320; x++) {
for (y = 0; y <= 200; y++) {
a = x * s / 600;
b = y * s / 600;
c = a * a + b * b;
d = c / 2;
d = d - Math.floor(d);
d = d * 1000;
if (d < 250) {
kol = color(d, 0, 0);
}
else if (d < 500) {
kol = color(0, d - 250, 0);
}
else if (d < 750) {
kol = color(0, 0, d - 500);
}
else {
kol = color(255, 255, 255);
}
stroke(kol);
point(x, y);
}
} 
}

EDIT: missed a ; after d = d * 1000

[Mike Lobanovsky]

Sorry, been muted by the net failure.

Works great but the patterns are different from GDI because JS uses browser canvases that are WebGL driven and in fact use anti-aliasing and subpixel metrics.

Updated my code with your mods. Using 2x2 filled boxes:

[Tomaaz]

JavaScript is terribly slow drawing anything in a bigger canvas. And for each new pattern you have to click again as there's no outer loop that would've made your browser entirely unresponsive with the 800x600 px canvas. And I suspect Tomaaz knew this when uploading the sample...

This example is not coded in pure JavaScript. It uses P5.js which is Processing for JavaScript. I'll write and post a pure JavaScript version when I'm free.

[Aurel]

we will wait ...
After you finish the job in the toilet, you're free
and then smash that java scripts ass 

[Tomaaz]

JavaScript is terribly slow drawing anything in a bigger canvas...

Terribly slow, you say?  Try this. This is a pure low-level JavaScript version. You don't need to click anything. It updates by itself about... 10 times per second on my machine (of course it depends on a browser you use). I wouldn't call it terrible slow. It is rather fast.

Code: [Select]

<!DOCTYPE html>
<html>
<head>
<title>Mandelbrot</title>
<script>
var s = 1000;
function aktywuj() {
plotno = document.getElementById("rysunek");
zawartosc = plotno.getContext("2d");
zawartosc.fillStyle = "#000000";
zawartosc.fillRect(0,0,800,600);
t = setTimeout("rysuj()", 1);
}
function rysuj() {
var canvas = document.getElementById('rysunek');
var ctx = canvas.getContext('2d');
var canvasData = ctx.createImageData(canvas.width, canvas.height);
for (var x = 0; x < 800; x++)  {
for (var y = 0; y < 600; y++)  {
var idx = (x + y * 800) * 4;
a = x * s / 600;
b = y * s / 600;
c = a * a + b * b;
d = c / 2;
d = d - Math.floor(d);
d = d * 1000;
if (d < 250) {
r = d;
g = 0;
b = 0;
}
else if (d < 500) {
r = 0;
g = d - 255;
b = 0;
}
else if (d < 750) {
r = 0;
g = 0;
b = d - 500;
}
else {
r = 255;
g = 255;
b = 255;
}
canvasData.data[idx + 0] = r;
canvasData.data[idx + 1] = g;
canvasData.data[idx + 2] = b;
canvasData.data[idx + 3] = 255;
}
}
if (s == 1000) {
s = 500;
}
else {
s += 5;
}
var k = ctx.putImageData(canvasData, 0, 0);
t = setTimeout("rysuj()", 1);
}
</script>
</head>
<body onload = "aktywuj()">
<div>
<canvas id="rysunek" width="800" height="600"></canvas>
</div>
</body>
</html>

The file is attached. It's a single HTML file. Just open it in your browser.

EDIT 10 times per second in Microsoft's browsers. In Firefox it runs much faster. To be honest, I wasn't expecting it to be that fast.

[Aurel]

ok.,.
in Opera work fine and not very fast..
in Firefox not ,also in Kmeleon not , in SlimBoat(Qt) work

[B+]

WOW Tomaaz, that is mind blowing !!!

I am a believer now. Whew!

I recommend a little change to make it clear when you've cycled through about 200 screens in less time than it takes to create one half of one in Python, and probably less than half the time my fastest, Naalaa, can cycle through the range of s:

Code: [Select]

if (s == 1000) {
s = 5;
}
Starting at s = 5 and for a half dozen screens, s = 5, 10, 15, 20, 25,... you can get a taste of how the Connett Circles progress.

[Mike Lobanovsky]

Terribly slow, you say? 

"Terribly" slow in conjunction with that py library you suggested.

It updates by itself about... 10 times per second on my machine (of course it depends on a browser you use).

On my machine, it actually runs at ~55 FPS in both FF and Opera. That's remarkable, thanks Tomaaz!

[ZXDunny]

That is fast. By comparison, my specbas code snippet above takes 120ms to draw one frame whereas this seems to be getting in about 15 fps, almost twice as fast.

[B+]

  Here is Connett Circles, "The Movie", code changes to Tomaaz html:

Code: [Select]

            var s = 1000.0;

if (s == 1000.0) {
s = 1.0;
}
else {
s += 0.1;
}