Fun with Gradients
Using John Kennedy's routine for drawing circles using only integer arithmetic (https://www.conorpp.com/_sllu/bcircle.pdf)
The problem? Missing pixels - this integer-arithmetic-only algorithm cannot color ever pixel between (0,0,r) and (0,0,r+1). That's why you need Ben Benjeddi (this code isn't truly integer-arithmetic only, but it can be done..). Try it out : here.
Exponential growth of red-value :
cirgrad = new SimpleImage( 200, 200 );
var p;
var red=1;
var rad=1
for( let x = 100; x < 255; x++) {
plotCircle( cirgrad, 100,100,rad++,red);
if( 0 == rad % 1 ) {
red *= 1.07;
}
}
print(cirgrad);
Gives you :
Stepped Linear Growth of red-value :
for( let x = 100; x < 255; x++) {
plotCircle( cirgrad, 100,100,rad++,red);
if( 0 == rad % 15 ) {
red += 25;
}
}
Stepped Exponential Growth of red-value :
for( let x = 100; x < 255; x++) {
plotCircle( cirgrad, 100,100,rad++,red);
if( 0 == rad % 10 ) {
red *= 1.8;
}
}
Looking in from the edge :
var red=255;
var rad=140
var cx = 100;
var cy = 100;
while ( rad > 0) {
plotCircle( cirgrad, cx,cy,rad--,red);
if( 0 == rad % 20 ) {
for( x = rad; x > rad - 10; x--){
plotCircle( cirgrad, cx,cy,x--,red);
}
red /= 1.8;
cx -= 10;
}
}
The problem? Missing pixels - this integer-arithmetic-only algorithm cannot color ever pixel between (0,0,r) and (0,0,r+1). That's why you need Ben Benjeddi (this code isn't truly integer-arithmetic only, but it can be done..). Try it out : here.
function setRed(pixel, value) {
pixel.setRed(value);
pixel.setBlue(0);
pixel.setGreen(0);
}
function plot8circlePoints(img, cx, cy, x, y, red, inner) {
w = img.getWidth();
h = img.getHeight();
var p;
for (var i = -1; i <= 1; i += 2) {
for (var j = -1; j <= 1; j += 2) {
if (cx + i * x >= 0 && cx + i * x < w && cy + j * y >= 0 && cy + j * y < h) {
p = img.getPixel(cx + i * x, cy + j * y);
setRed(p, red);
}
if (cx + i * y >= 0 && cx + i * y < w && cy + j * x >= 0 && cy + j * x < h) {
p = img.getPixel(cx + i * y, cy + j * x);
setRed(p, red);
}
if (!inner) {
if (cx + i * (x + 1) >= 0 && cx + i * (x + 1) < w && cy + j * y >= 0 && cy + j * y < h) {
p = img.getPixel(cx + i * (x + 1), cy + j * y);
setRed(p, red);
}
if (cx + i * y >= 0 && cx + i * y < w && cy + j * (x + 1) >= 0 && cy + j * (x + 1) < h) {
p = img.getPixel(cx + i * y, cy + j * (x + 1));
setRed(p, red);
}
}
}
}
}
function plotCircle(img, cx, cy, r, red) {
for (var x = 0; x <= r; x++) {
var y = Math.round(Math.sqrt(r * r - x * x));
plot8circlePoints(img, cx, cy, x, y, red, false);
plot8circlePoints(img, cx, cy, x, y - 1, red, true);
}
}
var R1 = 50;
var R2 = 100;
var inner = 0;
cirgrad = new SimpleImage(200, 200);
var rad = 1;
var red = 1;
//for (let r = R1; r <= R2; r++) {
// plotCircle(cirgrad, 100, 100, r, 255, inner);
//inner = !inner; // alternate between inner and outer points
//}
for( let x = 100; x < 255; x++) {
plotCircle( cirgrad, 100,100,rad++,red);
if( 0 == rad % 20 ) {
red *= 2.9;
}
}
var red=255;
var rad=140
var cx = 100;
var cy = 100;
while ( rad > 0) {
plotCircle( cirgrad, cx,cy,rad--,red);
if( 0 == rad % 20 ) {
for( x = rad; x > rad - 10; x--){
plotCircle( cirgrad, cx,cy,x--,red);
}
red /= 1.8;
cx -= 10;
}
}
var p;
var red=1;
var rad=1
for( let x = 100; x < 255; x++) {
plotCircle( cirgrad, 100,100,rad++,red);
if( 0 == rad % 1 ) {
red *= 1.07;
}
}
print(cirgrad);
And the "Looking in from the edge" code :
Comments
Post a Comment