Scripting Cycle Through Cyan Shades

[ShantiShaun]

Why does my scipt crash when I delete the two occurances of /**/ (leaving in the code) and deleting the single line of code with the // trailing the cyan variable?

var i = 0;
var ii = 0;
var y = 0;
var x = 0;
var aDoc = app.documents.add();
for (; i < 374; ) {  
  var Rect = aDoc.pathItems.rectangle(y, x, 36, -36);  
  Rect.stroked = false;
  Rect.filled = true;
  var itemColor = new CMYKColor();
  /*if (i = 0) {
    itemColor.cyan = 0;
  }*/
  itemColor.cyan = 97;  //Why deleting this line and uncommenting code doesn't work???
  itemColor.magenta = 0;
  itemColor.yellow = 0;
  itemColor.black = 0;
  Rect.fillColor = itemColor;
  /*if (x > 0 && x < 594 && itemColor.cyan < 100) {
    itemColor.cyan = itemColor.cyan + 1;
  }*/
  var ii = ii + 1;
  var i = i + 1;
  var x = x + 36;
  if (ii == 17) {
    var ii = 0;
    var x = 0;
    var y = y + 36;
    }
}

 You can run the script as is and it doesn't crash and makes nice even 1/2" squares on 8.5x11 however when I try to impliment the part of code to change through 0 - 100 shades of cyan something breaks.  Maybe I'm not getting to the var in the for loop from the if statements? 

[m1b]

Hi @ShantiShaun the first thing that stands out is that you are—probably accidentally!—assigning i rather than comparing.

Try changing

