Javascript - How to only make a certain selection of string/text one color?

Admiral Snackbar

Well-Known Member
Joined
Jan 12, 2016
Messages
183
Reaction score
0
Edit: I answered my title question with some logic lol.

I still can't color the arc though.
Doing a project for Khan Academy and I want to make it look better, but they haven't covered this yet.

Code:
background(255, 255, 255);
fill(230, 21, 230);
textSize(25);
text("Make Up Artistry by Kim Davies", 10, 35);
textSize(19);
text("1) KOHL qualified!", 10, 65);
text("2) Airbrush application available.", 10, 95);
text("3) Prosthetic, special effects and more!", 10, 125);

// lipstick
rect(35, 240, 43, 100); // base of lipstick
line(40, 195, 40, 240); // left part of stick
line(72, 169, 72, 240); // right part of stick
noFill();
arc(16, 154, 118, 93, 378, 424);

As it stands atm;
1)
2)
3)
These are all the same color as the text that follows, I want them to be a different color.
rtl4sg.png

25je1r9.png

Also, how can I color in this Arc that I used to make the lipstick? I used two lines and an arc to create the shape, but now I want to fill it.

I plan to add an animation afterwords where I have the lipstick move across the screen and leave a lipstick smudge.
 
Last edited:
Code:
var x = 35;
var y = 240;
var star1x = 370;
var star1y = 370;
var star2x = 200;
var star2y = 370;
var star3x = 30;
var star3y = 370;
var star4x = 370; 
var star4y = 30; 
var star5x = 200;
var star5y = 30;
var star6x = 30;
var star6y = 30;

draw = function() {
    background(220, 250, 250);
    
    // flying balls
    fill(157, 0, 255); // purple
    noStroke();
    ellipse(star1x, star1y, 30, 30);
    ellipse(star2x, star2y, 30, 30);
    ellipse(star3x, star3y, 30, 30);
    fill(225, 250, 0); // yellow
    ellipse(star4x, star4y, 30, 30);
    ellipse(star5x, star5y, 30, 30);
    ellipse(star6x, star6y, 30, 30);
    
    
    // text 
    fill(127, 50, 194);
    textSize(25);
    text("Make Up Artistry by Kim Davies", 10, 35);
    fill(166, 23, 166);
    textSize(19);
    text("KOHL qualified!", 35, 70);
    text("Airbrush application available!!", 35, 100);
    text("Prosthetic, special effects and more!", 35, 130);
    fill(9, 13, 237);
    text("1)", 15, 70);
    text("2)", 15, 100); 
    text("3)", 15, 130);
    fill(32, 25, 107);
    textSize(22);
    text("Best Lipsticks in Europe!", 100, 370);

    // lipstick
    stroke(0, 0, 0);
    fill(125, 9, 9);
    rect(x, y, 43, 100); // base of lipstick
    line(x + 5, y - 45, x + 5, y); // left part of stick
    line(x + 37, y - 71, x + 37, y); // right part of stick
    noFill();
    arc(x - 19, y - 86, 118, 93, 378, 424); // curve of stick 
    fill(190, 125, 240); // lipstick base
    rect(x, y + 1, 43, 15);
    
     // lipstick animation
    x = x + 1;
    // all ball animation
    star1x = star1x - 2;
    star1y = star1y - 2;
    star2y = star2y - 2;
    star3x = star3x + 2;
    star3y = star3y - 2;
    star4x = star4x - 2;
    star4y = star4y + 2;
    star5y = star5y + 2;
    star6x = star6x + 2;
    star6y = star6y + 2;
};

Need filler on that arc.
 
Last edited:
25q69om.png


:twisted:

Fill between two lines was not gonna work.

Used a rectangle and arc, then had the arc part colored the same as the background to make it 'invisible'.
 
Last edited:
My apologies, I saw it as first posts/forum questions, as in, you post your questions there.
 
Top
Sign up to the MyBroadband newsletter
X