//interface js setup
panel = new Interface.Panel({
// useRelativeSizesAndPositions:true
container:document.querySelector("#sliderPanel")
}) // panel fills page by default, alternatively you can specify boundaries
hbox = new Interface.HBox({
bounds:[0,0,1,1]
})
b = new Interface.Crossfader();
// c = new Interface.Button();
d = new Interface.Slider();
b.background = '#F9DA78';
b.fill = '#891512';
b.stroke = 'rgba(12, 56, 95, 1)';
//and the second
//darkBase.background('rgba(19, 16, 95, .1)');
d.background = '#F9DA78';
// d.background = '#E31F1B';
d.fill = '#891512';
// d.fill = '#891512';
d.stroke = 'rgba(12, 56, 95, 1)';
//rotation gestures
var k1 = new Interface.Knob({
bounds:[.05,0,.25],
value:.25,
usesRotation:true,
centerZero: true,
});
var k2 = new Interface.Knob({
bounds:[.35,0,.25],
value:.75,
usesRotation:true,
centerZero: false,
});
var m = new Interface.Label({
bounds:[.7,.2,.25,.5],
value:"uses rotation gesture",
vAlign:'bottom',
});
k1.background = 'rgba(12, 56, 95, .8)';
k1.fill = '#891512';
k1.stroke = 'rgba(12, 56, 95, .8)';
k2.background = 'rgba(12, 56, 95, .8)';
k2.fill = '#891512';
k2.stroke = 'rgba(12, 56, 95, .8)';
panelToo = new Interface.Panel({
// useRelativeSizesAndPositions:true
container:document.querySelector("#sliderPanelToo")
}) // panel fills page by default, alternatively you can specify boundaries
var xy = new Interface.XY({
childWidth: 25,
numChildren: 6,
background:"#111",
fill: "rgba(127,127,127,.2)",
bounds:[.3,0,.8,1],
oninit: function() { this.rainbow(),
console.log(xy.children[0].x)
},
});
panel.add( hbox );
// xy.background = "#0C385F";
xy.background = '#06375F';
xy.fill = '#F9DA78';
xy.stroke = '#06375F';
hbox.add(b,d, k1, k2 )
panelToo.add(xy);
panel.background = '#FFE47D';
// panelToo.background = '#FFE47D';
//creating variables for the graphic blocks
var lightBase;
var darkBase;
//set up for physics environment
var constellations = [];
var movers = [];
// the physics environment determinating seeds
var startOffset=0;
var xpos = 30;
var dir = 1;
var speed = 2;
//the trigonometry pattern making magic stuff
var angle= 0;
var angle2= 0.1;
var rotater = 0;
var avel = 0.1;
var aacc = 0.001;
var rotaterToo = 0;
var rotaterToo = 0;
var my_rect;
function setup() {
colorMode(HSB);
createCanvas(1000, 550);
//create slider which we will use later to let the user take control
//background('rgba(12, 56, 95, 1)');
//create the first graphic layer
lightBase = createGraphics (800,300)
//and the second. Initially at the same place to see how blending is. handled by p5
darkBase = createGraphics (800,300)
//set the transparent bg of first graphic layer
lightBase.background('rgba(12, 56, 95, .1)');
//and the second
darkBase.background('rgba(19, 16, 95, .1)');
fill('#EF6E73');
//creating the particles
for (var i = 0; i < 2; i++) {
// fill('rgba(239, 110, 115, 1)');
movers[i] = new Mover(random(0.1, 5), 0, 0);
// constellations[i] = new Constellation(random(0.1, 5), 0, 0);
}
}
function draw() {
// background('rgba(227, 31, 27, .009)');
// background('rgba(29, 29, 29, .01)');
// background('rgba(137, 21, 18, .001)');
background('rgba(18, 39, 66,.1)');
var val = d.value*100;
//graphics
for(var i =0; i<9; i++){
// draw the graphic to the canvas as an image(?) at location 0,0
// image(lightBase, 0, 5*(i*TWO_PI))
// and draw the secosnd-slightly off
// image(darkBase, 0, i+5*TWO_PI)
}
// console.log(crossVal);
circleMaker()
ballMaker();
rectangleMaker()
}
function ballMaker (){
//this is the arcing balls brush
for (var i = 0; i < movers.length; i++) {
var wind = createVector(0.01, 0);
var gravity = createVector(0, 0.1);
movers[i].applyForce(wind);
movers[i].applyForce(gravity);
movers[i].update();
movers[i].display();
movers[i].checkEdges();
}
}
function circleMaker (){
var slideVal = d.value*100;
translate(width/2, height/2)
// background('rgba(18, 39, 66,.1)');
// background('rgba(204, 31, 51,.005)');
// for(var i =0; i<9; i++){
//draw the graphic to the canvas as an image(?) at location 0,0
// image(lightBase, 0, 5*(i*TWO_PI))
//and draw the second-slightly off
// image(darkBase, 0, i+5*TWO_PI)
// }
//the rectangle brush
fill('rgba(252, 248, 248, .0001)')
// stroke('rgba(12, 248, 248, 1)');
// stroke(slideVal, 40, 120, .8);
stroke(14, 40, 120, .8);
ellipseMode(CORNER); // Set ellipseMode to CORNER seems default?
// ellipseMode(CORNERS); // Set ellipseMode to CORNERS-seems smaller
//rotates the circle by a certain amount each time which is what makes it looping I think?
rotate(rotater)
// ellipse(50, 50, 30, 30); // Draw ellipse-rotated each canvas draw?
//userInteraction! #1 askew the ellipse-changing the height of the ellipse being drawn to change the shape
//changing the height property by setting it also to the rotator changes the oval shape lightly askewed and bebautiful
// ellipse(150, 150, 30, rotater*PI); // Draw gray ellipse using CENT
//userInteraction! #2 WARP the ellipse-changing the width of the ellipse being drawn to change the shape (roatoer *30 is too much)
// ellipse(150, 150, TWO_PI*rotater, 30); // Draw gray ellipse using CENT
ellipse(slideVal, 150, 30, 60); // Draw gray ellipse using CENT
// ellipse(150, 150, 30, 60); // Draw gray ellipse using CENT
// ellipse(mouseX, 150, 30, 60); // Draw gray ellipse using CENT
rotater+= 0.01;
avel += aacc;
}
//drawing the fft?
// beginShape();
// //draw out the fft spectrum as visualization
// for (i = 0; i<spectrum.length; i++) {
// //maping spectrum i from a value between 0 and 225 to a value between height and 0
// //where is the height value coming from
// vertex(i, map(spectrum[i], 0, 255, height, 0) );
// }
// endShape();
function rectangleMaker (){
var crossVal = b.value*100;
// translate(width/2, height/2)
// background('rgba(14, 31, 51,.05)');
// background('rgba(239, 110, 115, .1)');
//one gear that effects the fill and stroke opacity and maybe color? and what else all at once?
//the rectangle PI SIN brush
fill('rgba(252, 248, 248, .0001)')
// stroke('rgba(12, 248, 248, .1)');
stroke(crossVal, 40, 120, .8);
//fill('rgba(252, 248, 248, .0001)')
//stroke(crossVal, 100, 100, 1);
// strokeWeight(1)
rectMode(CENTER);
rotate(rotaterToo)
for(var i =0; i<9; i++){
// var my_rect =
rect(0,50,130,80)
// console.log(my_rect.fill);
// aacc = slider.value();
rotaterToo+= 0.01;
}
avel += aacc;
}
function circleMakerToo(){
//This is for the sin wave ball and magic tails style following point
//Option 1- using the map function to work with cos/sin
// var x = map(sin(angle), -1, 1, 0, 400)
// var y = map(cos(angle), -1, 1, 0, 400)
// for(var x = 0; x< width; x++){
//Option 2- using map function to set radius
var r = map(sin(angle*10), -1, 1, 50, 150);
var x = (sin(angle)*r);
var y = (cos(angle)*r)+300;
// rotate(rotaterToo)
// var y = map(sin(x), -1, 1, 150, 250);
// var y = map(cos(angle), -1, 1, 0, 400)
//perlin noise gives the physics of motion some 'tension'
// var x = map(noise(angle), -1, 1, 0, 400);
// var x2 = map(noise(angle2), -1, 1, 0, 400);
ellipse(0, 55, 20, 20);
// stroke('rgba(239, 110, 115, 1)');
// strokeWeight(1)
// fill('rgba(112, 0, 112, .05)');
ellipse(x, y, 20, 20);
// point(x*PI, y*PI)
// angle += 0.005;
// rotaterToo+= 0.1;
// startOffset += 0.01;
//trying to put it all in a for loop to see what it can do
}
// The Nature of Code
// Daniel Shiffman
// http://natureofcode.com
var f;
var Mover = function(m, x, y) {
this.mass = m;
this.position = createVector(x, y);
this.velocity = createVector(0, 0);
this.acceleration = createVector(0, 0);
this.applyForce = function(force) {
var f = p5.Vector.div(force, this.mass);
this.acceleration.add(f);
};
this.update = function() {
this.velocity.add(this.acceleration);
this.position.add(this.velocity);
this.acceleration.mult(0);
};
this.display = function() {
crazyValue = k1.value*100
crazyValueToo = k2.value *150
console.log(crazyValue)
console.log(crazyValueToo)
// console.log(k1.value)
//i am going to try and use one of the random generators we made in week 1 to create radnom changes in color of the circle fill or stroke
// console.log(this.velocity);
var h = noise(startOffset)*60;
stroke('rgba(12, h*HALF_PI, 95, .9)');
strokeWeight(1);
// fill(255, 127);
// fill('#EF6E73');
// fill('rgba(249, 218, 120, .1)');
// fill(' rgba(255, 36, 31, 1)');
// fill(255, crazyValueToo, 55);
fill(crazyValueToo, 243, 174, .1);
startOffset += 0.01;
// ellipse(this.position.x, this.position.y, this.mass*6, this.mass*6);
ellipse(crazyValue, crazyValue/PI, this.mass*6, this.mass*6);
};
this.checkEdges = function() {
if (this.position.x > width) {
this.position.x = width;
this.velocity.x *= -1;
} else if (this.position.x < 0) {
this.velocity.x *= -1;
this.position.x = 0;
}
if (this.position.y > height) {
this.velocity.y *= -1;
this.position.y = height;
}
};
};
!