if (i = 0) {

to

if (i === 0) {

There might be other issues, but that's probably blocking you for now.

 - Mark

[ShantiShaun]

m1b, Thanks.  I found this and everything else.  solved.

[ShantiShaun · Accepted solution]

I found my solution was to make a separate global variable for the cyan color.  I have corrected my code to share with everyone...

var i = 0;
var ii = 0;
var y = 0;
var x = 0;
var ccount = 0;
var aDoc = app.documents.add();
for (; i < 374; ) {  
  var Rect = aDoc.pathItems.rectangle(y, x, 36, -36);  
  Rect.stroked = false;
  Rect.filled = true;
  var itemColor = new CMYKColor();
  itemColor.cyan = ccount;
  itemColor.magenta = 0;
  itemColor.yellow = 0;
  itemColor.black = 0;
  if (x > 0 && x < 594 && ccount < 100) {
    var ccount = ccount + 1;
  }
  Rect.fillColor = itemColor;
  var ii = ii + 1;
  var i = i + 1;
  var x = x + 36;
  if (ii == 17) {
    var ii = 0;
    var x = 0;
    var y = y + 36;
    }
}

[m1b]

Great work @ShantiShaun! It works really well.

Just for extra learning, I've refactored your code a bit to improve readaiblity and structure. Some variables weren't really needed with the new structure. I hope it might be interesting.

- Mark

(function () {

    // Configuration variables
    var rowWidth = 17; // Number of rectangles per row
    var cellSize = 36; // Size of each rectangle
    var totalCount = 374; // Total number of rectangles

    // Create a new document
    var newDoc = app.documents.add();

    // Initialize variables
    var totalRows = Math.ceil(totalCount / rowWidth);

    // Loop over rows
    for (var r = 0; r < totalRows; r++) {

        // Calculate the row's vertical position
        var y = r * cellSize;

        // Loop over cells in the row
        for (var i = 0; i < rowWidth && cellIndex < totalCount; i++) {

            // Calculate the cell's horizontal position
            var x = i * cellSize,
                cellIndex = r * rowWidth + i;

            // Create a rectangle
            var rect = newDoc.pathItems.rectangle(y, x, cellSize, -cellSize);

            // Apply fill color
            setAppearance(rect, cellIndex);

        }
    }

})();

// Function to set fill color based on the current count
function setAppearance(item, cyanValue) {

    if (
        cyanValue < 0
        || cyanValue > 100
    )
        cyanValue = 100;

    var color = new CMYKColor();
    color.cyan = cyanValue;
    color.magenta = 0;
    color.yellow = 0;
    color.black = 0;

    item.stroked = false;
    item.filled = true;
    item.fillColor = color;

};

EDIT 2024-11-30: fixed a bug found by @renél80416020  and @ShantiShaun. Sorry, going to fast!

[ShantiShaun]

Mark, Thanks for the efficient suggestion.  This looks like a good alternative for better code writing.  This is a good reference for anyone who has a need to start cleaning up code.  My purposes I've left my code as is and expanded on it a little  bit.  I've got it going now with all outside squares larger to fill a bleed area of 9pts.

I have a question related to scripting.  There is a sample script included in paticular "C:\Program Files\Adobe\Adobe Illustrator 2025\Scripting\Sample Scripts\JavaScript\MultiArtboards\CreateArtboards.jsx" I was wondering do you get the same output if you zoom out and look with the large rectangle not aligning to the pages and the random stars going up north off the rectangle?  Please see the screenshot attachment and I'm wondering why coordinates seem to be wonky in this example and during the development of my script it seemed Illustrator would not make it's mind up if a coordinate was going to be (top left origin) or (center origin), and also it seemed while I was developing my script that Illustrator sometimes would not make it's mind up if my coordinates were going to be interpreted as Global or Relative to my last artboard when adding artboards.

Happy Thanksgiving.

[m1b]

Hi @ShantiShaun, I recently wrote an answer about coordinates in Illustrator. Have a close look at that—coordinates can be a bit confusing but I've included some explicit code to show you. Keep up the good work!

- Mark

[ShantiShaun]

Mark,

I pasted the output of your code in a screenshot.

[m1b]

Yes? That's exactly what I see. What were you expecting?

[renél80416020]

Bonjour Mark,

Il manque une ligne et je crois que la teinte doit changer à chaque rectangle.

(function () {

    // Configuration variables
    var rowWidth = 17; // Number of rectangles per row
    var cellSize = 36; // Size of each rectangle
    var totalCount = 374; // Total number of rectangles
    var cellIndex = 0;
    // Create a new document
    var newDoc = app.documents.add();

    // Initialize variables
    var totalRows = Math.ceil(totalCount / rowWidth);
    
    // Loop over rows
    for (var r = 0; r < totalRows; r++) {

        // Calculate the row's vertical position
        var y = r * cellSize;
        // Loop over cells in the row
        for (var i = 0; i < rowWidth; i++) {
            
            // Calculate the cell's horizontal position
            var x = i * cellSize;               

            // Create a rectangle
            var rect = newDoc.pathItems.rectangle(y, x, cellSize, -cellSize);

            // Apply fill color
            setAppearance(rect, cellIndex);
            cellIndex ++;

        }
    }

})();

[ShantiShaun]

Bonjour, vous avez raison de déterminer ce que je faisais pour modifier la valeur cyan de chaque case. J'ai réussi à faire fonctionner ce script et j'ai posté ma propre solution à ma question ici. Merci pour vos réponses.

[m1b]

EDIT: ignore this please Rene, I had the correct line, but I'd stupidly put it in the wrong loop in my haste.

Thanks @renél80416020, actually when I look closely, I think your variation makes no difference. I set the cellIndex absolutely, based on the cell coordinates:

cellIndex = r * rowWidth + i

and you set it relatively, +1 each time. Same result though at least on my system here.

However, if the OP needs to, for example, skip some cells, then your approach is a must.

- Mark

[ShantiShaun]

I was expecting 1/2" squares of cyan to increment in .1 as I have here now with the values on them.

[m1b]

By the way, @ShantiShaun just reminding you that your answer posted here gives the same result as mine. There is no 0.1 increment. - Mark

[ShantiShaun]

In CMYK yes there is .1 increment

[ShantiShaun]

Mark,

Now I see that it was way back when I posted my question and in my original post there was no information for you to know that I was eventually going to switch the increments of cyan value by just 0.1 per square.  I have also noticed I have some documentation on the 2 coordinate systems for artboards and the whole workspace thing many are calling a canvas which is a terrible name for where the artboard goes.

[m1b]

Hi @ShantiShaun, yes I was just giving you structure, based on the function of your original script which was all you had posted at that time—and which matched my script in output (adding 1 to the cyan value until maxing out at 100). I fully expected you to adjust to your actual needs of course. @renél80416020 noticed this too.

Anyway, all good. Sounds like you are getting somewhere!

- Mark

[ShantiShaun]

Yes, I was accidentally being rude not realizing you didn't get to see my code at the state of .1 increments of color instead of 1.  Anyways on the output of your code with cyan increments of 1 it is still not as expected.  It is incrementing color per row not per square as per visual check just looking at the output.  That is why I bothered to post your output.  I'm just now getting back to this conversation to be here more as the human I am.  Thanks for wishing the good luck!  I have finished my Scripts purpose for now and I shared it here https://community.adobe.com/t5/illustrator-discussions/javascript-share-create-373-cyan-tints-for-pr... so as to not leaving anyone out.

[m1b]

Oops, you are right! I see that when I refactored I put my line cellIndex = r * rowWidth + i in the wrong loop. I've fixed it now. @renél80416020 my apologies, you were quite right, too!

Glad to hear you have completed your script @ShantiShaun and thankyou for sharing it! 🙂

- Mark