Randomize Overlaid Circles

[Mike Lobanovsky]

I will have to add a BASIC-to-C translator to the CCanvas class ...

That would be cool!

Would it?

[ZXDunny]

I was messing around with this one a while ago in SpecBAS - runs in 8bpp, with colour cycling to animate:

Code: [Select]

10 DEF FN r=INT(RND*5)*63.9: b=1 SHL (INT(RND*5)+2),p,op=0: DO: PALETTE p,FN r,FN r,FN r: RAINBOW op TO p: op=p,p+=b: LOOP UNTIL p=256: PALETTE 255,RGB 0: RAINBOW op TO 255: r=RND*3: SCREEN LOCK
20 p=WINADDR 0: FOR y=0 TO SCRh-1: ym=y*y: FOR x=0 TO SCRw-1: MEMWRT p,(POWERTWO x+ym)*r: p+=1: NEXT x: NEXT y
30 DO WHILE INKEY$="": PALETTE SHL 1,0 TO 255: WAIT SCREEN: LOOP: GO TO 10

And more readable:

Code: [Select]

10 DEF FN r=INT(RND*5)*63.9:
   b=1 SHL (INT(RND*5)+2),p,op=0:
   DO:
      PALETTE p,FN r,FN r,FN r:
      RAINBOW op TO p:
      op=p,p+=b:
   LOOP UNTIL p=256:
   PALETTE 255,RGB 0:
   RAINBOW op TO 255:
   r=RND*3:
   SCREEN LOCK
20 p=WINADDR 0:
   FOR y=0 TO SCRh-1:
      ym=y*y:
      FOR x=0 TO SCRw-1:
         MEMWRT p,(POWERTWO x+ym)*r:
         p+=1:
      NEXT x:
   NEXT y
30 DO WHILE INKEY$="":
   PALETTE SHL 1,0 TO 255:
   WAIT SCREEN:
   LOOP:
   GO TO 10

Line 10 sets up a palette, line 20 draws the Moire pattern, line 30 sits cycling the colours waiting for a keypress.

Screengrabs (though the animation obviously isn't shown here and certain structures don't show up in static images) :

[Mike Lobanovsky]

Wow, that's cool, Paul!

To translate RGBF to RGB, multiply by 255 ...

Done, thnx!

[B+]

Testing new update of SmallBASIC, I found I hadn't expressed full range for G and B colors so here is that "fix" with an R or G or B full intensity palette plus a bunch of key or mouse navigation of s range 0 to 995 and color on/off toggle and +- magnifications.

Code: [Select]

' patterns 2.bas  SmallBASIC 0.12.7 [B+=MGA] 2016-09-18
' from pattern.bas for SmallBASIC 0.12.0 2015-11-27 Peter W & MGA/B+

' 2016-09-18 modify (Fix!) to full range R OR G OR B coloring
' test new 0.12.7 update SmallBASIC (2016-09-17)
' add toggles for rectangles 1 to 8 with + for plus, - for minus
' add toggles c for color to B & W
' add keys u, d, h, e  for like: page up, page down, home, end
' add label, extra code to speed B&W versions

definekey 43, plusPress   ' + increase reactangle size up to 8x8 pixels
definekey 45, minusPress  ' - decrease rectangle size to 1x1 = pixels
definekey 99, cPress      'color toggle B&W
definekey 98, bPress   'b  for back 5,     s back 5 = last s again
definekey 117, uPress  'u  like page up,   s + 100, also click right screen
definekey 100, dPress  'd  like page down, s - 100, also click left screen
definekey 104, hPress  'h  like home,      s = 10 , also click top screen
definekey 101, ePress  'e  like end,       s = 900, also click bottom screen

