# Week 3 : Collaboration code

• Try making a rollover, button, or slider from scratch. Compare your code to the examples below. Later we’ll look at how this compare to interface elements we’ll get for free from the browser.
• Create an algorithmic design with simple parameters. (One example is 10PRINT, see: 10PRINT example.
• Tie the above two together and have an interface element control the visual design or behavior of other elements in your sketch.

https://alpha.editor.p5js.org/ellacyt/sketches/Bk4Zoq4iW

This week Roland and I collaborate to make an algorithm pattern and the slider will change its speed for variation.

```var x;
var y;
var z;

function setup() {
createCanvas(400, 400);
}

function draw() {
//create slider tie to mouseY
//background(200)
stroke(120, 180, 230, 20)
rect(370, 50, 15, 300);
var y1 = map(mouseY, 0, height, 45, height-100);
fill(0,100,220,40);
//line(30,100, 30, 300);
rect(370,y1,15,10);

if (random(1) &gt; 0.){
if (x &lt; width &amp;&amp; y &gt; height /2 ){
//noStroke();
//strokeWeight(1);
stroke(120, 180, 230, 30)
//stroke(130, 220, 230)
fill( 255, 255/x+30)
//fill( 255, 220, 200/ x*(y))
//upper half
triangle(x + 20, y, y, x, x/2, x);
triangle(width, 0, height, x, x/2,x);
//rotated upper half
//triangle(x + 20, height - y, x, x, x/2, x);
//triangle(width, height, 0, x, x/2,x);
//lower half
triangle(width - (x + 20), height - y, height - y, width - x, width - x/2, width - x);
triangle(0, height, 0, width - x, width - x/2,width - x);
//rotated lower half
//triangle(width - (x + 20), height - x, height - x, width - x, width - x/2, width - x);
//triangle(0, height, 0, width - x, width - x/2,width - x);
x+= 1*y1/100
}
else if (y &lt; height){
x = 0;
//x -= 2;
y += 10;
}
else{
background(255, 10);
x = -20;
y = 0;
}

}
//background(220);

}
```
Back to Top