“Square Agents” by Dave Pagurek
https://openprocessing.org/sketch/1986794
License CreativeCommons Attribution NonCommercial ShareAlike
https://creativecommons.org/licenses/by-nc-sa/3.0
{{filePath}}
{{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
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.
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!
CC Attribution NonCommercial ShareAlike
Square Agents
Pagurek
xxxxxxxxxx
/**
* An entry for @sableRaph's weekly creative code challenge! The theme
* this week is "create a circle or square in a new way."
*
* For my interpretation, I've got a bunch of individual agents that
* try to reposition themselves relative to their neighbours to make
* a square. Their view of their neighbours changes over time to keep
* things moving.
*/
class Agent {
constructor() {
this.id = random(10000)
this.position = createVector(random(width), random(height))
this.velocity = createVector()
this.prevPosition = this.position.copy()
}
findClosestCornerPair(agents) {
let closest = { score: Infinity }
const rangeFactor = map(sin(millis()*0.0005+this.id), -1, 1, 0.3, 0.8)
const withinRange = agents.filter(a => a.position.dist(this.position) < min(width,height)*rangeFactor)
if (withinRange.length === 0) return closest
for (const sideX of [-1, 1]) {
for (const sideY of [-1, 1]) {
const position = createVector(
sideX * (Math.max(...withinRange.map(o => o.position.x*sideX)) + 1),
sideY * (Math.max(...withinRange.map(o => o.position.y*sideY)) + 1),
)
const score = pow(this.position.dist(position) / min(width,height), 1) * 10 * rangeFactor
if (score < closest.score) {
closest = { score, position }
}
}
}
return closest
}
findClosestSidePair(agents) {
let closest = { score: Infinity }
const rangeFactor = map(sin(millis()*0.0005+this.id), -1, 1, 0.6, 0.8)
const sizeFactor = map(sin(millis()*0.0007), -1, 1, 0.2, 0.3)
const withinRange = agents.filter(a => a.position.dist(this.position) < min(width,height)*rangeFactor)
if (withinRange.length === 0) return closest
const avg = withinRange.reduce(
(acc, next) => acc.add(next.position.copy().div(withinRange.length)),
createVector()
)
const position = this.position.copy().sub(avg)
// position.x += map(noise(this.id, millis()*0.001, 0), 0, 1, -20, 20)
// position.y += map(noise(this.id, millis()*0.001, 500), 0, 1, -20, 20)
position.x *= min(width,height) * sizeFactor / (Math.abs(position.x) + 1e-4)
position.y *= min(width,height) * sizeFactor / (Math.abs(position.y) + 1e-4)
position.add(avg)
if (abs(position.x-this.position.x) < abs(position.y-this.position.y)) {
position.y = this.position.y + map(noise(this.id, millis()*0.001, 2000), 0, 1, -10, 10)
} else {
position.x = this.position.x + map(noise(this.id, millis()*0.001, 2500), 0, 1, -10, 10)
}
const score = pow(this.position.dist(position) / min(width,height), 2) * 0.5 / rangeFactor
closest = { score, position }
return closest
}
plan(agents) {
const others = agents.filter(a => a !== this)
let closestCornerPair = this.findClosestCornerPair(others)
let closestSidePair = this.findClosestSidePair(others)
// Randomly adjust scores to randomize chances that an agent
// tries to be a corner or part of a side
closestCornerPair.score += map(noise(this.id, millis()*0.001, 1000), 0, 1, 0, 1)
closestSidePair.score += map(noise(this.id, millis()*0.001, 1500), 0, 1, 0, 1)
if (closestCornerPair.score < 5 && closestCornerPair.score < closestSidePair.score) {
// Move to become the corner
const toCorner = closestCornerPair.position.copy().sub(this.position)
toCorner.setMag(Math.min(toCorner.mag() * 0.8, 5))
this.velocity.slerp(toCorner, 0.5)
} else if (closestSidePair.score < 5) {
// Move to become part of the side
const toSide = closestSidePair.position.copy().sub(this.position)
toSide.setMag(Math.min(toSide.mag() * 0.8, 5))
this.velocity.slerp(toSide, 0.5)
} else {
// Random walk
const randomNewVelocity = this.velocity.copy().add(
createVector(
map(noise(this.id, millis()*0.005, 3000), 0, 1, -1, 1),
map(noise(this.id, millis()*0.005, 3500), 0, 1, -1, 1),
)
).setMag(5)
this.velocity.slerp(randomNewVelocity, 0.1)
}
// Keep from drifting by going back to the center
this.velocity.add(this.position.copy().sub(width/2, height/2).mult(-0.007))
}
update() {
this.prevPosition = this.position.copy()
this.position.add(this.velocity)
}
draw() {
circle(this.position.x, this.position.y, 10)
}
drawPath() {
circle(this.prevPosition.x, this.prevPosition.y, 5)
circle(this.position.x, this.position.y, 5)
const tangent = this.position.copy().sub(this.prevPosition)
const normal = createVector(-tangent.y, tangent.x).setMag(2.5)
beginShape(QUAD_STRIP)
vertex(this.position.x-normal.x, this.position.y-normal.y)
vertex(this.position.x+normal.x, this.position.y+normal.y)
vertex(this.prevPosition.x-normal.x, this.prevPosition.y-normal.y)
vertex(this.prevPosition.x+normal.x, this.prevPosition.y+normal.y)
endShape()
// Framebuffer bugs makes this look bad :')
// line(this.prevPosition.x, this.prevPosition.y, this.position.x, this.position.y)
}
}
const agents = []
let prev, next
function setup() {
createCanvas(windowWidth, windowHeight, WEBGL)
prev = createFramebuffer({ format: FLOAT })
next = createFramebuffer({ format: FLOAT })
for (let i = 0; i < 80; i++) {
agents.push(new Agent())
}
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight)
}
function draw() {
[next, prev] = [prev, next];
imageMode(CENTER)
noStroke()
for (const agent of agents) { agent.plan(agents) }
for (const agent of agents) { agent.update() }
next.begin()
background('#1a8263')
push()
scale(1.0005)
tint(255, 252)
image(prev, 0, 0)
pop()
push()
translate(-width/2, -height/2)
fill('#ff8cf4')
for (const agent of agents) { agent.drawPath() }
pop()
next.end()
image(next, 0, 0)
push()
translate(-width/2, -height/2)
fill('#ff8cf4')
for (const agent of agents) { agent.draw() }
pop()
}
See More Shortcuts