On click slider effect

by Minjung Kang

1

0

1

CC Attribution ShareAlike

On click slider effect

by

I wanted to make the shades repeat but not slide - colors change but i don't know how to make the effect.

Tuesday, 8/5/2014

Anyone

Anyone

Anyone

CreativeCommons Attribution ShareAlike

No Thumbnail
Click to Create

Title

Description

How to
interact with it

e.g., mouse, keyboard

Tags

e.g., visualization, fractal, mouse

License

Learn more about Creative Commons

Draft

Add to My Templates

Who can see your sketch?

Anyone Only Me

Join Plus+ to change privacy settings

Who can see the code?

Anyone Only Me

Who can comment?

Anyone Only Me

sketch_140805a

xxxxxxxxxx
 
void setup() {
  size(400,255);
}
​
void draw() {
  background(0);
​
  int i = 0;
​
  while (i < width) {
    noStroke();
    
    float distance = abs(mouseX - i); 
    
    fill(distance);
    rect(i,0,10,height);
    // Increase i by 10
    i += 10;
  }
}
​
​

Sketch
Files
Editor

Mode

P5js HTML/CSS/JS Pjs

Processingjs is deprecated. Learn more

Select mode or a template

Tutorial Mode

Write step-by-step tutorials. Learn more

Showcase Sketch

Centers sketch and matches the background color.

Loop Protection

Text Size

Layout

This will be the default layout for your sketches

Dark Mode

Easy on the eyes

Console

It will show up when there is an error or print() in code

Linting

Disabled: Only available on p5js sketches.

Close Brackets

Closes parenthesis-like characters automatically as you type

Shortcuts

Controls

Play

Ctrl+Enter

Code

Ctrl+Shift+Enter

Save

Ctrl+S

Interface

Fullscreen

Ctrl+Alt+F

Switch Layout

Ctrl+Alt+L

Settings

Ctrl+Alt+.

Editor

Tidy Code

Ctrl+B

Multiple Cursors

Ctrl+Click

Duplicate Line/Selection

Ctrl+Shift+D

Move Line

Alt+↑/↓

Select Multiple

Ctrl+D

Find in Code

Ctrl+F

Find Next

Ctrl+G

Find Previous

Ctrl+Shift+G

See More Shortcuts

Join Plus+ for private sketches, version history, 1GB space, custom embeds, and more!

Displaying comments on line 1 Show All

Please verify your email to comment

Join to Comment

Sign in to download

Embed

<iframe src="https://openprocessing.org/sketch/156672/embed/" width="400" height="400"></iframe>

Attribute

“On click slider effect” by Minjung Kang
https://openprocessing.org/sketch/156672
License CreativeCommons Attribution ShareAlike
https://creativecommons.org/licenses/by-sa/3.0

Report Sketch

Any questions? Reach out via email.

File URL

{{filePath}}

Dimensions

{{width}} x {{height}}

Report Sketch

Oh, that naughty sketch! Please let us know what the issue is below.

Apply Template

Applying this template will reset your sketch and remove all your changes. Are you sure you would like to continue?

Report Sketch

Please choose the appropriate issue with this sketch. We will review your submission and take any actions necessary per our Community Guidelines. In addition to reporting, you can also block the user to prevent any future interactions.

Spam, Phishing, or Malicious Content

Inappropriate Content (offensive or abusive language, hate, discrimation, etc.)

For copyright infringements, please fill out this form instead.

Report sketches only when necessary. Unnecessary or abusive use of this tool may result in your own account being suspended.

Report Comment

Please confirm that you would like to report the comment below.

We will review your submission and take any actions necessary per our Community Guidelines. In addition to reporting this comment, you can also block the user to prevent any future interactions.

Please report comments only when necessary. Unnecessary or abusive use of this tool may result in your own account being suspended.

Are you sure you want to delete your sketch?

Any files uploaded will be deleted as well.
Forks of this sketch will no longer be attributed to this sketch.

Delete Comment?

This will also delete all the replies to this comment.

Delete this tab? Any code in it will be deleted as well.

Select a collection to submit your sketch

We Need Your Support

Since 2008, OpenProcessing has provided tools for creative coders to learn, create, and share over a million open source projects in a friendly environment.

Niche websites like ours need your continued support for future development and maintenance, while keeping it an ad-free platform that respects your data and privacy!

Please consider subscribing below to show your support with a "Plus" badge on your profile and get access to many other features!

GET PLUS MEMBERSHIP