読者です 読者をやめる 読者になる 読者になる

Daily Creative Coding

元「30 min. Processing」。毎日、Creative Codingします。

【GLSL】変形するボックス

See the Pen morphing box by aadebdeb (@aadebdeb) on CodePen. #define PI 3.14159265359 #define TWO_PI PI * 2.0 precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; float calcBoxDistance(vec3 p, vec…

【GLSL】球とRGBの光源

See the Pen sphere with rgb lights by aadebdeb (@aadebdeb) on CodePen. #define PI 3.14159265359 #define TWO_PI PI * 2.0 precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; float calcSphereDistanc…

【GLSL】球と一つの光源

See the Pen sphere with a moving light by aadebdeb (@aadebdeb) on CodePen. #define PI 3.14159265359 #define TWO_PI PI * 2.0 precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; float calcSphereDis…

【GLSL】パーリンノイズで変調されたパーリンノイズ #2

See the Pen mod perlin noise #2 by aadebdeb (@aadebdeb) on CodePen. #define PI 3.14159265359 #define TWO_PI PI * 2.0 precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; // // GLSL textureless cla…

【GLSL】パーリンノイズで変調されたパーリンノイズ

See the Pen mod perlin noise by aadebdeb (@aadebdeb) on CodePen. precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; // // GLSL textureless classic 3D noise "cnoise", // with an RSL-style periodi…

【GLSL】波の干渉

See the Pen wave face by aadebdeb (@aadebdeb) on CodePen. #define PI 3.14159265359 #define TWO_PI PI * 2.0 precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; vec2 getCoord() { float m = min(u_re…

【GLSL】パーリンノイズで変調されたパーリンノイズ

See the Pen mod perlin noise by aadebdeb (@aadebdeb) on CodePen. precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; // // GLSL textureless classic 3D noise "cnoise", // with an RSL-style periodi…

【GLSL】多角形を座標変換する

See the Pen coordinate transformation with polygons by aadebdeb (@aadebdeb) on CodePen. #define PI 3.14159265359 #define TWO_PI PI * 2.0 precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; float …

【GLSL】多角形

See the Pen polygon by aadebdeb (@aadebdeb) on CodePen. #define PI 3.14159265359 #define TWO_PI PI * 2.0 precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; float polygon(vec2 center, vec2 st, fl…

【GLSL】短辺の範囲が[-1, 1]になるように座標を変換する

See the Pen coordinate transformation by aadebdeb (@aadebdeb) on CodePen. precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; void main(void) { float m = min(u_resolution.x, u_resolution.y); vec2…

【GLSL】セルの分割

See the Pen cellular division by aadebdeb (@aadebdeb) on CodePen. #define PI 3.14159265359 #define TWO_PI PI * 2.0 precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; float random (float v) { ret…

【GLSL】円形のチェッカーパターン

See the Pen circular checker pattern by aadebdeb (@aadebdeb) on CodePen. #define PI 3.14159265359 precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; vec2 transform(vec2 st) { float size = length…

【GLSL】奥行きのあるチェッカーパターン

See the Pen checker pattern with depth by aadebdeb (@aadebdeb) on CodePen. #define PI 3.14159265359 precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; vec2 transform(vec2 st) { float h = u_resol…

【GLSL】スケールするチェッカーパターン2

See the Pen scaled checker pattern 2 by aadebdeb (@aadebdeb) on CodePen. #define PI 3.14159265359 precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; void main(void) { vec2 pos = gl_FragCoord.xy …

【GLSL】スケールするチェッカーパターン

See the Pen scaled checker pattern by aadebdeb (@aadebdeb) on CodePen. #define PI 3.14159265359 precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; void main(void) { vec2 pos = gl_FragCoord.xy - …

【GLSL】回転するチェッカーパターン

See the Pen rotating checker pattern by aadebdeb (@aadebdeb) on CodePen. #define PI 3.14 precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; void main(void) { vec2 pos = gl_FragCoord.xy - u_resol…

【GLSL】溢れる光

See the Pen ambiguous light by aadebdeb (@aadebdeb) on CodePen. precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; // Simplex 4D Noise // by Ian McEwan, Ashima Arts // vec4 permute(vec4 x){retur…

【GLSL】アンビエント・ノイズ

See the Pen ambient noise by aadebdeb (@aadebdeb) on CodePen. precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; // Simplex 3D Noise // by Ian McEwan, Ashima Arts // vec4 permute(vec4 x){return …

【GLSL】2次元のバリューノイズ

See the Pen 2D value noise by aadebdeb (@aadebdeb) on CodePen. precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; float random (in vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898,78.233))) *…

