Daily Creative Coding

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

【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 =…

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

/** * modulated perlin noise * * @author aadebdeb * @date 2017/03/08 */ function setup() { createCanvas(windowWidth, windowHeight); mousePressed(); } function mousePressed() { var nscale = 0.002; var nbaseX = random(10000); var nbaseY = ra…

歪んだパーリンノイズ#3

/** * distorted perline noise #3 * * @author aadebdeb * @date 2017/03/07 */ function setup() { createCanvas(windowWidth, windowHeight); mousePressed(); } function mousePressed() { background(0); noStroke(); var ndw = random(10000); var ndh…

歪んだパーリンノイズ #2

/** * distorted perline noise #2 * * @author aadebdeb * @date 2017/03/06 */ function setup() { createCanvas(windowWidth, windowHeight); mousePressed(); } function mousePressed() { background(0); noStroke(); var ndistort = random(10000); va…

歪んだパーリンノイズ

/** * distorted perline noise * * @author aadebdeb * @date 2017/03/05 */ function keyPressed(){ saveCanvas("image.jpg", "jpg"); } function setup() { createCanvas(windowWidth, windowHeight); mousePressed(); } function mousePressed() { backg…

円の交点

/** * intersection points of circles * * @author aadebdeb * @date 2017/03/04 */ var circles; function setup() { createCanvas(windowWidth, windowHeight); circles = []; for (var i = 0; i < 30; i++) { circles.push(new Circle()); } } function …

三角形の色の流れ

/** * triangle color stream # 2 * * @author aadebdeb * @date 2017/03/03 */ function setup() { createCanvas(windowWidth, windowHeight); frameRate(20); } function draw() { background(240); var r = 150; var step = 15; var num = 20; var col = …

三角形の色のストリーム

/** * triangle color stream * * @author aadebdeb * @date 2017/03/02 */ function setup() { createCanvas(windowWidth, windowHeight); frameRate(5); } function draw() { background(64); var r = 150; var step = 50; var num = 10; var col = [ colo…

二重の輪

/** * double ring * * @author aadebdeb * @date 2017/03/01 */ function setup() { createCanvas(windowWidth, windowHeight); noStroke(); } function draw() { background(247, 248, 218); translate(width / 2, height / 2); var num = 20; var angStep…

filter(BLUR)で霞んでいく線

/** * blurred line * * @author aadebdeb * @date 2017/02/28 */ var c1, c2, cl, clv; var tx, ty, vx, vy; function setup() { createCanvas(300, 300); frameRate(3); strokeWeight(1); initialize(); } function mousePressed() { initialize(); } func…

filter(ERODE)で削られていくリング

/** * eroded ring * * @author aadebdeb * @date 2017/02/27 */ var particles; function setup() { createCanvas(500, 300); frameRate(3); particles = []; for (var i = 0; i < 1000; i++) { particles.push(new Particle()); } background(0); noStroke…

filter(DILATE)でオブジェクトを徐々に小さくする

/** * dilating background * * @author aadebdeb * @date 2017/02/26 */ function setup() { createCanvas(500, 500); colorMode(HSB, 360, 100, 100); background(0, 0, 100); } function draw() { noStroke(); if (random(1) < 0.8) { fill(random(360), …

線の帯

/** * line belts * * @author aadebdeb * @date 2017/02/25 */ var posW = 0; var posH = 0; var posVW; var posVH; var posAW; var posAH; var numY = 50; var intervalH; var posAWOffset, posAHOffset; var stColor; function setup() { createCanvas(wi…

光の束

/** * fiber lights * * @author aadebdeb * @date 2017/02/24 */ function setup() { createCanvas(windowWidth, windowHeight); colorMode(HSB, 360, 100, 100, 255); frameRate(10); background(0, 100, 0); } function draw() { blendMode(BLEND); fill(…

円形に切り取られた空

/** * sky ball * * @author aadebdeb * @date 2017/02/23 */ var canvas; function setup() { canvas = createCanvas(500, 500); } function draw() { background(255); noStroke(); fill(0, 130, 200); ellipse(width / 2, height / 2, width, height); va…

shearXで歪められた市松模様

/** * sheared squares * * @author aadebdeb * @date 2017/02/22 */ var speed; function setup() { createCanvas(windowWidth, windowHeight); frameRate(15); rectMode(CENTER); speed = 0; } function draw() { var pspeed = speed; speed = mouseX - pm…

二点透視図法

/** * two-point perspective * * @author aadebdeb * @date 2017/02/21 */ function setup() { createCanvas(windowWidth, windowHeight); background(255); stroke(200); strokeWeight(1); frameRate(1); } function draw() { var w = random(width / 8, w…

重なる円と四角

/** * overlayed circles and triangles * * @author aadebdeb * @date 2017/02/20 */ var bgColor; var circleColor; var triangleColor; function setup() { createCanvas(windowWidth, windowHeight); colorMode(HSB, 360, 100, 100); frameRate(30); noS…

重なるCMYの円

/** * interlapping CMY circles * * @author aadebdeb * @date 2017/02/19 */ var colors; var isDarkest = true; function setup() { createCanvas(windowWidth, windowHeight); frameRate(30); noStroke(); colors = [ color(255, 255, 0), color(255, 0,…

瞬く三角形の光

/** * fragile triangles * * @author aadebdeb * @date 2017/02/18 */ var particles; var fillColors; var nOffsetX, nOffsetY, nOffsetSize; var nScale = 0.001; function setup() { createCanvas(windowWidth, windowHeight); nOffsetX = createVector(…

三角形の鳥群

/** * triangle birds * * @author aadebdeb * @date 2017/02/17 */ var particles; var fillColors; function setup() { createCanvas(windowWidth, windowHeight); fillColors = [ color(113, 199, 209), color(212, 211, 202), color(230, 26, 105) ]; fr…

三角形でマスキングテープ風スケッチ

/** * triangle tapes * * @author aadebdeb * @date 2017/02/16 */ var particles; var bgColor; var fillColors; function setup() { createCanvas(windowWidth, windowHeight); frameRate(10); bgColor = color(254, 247, 242); fillColors = [ color(240…

広がる縞々の円

/** * expanding circular stripes * * @author aadebdeb * @date 2017/02/15 */ var circles = []; var isWhite = true; function setup() { createCanvas(windowWidth, windowHeight); frameRate(10); noStroke(); } function draw() { background(255); v…

blendMode(DIFFERENCE)で干渉する縞

/** * interference disc * * @author aadebdeb * @date 2017/02/14 */ function setup() { createCanvas(windowWidth, windowHeight); mousePressed(); } function mousePressed() { blendMode(BLEND); background(random(255), random(255), random(255));…

テクノ・ライト

/** * techno lights * * @author aadebdeb * @date 2017/02/13 */ function setup() { createCanvas(windowWidth, windowHeight); colorMode(HSB, 360, 100, 100) frameRate(30); noFill(); } function draw() { background(0, 100, 0); strokeWeight(1); v…

ひだひだのリング

/** * frilly ring * * @author aadebdeb * @date 2017/02/12 */ var isWire = false; var nScale = 0.003; var nOffset1; var nOffset2; function mousePressed() { isWire = !isWire; } function setup() { createCanvas(windowWidth, windowHeight); fram…

波打つ花

/** * wavy flower * * @author aadebdeb * @date 2017/02/11 */ function setup() { createCanvas(windowWidth, windowHeight); frameRate(30); } function draw() { background(25, 37, 72); stroke(160, 138, 35); fill(160, 138, 35); translate(width /…

低解像度ディスプレイ上のオブジェクト

/** * rect flows in display * * @author aadebdeb * @date 2017/02/10 */ var particles; function setup() { createCanvas(windowWidth, windowHeight); frameRate(8); background(0); noStroke(); particles = []; for (var i = 0; i < 30; i++) { parti…

動く点でドロネー三角形分割

/* * moving triangles * * @author aadebdeb * @date 2017/02/09 */ var MARGIN = 200; var vertices; var hueVal; function setup() { createCanvas(windowWidth, windowHeight); frameRate(20); colorMode(HSB, 360, 100, 100); hueVal = random(50); ver…

p5.jsでドロネー三角形分割

/* * delaunay triangulation * * @author aadebdeb * @date 2017/02/08 */ var delaunayTriangulation; var hue; function setup() { createCanvas(windowWidth, windowHeight); colorMode(HSB, 360, 100, 100); hue = random(360); delaunayTriangulation …

ベジエ曲線で雫の形をつくる

/* * bezier drops * * @author aadebdeb * @date 2017/02/07 */ var rgb; var type = 0; function setup() { createCanvas(windowWidth, windowHeight); frameRate(30); noStroke(); rgb = [ color(255, 0, 0), color(0, 255, 0), color(0, 0, 255) ]; } fu…

createGraphics()でグリッチっぽくする

/* * chaotic replications * * @author aadebdeb * @date 2017/02/06 */ var canvas; function setup() { canvas = createCanvas(windowWidth, windowHeight); frameRate(30); colorMode(HSB, 360, 100, 100); noStroke(); background(0, 0, 100); } functi…

p5.jsのbeginContour(), endContour()を使う

/* * contours objects * * @author aadebdeb * @date 2017/02/05 */ var objs = []; var type = 0; var bgColor, fillColor; function setup() { createCanvas(windowWidth, windowHeight); for(var i = 0; i < 100; i++) { objs.push(new Obj(i)); } bgCol…