colr = 1 'color is on
g = 2    'g controls f the rectangle size
u = 500  'u controls s that controls the d number that controls color
pen on
while 1
  cls
  f = g
  s = u
  if colr then
    for i = 0 to xmax / f
      for j = 0 to (ymax - 20) / f
        x = i * s / 600
        y = j * s / 600
        c = x * x + y * y
        d = c / 2
        d = d - int(d)
        if d < .35 then
          cc = rgbf(d / .35, 0, 0)
        elif d < .7
          cc = rgbf(0, (d - .35) / .35, 0)  'get full range %
        else
          cc = rgbf(0, 0, (1 - d) / .30000001) 'get full range %
        fi   
        rect i * f,j * f + 21 step f, f, cc filled
        'pset i,j,cc
      next
    next
  else
    for i = 0 to xmax / f
      for j = 0 to (ymax - 20) / f
        x = i * s / 600
        y = j * s / 600
        c = x * x + y * y
        d = c / 2
        d = d - int(d)
        if d < 0.35 then rect i * f, j * f + 21 step f, f, 15 filled   
      next
    next
  end if
  color 7, 0
  ts = "Patterns 2: s = " + str(s) + ", " + str(f) + "x"
  ts = ts + str(f) + "  key: + - pixel magnification, c color on/off, b backup,"
  ts = ts + " u d h e or click to naviagte s"
  at (xmax -txtw(ts))/2, 1 : ? ts
  showpage
  pause 'for snapshot
  if pen(3) then
    mx = pen(4) : my = pen(5)
    delay 100
    if my > 100 and my < ymax - 100 then
      if mx < 100 then dPress
      if mx > xmax - 100 then uPress
    elif my < 100 and my > -1
      hPress
    elif my > ymax - 100 
      ePress
    end if
  end if
  u += 5
  if u > 1000 then u = 5
wend

sub plusPress()
  g = iff(f + 1 < 9, f + 1, f)
end

sub minusPress()
  g = iff(f - 1 > 0, f - 1, f)
end

sub cPress()
  colr = (colr + 1) % 2
end

sub bPress()
  u = iff(u - 10 > 0, u - 10, 990)
end
   
sub uPress()
  u = iff(u + 100 < 1000, u + 100, 900)
end
 
sub dPress()
  u = iff(u - 100 > 0, u - 100, 5)
end
 
sub hPress()
  u = 5
end

sub ePress()
  u = 900
end sub


[B+]

One more?

[Mike Lobanovsky]

One more?

Oh yeah, I guess somebody might call yet more latent reserves to the colours...

Are you using rects to speed up drawing?

[B+]

One more?

Oh yeah, I guess somebody might call yet more latent reserves to the colours...

Are you using rects to speed up drawing?

The first patterns versions was already using rectangles, and yes that can dramatically speed drawings by cutting down number of pixels to cycle through.

The speed up in this version is for B&W, with color option off, only have to draw 35% of rectangles at any size after a clear screen.

Here is an 8 color scheme, 3 primaries + 3 secondaries + 2 for B&W (for those who appreciate exquisite detail) 0 to 1 is split into 6 color ranges, 65 to 255, plus 1/8th pure black and 1/8th pure white for contrast:

Code: [Select]

'patterns 8 color range.txt Naalaa [B+=MGA] from
'pattern.bas for SmallBASIC 0.12.0 2015-11-27 Peter W & MGA/B+
'pixelated colorized version
'2016-09-18 mod fix color range now 6 primary and secondary & B&W

constant:
xmax = 800
ymax = 600
hidden:
set window 100, 40, xmax, ymax
set redraw false
 
s# = 500.0
while 1
set colori 0xffffff
cls
set colori 0
  for y = 0 to ymax
    for x = 0 to xmax
      a# = float(x) * s / 600.0
      b# = float(y) * s / 600.0
      c# = a# * a# + b# * b#
      d# = c# / 2.0
      d# = d# - float(int(d#))
      if d# < 0.125
        set color 0, 0, 0
      elseif d# < 0.25