【GLSL】1次元のバリューノイズ

See the Pen 1D value noise by aadebdeb (@aadebdeb) on CodePen. precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; float random(float v) { return fract(sin(v) * 43758.5453123); } float noise(floa…

【GLSL】2次元のホワイトノイズ

See the Pen 2D white noise by aadebdeb (@aadebdeb) on CodePen. precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; float random(vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43…

【GLSL】1次元のホワイトノイズ

See the Pen 1D white noise by aadebdeb (@aadebdeb) on CodePen. precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; float random(float v) { return fract(sin(v) * 43758.5453123); } void main(void) …

【GLSL】セルパーティクル

See the Pen cell particles by aadebdeb (@aadebdeb) on CodePen. precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; float random(float v) { return fract(sin(v) * 1000000.0); } void main(void) { fl…

【GLSL】動くパターン

See the Pen animating pattern by aadebdeb (@aadebdeb) on CodePen. precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; float fillCircle(vec2 pos, vec2 center, float radius) { float d = distance(po…

【GLSL】メタボール

See the Pen blobs by aadebdeb (@aadebdeb) on CodePen. precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; float circle(in vec2 pos, in vec2 center, in float radius) { float d = distance(pos, cent…

【GLSL】RGBの縞々のリング

See the Pen RGB stripe rings by aadebdeb (@aadebdeb) on CodePen. #define TWO_PI 6.2831853 precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; float wave(in vec2 position, in vec2 center, in float…

【GLSL】RGBの円

See the Pen RGB circles by aadebdeb (@aadebdeb) on CodePen. precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; float circle(in vec2 _position, in vec2 _center, in float _radius) { float d = dist…

【GLSL】市松模様

See the Pen checher pattern by aadebdeb (@aadebdeb) on CodePen. precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; void main(void) { vec2 pos = gl_FragCoord.xy * 0.01; vec3 color = vec3(abs(step…

【GLSL】マウスに添って広がる円

See the Pen a circle by aadebdeb (@aadebdeb) on CodePen. precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; void main(void) { float d = distance(gl_FragCoord.xy, u_resolution.xy / 2.); float v =…

【GLSL】縞々のリング

See the Pen stripe rings by aadebdeb (@aadebdeb) on CodePen. precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; void main(void) { float d = sqrt(pow(gl_FragCoord.x - u_resolution.x / 2.0, 2.0) +…

【GLSL】GLSLで縞模様

See the Pen my first first GLSL program by aadebdeb (@aadebdeb) on CodePen. precision mediump float; uniform float time; uniform vec2 mouse; uniform vec2 resolution; void main(void) { gl_FragColor = vec4(abs(sin(gl_FragCoord.x * 0.1)), abs…

【Three.js】点で構成された球

See the Pen sphere of points by aadebdeb (@aadebdeb) on CodePen. <html lang="ja"> <head> <meta charset="utf-8"> <title>[2017/03/28] sphere of points</title> <style> body { margin: 0; overflow: hidden; } </style> </meta></head></html>

【Three.js】スペーストラベル

See the Pen space travel by aadebdeb (@aadebdeb) on CodePen. <html lang="ja"> <head> <meta charset="utf-8"> <title>[2017/03/27] space travel</title> <style> body { margin: 0; overflow: hidden; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"><…</meta></head></html>

【Three.js】RGBのSpotLightが作る影

See the Pen RGB SpotLight by aadebdeb (@aadebdeb) on CodePen. <html lang="ja"> <head> <meta charset="utf-8"> <title>[2017/03/26] RGB SpotLight</title> <style> body { margin: 0; overflow: hidden; } </style> </meta></head></html>

【Three.js】ポイントクラウド

See the Pen point cloud by aadebdeb (@aadebdeb) on CodePen. <html lang="ja"> <head> <meta charset="utf-8"> <title>[2017/04/25] point cloud</title> <style> body { margin: 0; overflow: hidden; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></meta></head></html>

MeshPhongMaterialのテスト

See the Pen MeshPhongMaterial test by aadebdeb (@aadebdeb) on CodePen. <html lang="ja"> <head> <meta charset="utf-8"> <title>[2017/03/24] MeshPhongMaterial test</title> <style> body { margin: 0; overflow: hidden; } </style> </meta></head></html>

球にいろいろなマテリアルを適用する

See the Pen materials for sphere by aadebdeb (@aadebdeb) on CodePen. <html lang="en"> <head> <meta charset="utf-8"> <title>[2017/03/23]materials for sphere</title> <style> body { margin: 0; overflow: hidden; } </style> </meta></head></html>

【Three.js】マウスでブロックの高さを制御する

See the Pen [Three.js]blocks controlled height by mouse by aadebdeb (@aadebdeb) on CodePen. <html lang="en"> <head> <meta charset="utf-8"> <title>[2017/03/22]blocks controlled height by mouse</title> <style> body { margin: 0; overflow: hidden; } </style> </meta></head></html>

【Three.js】球で構成されたボール

See the Pen [2017/03/21][Three.js]sphere ball by aadebdeb (@aadebdeb) on CodePen. <html lang="en"> <head> <meta charset="utf-8"> <title>[2017/03/21] sphere ball</title> <style> body { margin: 0; overflow: hidden; } </style> </meta></head></html>

【Three.js】立方体を立方体状に配置する

See the Pen [2017/03/20][Three.js]big cube by cubes by aadebdeb (@aadebdeb) on CodePen. <html lang="en"> <head> <meta charset="utf-8"> <title>[2017/03/20] big cube by cubes</title> <style> body { margin: 0; overflow: hidden; } </style> </meta></head></html>

【Three.js】SpotLightで影をつくる

See the Pen [2017/03/19][Three.js]shadow by cubes by aadebdeb (@aadebdeb) on CodePen. <html lang="en"> <head> <meta charset="utf-8"> <title>[2017/03/19] shadow by cubes</title> <style> body { margin: 0; overflow: hidden; } </style> </meta></head></html>

Three.jsでたくさんの球

See the Pen [2017/03/18] some lights and many spheres by aadebdeb (@aadebdeb) on CodePen. <html lang="en"> <head> <meta charset="utf-8"> <title>[2017/03/18] some lights and many spheres</title> <style> body { margin: 0; overflow: hidden; } </style> </meta></head></html>

スウィープすると消える円 #2

/** * sweep bubbles #2 * * @author aadebdeb * @date 2017/03/16 */ var easingVariables; var circles; function setup() { createCanvas(windowWidth, windowHeight); frameRate(30); easingVariables = []; circles = []; for (var i = 0; i < 1000; i+…

スウィープすると消える円

/** * sweep bubbles * * @author aadebdeb * @date 2017/03/15 */ var easingVariables; var circles; function setup() { createCanvas(windowWidth, windowHeight); frameRate(30); easingVariables = []; circles = []; for (var i = 0; i < 500; i++) {…

触れると小さくなり消える円

/** * touchable bubbles * * @author aadebdeb * @date 2017/03/14 */ var easingVariables; var circles; function setup() { createCanvas(windowWidth, windowHeight); colorMode(HSB, 360, 100, 100, 100); frameRate(30); easingVariables = []; circl…

触れると膨らむ円

/** * expanding circles * * @author aadebdeb * @date 2017/03/13 */ var eventManager; function setup() { createCanvas(windowWidth, windowHeight); frameRate(30); eventManager = new EventManager(); for (var i = 0; i < 100; i++) { eventManager…

マウスクリックで線が伸びるスケッチ

/** * expanding lines by mouse click * * @author aadebdeb * @date 2017/03/12 */ var eventManager; function setup() { createCanvas(windowWidth, windowHeight); frameRate(30); eventManager = new EventManager(); } function draw() { eventManage…

上から落ちてくる糸

/** * fall from ceiling * * @author aadebdeb * @date 2017/03/11 */ var offset; var shows; var actionFrames = 15; var counter = 0; function setup() { createCanvas(windowWidth, windowHeight); frameRate(60); offset = random(10000); event= fal…

ノイジーなパーリンノイズ

/** * noisy perlin noise * * @author aadebdeb * @date 2017/03/10 */ function setup() { createCanvas(windowWidth, windowHeight); mousePressed(); } function mousePressed() { var nscale = 0.004; var noffsetX = random(10000); var noffsetY = ra…

変調されたパーリンノイズ #2

/** * modulated perlin noise * * @author aadebdeb * @date 2017/03/09 */ function setup() { createCanvas(windowWidth, windowHeight); mousePressed(); } function mousePressed() { var nscale = 0.01; var noffsetX = random(10000); var noffsetY =…