r = int((d# - 0.125) / 0.125 * 190.0 + 65.0)
        set color r, 0, 0
      elseif d# < 0.375
r = int((d# - 0.25) / 0.125 * 190.0 + 65.0)
        set color r, r, 0
      elseif d# < 0.5
g = int((d# - 0.375) / 0.125 * 190.0 + 65.0)
        set color 0, g, 0
      elseif d# < 0.625
g = int((d# - 0.5) / 0.125 * 190.0 + 65.0)
        set color 0, g, g
      elseif d# < 0.75
bl = int((d# - 0.625) / 0.125 * 190.0 + 65.0)
        set color 0, 0, bl
      elseif d# < 0.875
bl = int((d# - 0.75) / 0.125 * 190.0 + 65.0)
        set color bl, 0, bl
else
set color 255, 255, 255
      endif
draw pixel x, y
    next
  next
redraw
  wait 200
if keydown(27, true) then end
  s# = s# + 5.0
  if s# > 1000.0 then s# = 5.0
wend

[Mike Lobanovsky]

Thnx!

What does j * f + 21 step f mean?

[B+]

Thnx!

What does j * f + 21 step f mean?

Referring to SmallBASIC code Along with:
for j = 0 to (ymax - 20) / f

It means that there is no sense calculating and drawing in a place over which you are going to print a label.
The label is going to lay between y = 0 to 20 so I am starting the drawings below that.

That would keep consistent the top, left corner of a drawing in any dialect for a given s setting.

As I have said, not random at all, no matter the dialect the same results can be replicated, if you can match palettes, top, left corner, rectangle size and of course s value +/- some rounding methods and decimal precision.

Append: Oh step f, f while drawing rects
SmallBASIC has some options using rect keyword. Without STEP, it's just absolute coordinates for corners.
With STEP and first corner x,y it means width and height as used here from x, y STEP (draw square) f, f

One may also STEP from the last point in the last drawing command be it circle, pixel, line and do this
rect step xdistance, ydistance

more practically used with line drawing for turtle like or pencil like drawing.

Code: [Select]

REM step demo.bas 2016-02-16 SmallBASIC 0.12.0 [B+=MGA]
' for STEP to work it needs a place to STEP from:
'     PSET, LINE, CIRCLE some graphic x,y pixel location
'PSET is typical start place for turtle like drawings

sx=xmax/50:sy=ymax/50
pset xmax/2,ymax/2 '<==pset is used here to provide STEP a relative place to STEP from
i=0
while i*sx<xmax 'once one x,y pixel reference is set you can STEP out to your hearts desire
  i+=1
  color 14,14
  line step sx*i,0
  color 9,9
  line step 0,sy*i
  i+=1
  color 12,12
  line step -1*i*sx,0
  color 11,11
  line step 0,-1*i*sy
wend
pause


[Mike Lobanovsky]

Thanks a lot B+,

I especially appreciated your exhaustive explanation on the purpose and importance of STEP operator in the FOR/NEXT loops of most BASIC dialects to keep up their consistency with one another.

Anyway, as I see it from your appended explanation STEP in a RECT/PSET/LINE etc. statement is used to denote a relative coordinate step away from wherever it was left at by the preceding drawing operation using these commands, rather than an absolute position at which the current drawing operation is supposed to begin.

Your explanation was really helpful for me to make out what's what in your code. My PSET, LINE (a.k.a. RECTANGLE and PARALLELOGRAM, empty and filled), CIRCLE (a.k.a. ELLIPSE and PIE, empty and filled), and ARC (a.k.a. SEGMENT, empty and filled) also have relative flags for their starting and ending coords, and relative positions can always be polled with CURRENTX and CURRENTY functions. In short, going the VB style, you know...

[UPD] Not to be unfounded: 

Code: [Select]

REM Port to FBSL v3.5 2016-09-20 [ML<=B+=MGA]
REM Step demo.bas 2016-02-16 SmallBASIC 0.12.0[B+=MGA]
' for STEP to work it needs a place to STEP from:
'     PSET, LINE, CIRCLE some graphic x,y pixel location
'PSET is typical start place for turtle like drawings

#AppType Console
#Option Implicit
#Include "Canvas.inc"

With Canvas
  .Window("Relative Coords Demo", 1280, 720)
  sx = .Width / 50: sy = .Height / 50
  .CurrentX(.Width / 2) '<==pset is used here to provide STEP a relative place to STEP from
  .CurrentY(.Height / 2)
  i = 0
  While i * sx < .Width 'once one x,y pixel reference is set you can STEP out to your hearts desire
    .Line(,, sx * Incr(i), 0, &HFFFF,,, TRUE, TRUE)
    .Line(,, 0, sy * i, &HFF0000,,, TRUE, TRUE)
    .Line(,, -Incr(i) * sx, 0, &HFF,,, TRUE, TRUE)
    .Line(,, 0, -i * sy, &HFFFF00,,, TRUE, TRUE)
  WEnd
End With

[Tomaaz]

JavaScript (using P5.js):

Code: [Select]

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

function setup() {
createCanvas(800, 600);
background('black');
s = 1000;
}

function mouseClicked() {
if (s == 1000) {
s = 500;
}
else {
s += 5;
}
for (x = 0; x <= 800; x++) {
for (y = 0; y <= 600; y++) {
a = x * s / 600;
b = y * s / 600;
c = a * a + b * b;
d = c / 2;
d = d - Math.floor(d);
if (d < 0.25) {
kol = color(d * 4, 0, 0);
}
else if (d < 0.5) {
kol = color(0, 2 * d, 0);
}
else if (d < 0.75) {
kol = color(0, 0, 4 / 3.0 * d);
}
else {
kol = color(255, 0, 0);
}
stroke(kol);
point(x, y);
}
} 
}

Example is attached. You need to click on a black canvas first to start the drawing.

[Aurel]

well ok work but after 10 seconds browser doing something 

[Tomaaz]

well ok work but after 10 seconds browser doining something 

I don't know what your browser is doing after 10 seconds. Mine is doing nothing (apart from executing that code). You need to talk to it. 

[B+]

JavaScript (using P5.js):

Code: [Select]

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

function setup() {
createCanvas(800, 600);
background('black');
s = 1000;
}

function mouseClicked() {
if (s == 1000) {
s = 500;
}
else {
s += 5;
}
for (x = 0; x <= 800; x++) {
for (y = 0; y <= 600; y++) {
a = x * s / 600;
b = y * s / 600;
c = a * a + b * b;
d = c / 2;
d = d - Math.floor(d);
if (d < 0.25) {
kol = color(d * 4, 0, 0);
}
else if (d < 0.5) {
kol = color(0, 2 * d, 0);
}
else if (d < 0.75) {
kol = color(0, 0, 4 / 3.0 * d);
}
else {
kol = color(255, 0, 0);
}
stroke(kol);
point(x, y);
}
} 
}

Example is attached. You need to click on a black canvas first to start the drawing.

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

I don't know why you have this:

Code: [Select]

if (d < 0.25) {
kol = color(d * 4, 0, 0);
}
else if (d < 0.5) {
kol = color(0, 2 * d, 0);
}
else if (d < 0.75) {
kol = color(0, 0, 4 / 3.0 * d);

when the only coloring done is by this:

Code: [Select]

else {
kol = color(255, 0, 0);

Try

Code: [Select]

{
kol = color(d * 4 * 255, 0, 0);
}
else if (d < 0.5) {
kol = color(0, 2 * d * 255, 0);
}
else if (d < 0.75) {
kol = color(0, 0, 4 / 3.0 * d * 255);
}

else {
kol = color(255, 255, 255);


the else change is to brighten up a dark screen, some white helps.


Append:

Code: [Select]

'pattern.bas for SmallBASIC 0.12.7
'2016-09-21 mod for RGB and pixels
s=5
while 1
  for i=0 to 800
    for j=0 to 600
      x=i*s/600
      y=j*s/600
      c= x*x+y*y
      d=c/2
      d=d-int(d)
      if d <0.25 then
        cc=rgb(d*4*255,0,0)
      elif d<.5
        cc=rgb(0,(4*(d-.25)*255)%255,0)
      elif d<.75
        cc=rgb(0,0,(4*(d-.5)*255)%255)
      else
        cc=rgb(255,255,255)
      fi   
      pset i,j,cc
    next
  next
  showpage
  pause
  s+=5
  if s>1000 then s=5
wend


At s = 5 the palette looks like the attached.

[Tomaaz]

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.